Django Rest Framework Series - Image Uploading / Handling with React Front-end - Part-8

Hello, we are back again for the seventh tutorial in this Django Rest Framework Series. In this series of tutorials we will work through the Django Rest Framework and in addition build a React application to consume our Django Rest API. In this tutorial we look at expanding the post creation form and including image uploads through our Django API saving image and text to a database. As per normal, we use React for the front-end building upon what we have started in the previous tutorials.

🎉More from this Django Rest Framework Series:

00:00 Introduction
🐱‍🏍Django Development
01:28 Install Pillow
02:32 Configure media folder
05:21 Update model with new fields
09:25 Edit Serializer
10:05 Create new view
20:09 Test in postman
🐱‍🏍React Development
27:30 Introduction
29:10 Updating the create component
43:06 Test new component

Code Repository:

👍SUBSCRIBE to get more free tutorials, courses and code snippets!

👍👍Follow us on Facebook

👍👍👍Follow use on Twitter:

[橋-nw]

Really amazing.I had been overwhelmed for three days for uploading image on class based function though, I beat a lot of complicated errors because of this video. Thank you so much from Japan.

[SaidEliasSalcedoCupitra]

Watching you is truly learning. Thank you so much

[bibhuprasadmahakud]

Very useful. This channel contains a lot of materials for serious start up developers.

[chukwuemekamusic]

Thank you so much for this lesson... answered a lot of questions for me! may God bless you

[Pyplane]

Good job ! Must admit that this channel is awesome :)

[shalomalexander]

Seriously It had been troubling me since 2 days. Now you have helped to get out of it. Thanks a lot. Great Tutorial.

[aashayamballi]

Half way through the video and I really want to thank you for using APIView 🙏🏼

Fun fact:
You kinda sound similar to Shaun Pelling aka The Net Ninja 😄

[sankethb.k]

Thank you i gained a lot of knowledge from this series. You are really a good teacher.

[raysilitonga]

Very helpful tutorial, well explained.
How do you make that the image field is optional, meaning it is not mandatory for the user to submit the image?
Thanks in advance.

[rezarst]

ive a problem, when i wanna use PUT request to update image field, it will be None, and will return Response null for image field, im using PostMan

[shn]

After upload image and publish the blog, I am no longer able to update the blog. An error appears image was not submitted, but for delete its works

[vamsikonduru]

its really nice vedio explained very nice, but we cant use this in real time application because storing all the images in db and project is not a good idea insted we can store the image into s3 bucket and url of that image in s3 we can store in db, so if you have any idea help me dude .i hope this will be challenging and gives good experience to you and your subscribers.

[user___]

I got a no file submitted payload help

[appusayooj]

Can you please make video about deployment of DRF and reactjs?

[denisgarden]

Dear Zander, This set up with the media directory is just for development purposes, right? For deployment we would need some sort of storage for images like AWS buckets? Or it is OK like this, for deployment too?

[myou]

Hello, Thank you for the tutorial, it's awsome, but how do you manage the cateogry choices ?? in post create

[aryanpandey]

Can you please tell how I could add richtext editor in react for posts and save the formatted text to database using the DRF?

[navarajpokharel]

hello can you do small tutorial for uploading multiple images in DRF at once any hint?

[robintewolde]

Dear Very Academy, thank you for your helpfull tutorials. But when i send a image to the backend i get a error:
django Unsupported media type "application/json" in request.

Do you have a idea? I am using the axios instance.

[mrdarkimedia]

Well done,
Download with authentication???