How To Upload Images With Django - Django Blog #26

In this video I'll show you how to upload images using Django.
We'll set up the ability to upload a header image for each blog post. Uploading images with Django is pretty simple, we need to add a field to our database model, then make a quick change to our settings.py file, and our original urls.py file. Then tweak our blog post form, and the blog post page itself.

[@Codemycom]

▶️ Watch Entire Django Blog Playlist ✅ Subscribe To My KZbin Channel: bit.ly/3bWN6wj bit.ly/2IGzvOR ▶️ See More At: ✅ Join My Facebook Group: Codemy.com bit.ly/2GFmOBz ▶️ Learn to Code at Codemy.com ✅ Buy a Codemy T-Shirt! Take $30 off with coupon code: youtube1 bit.ly/2VC9WUN

[@Talhakhhaan]

Can you share the code?

[@Codemycom]

@@Talhakhhaan github.com/flatplanet/djangoblog

[@ulearnacademy5866]

@@Codemycom Thank you so much for this

[@Codemycom]

@@ulearnacademy5866 welcome!

[@jimmyopot1972]

dear sir, this is 2021 and for some reason, static files with Django give me a lot of headaches...this video has literally helped me understand it, thank you so much.

[@christiantatsambon]

like you in 2022

[@febjayinc.997]

like you in 2023

[@prathvisingh8288]

Thanks a million man...I was struggling for hours to achieve this!

[@Ian-bb7vv]

me too

[@nyikongwenya9934]

Hi , can you please show to upload several images . Great videos

[@golammuhaimeen2825]

thank you so much for this amazing video! seriously. I had to watch 3-4 other trash ones before coming across this one. perfectly explained fam!

[@Codemycom]

Glad you liked it!

[@jlyricks]

Hello @Codemy i just wanted to said thank you for your very good tutorial. i was in a very difficult situation and it help me. (excuse for my bad english. i'm Francophone)

[@NOTHING-en2ue]

i was searching for this tutorial thanks a lot

[@Codemycom]

Welcome

[@sithuhtun3609]

John, your tutorials are awesome!

[@Codemycom]

Glad you like them!

[@zantron702]

The app is already awesome. Would be a nice feature to have a comment section for blog entries.

[@Codemycom]

Will likely do comments in the future

[@kaushalniroula4129]

Thanks....it worked...finally...due to you....I was quite stuck

[@Codemycom]

Glad to hear that

[@hemalpatel3770]

straight to point & into the brain thanks man!

[@Codemycom]

Sure thing!

[@MariusOdobasa]

I managed to understand Django thanks to you!

[@Codemycom]

Awesome!

[@protozvezda]

That was awesome! What is more important - it worked for me! Liked and Subscribed!

[@Codemycom]

Thanks for the sub!

[@DanielGutierrez3007]

Danr bro, you are keeping me the star at work.

[@Codemycom]

ha nice

[@sandipsky8756]

really awesome and helpful. love to see more django projects tutorials in the future ❤❤

[@Codemycom]

More to come!

[@vivekshotti]

hey, codemy (john elder), your django course is lit. Thank you.

[@Codemycom]

Thanks!

[@donnewquist6990]

You're the coolest nerd I never met...

[@Codemycom]

Ha thanks

[@963seeker]

Chatgpt couldn't solve this for me, thank you!

[@Codemycom]

welcome

[@anusri1886]

easy to understand. Awesome tutorial

[@Codemycom]

thanks!

[@naseathsaly]

Thanks you it save my time

[@Codemycom]

Happy to hear it!

[@fajar3972]

Good explanation, so easy to understand. Thank you so much sir :D

[@Codemycom]

Most welcome!

[@stevemulcahy5014]

This is great! What is the best way to handle multiple images though? I don't really want to restrict the amount of images, but kind of hate hard coding in image1...image4 in my posts model. One other thing I've been using is imagekit to resize the image to something web friendlier and even for the header image to make a banner image. I'm a devops engineer (with a history of ops rather than dev) and your videos are helping me understand - and be inspired by - django and Python.

[@sherryjoseph7571]

awesome video - really helped me out!

[@Codemycom]

Happy to hear it!

[@sagarchoubey8653]

General Feedback: It would be better to show the function through which the template is called where you were displaying the form.

[@victorsova7045]

You are the best

[@Codemycom]

Thanks!

[@lckhndleup]

thank you so much . ıt solved my problems

[@Codemycom]

Happy to hear it!

[@kelvinmacharia3715]

Being looking forward to this tutorial and so I had to upload my face to make feel even better🤣🤣

[@Codemycom]

Thanks!

[@gamehamster9379]

Спасибо тебе, мужик!

[@GabrielRPalma]

Thanks very much for your videos !

[@Codemycom]

You're welcome!

[@chelseafan1693]

how to upload multiple images using one button only?

[@ufukcicek9976]

Hello, I also use Editorjs in my project. But I have a problem, I can save images and files in the editor in my local, but when I deeploy the project, I get an error. It says it can't find the file. I searched a lot but couldn't find a solution. Do you have any idea about this topic?

[@sergey5551]

good tutorial

[@Codemycom]

Glad you think so!

[@CesarBArts]

I don't know why, but i can use post.image.url in django template only if i put IF statement before my

[@pierrelesage1535]

thanks John!

[@Codemycom]

Welcome!

[@City__Walker]

I have problem how add multiple upload images functionality in this example

[@Ian-bb7vv]

hey John, thank you for all the wonderful videos that you made, i really benefit a lot from them. But i think whren you are going to do the code in views.py, you need to use form = whateverform(request.POST, request.FILES) instead of just rquest.POSTright?

[@Codemycom]

what makes you say that?

[@Ian-bb7vv]

im thinking maybe the request.POST does not include image files? BTW im sending .jpg files in this project.

[@Ian-bb7vv]

im still learning so not sure why that is happening though

[@jeanpaulrodriguezflores2398]

U are rigth man u need to ruse request.POST and request.FILES. I was struggling a lot with these

[@fatemeakrami8216]

thanks for your helpful video , but where can I see the view of these post adding (specially the image adding ) ??

[@fatemeakrami8216]

I got it :|

[@Codemycom]

cool

[@x-tremeprogrammer]

What about multiple images??

[@zinlinhtun1510]

hello sir, if possible, Please share how to upload multiple images to our blog post...

[@robh9184]

Nice one John! This is a useful tool

[@Codemycom]

Thanks! Glad you like it!

[@the_proton_guy]

I have watched this tutorial a dozen times at this point. I have followed each step but the images do not seem to be uploading to the database. I need help!!

[@Codemycom]

Don't know what to tell you...you skipped something.

[@nami_academy2024]

am having this error Exception Value: The 'header_image' attribute has no file associated with it.

[@rangabharath4253]

Awesome as always

[@Codemycom]

Thanks!

[@azarsirdash]

thank you for the video, I watched and applied step by step , but the picture doesn't save from the form in templated but in the admin page can save image and finally . The solution: add request.FILES in the views.py file. in place form = CreatePostForm (request.POST)

[@beardtreasure]

Wish you good health, creative inspiration, of your professional plans, and all personal desires and dreams.

[@harshvardhanp6184]

Thanks bro.... 👍👍👍

[@Codemycom]

Welcome 👍

[@GreyEyedAthena]

thank you

[@Codemycom]

Welcome!

[@jiffylab]

Hi! This truly helped a lot. However, when I updated my blog and cleared the image then try to update the blog again with another photo, it won't accept it anymore. Any idea how to fix that? Thanks.

[@manavprajapati1469]

what if user not upload image , if we want that user have to upload image , how to do it

[@animeshsingh4290]

Quick Solution for anyone who is able to upload the file in the form but the image does not show up. In your views.py, whatever functions is handling the form validity. Add request.FILES to the form for it to work. def create(request): if request.method == 'POST': form = listingForm(request.POST, request.FILES) ....

[@ponishbhatia9807]

THANKS A TON

[@handyscenario178]

BRO thank you so much, I was trying to debug this for literally 2 hours

[@abdullahhazari918]

I have some problem. When im creating post and add photo everythink is fine. But when i delete photo (using form) and after that trying to add it again photo does not come back. Its work by admin section but not from form. Can you help me sir.

[@dradrigapatrick]

Very great!!

[@Codemycom]

thanks!

[@colonnaden]

This video would have been perfect.... Only if you had showed the view where you did request. FILES

[@rahamanhabib1347]

As always Great!!!

[@Codemycom]

Thanks again!

[@amponsahclinton7624]

Hello sir how can I add the image selected to display on home.html

[@viswamberprasad9418]

I was coding along with this video,but for some reason,my image wouldnt be uploaded in Django. when i checkd in the admin section,it always showed 'no files chosen',i checked every line of code again,rewatched the video,but couldnt get around the error,later after surfing the net for a while,i have found the solution. If you are facing the same error,then please change your views.py file when you create an instance of the form in your views.py file,accept it as form=ExampleForm(request.POST,request.FILES) the request.FILES is important. John kindly pin this comment,or add a comment yourself,to help those who are scratching their heads,trying to solve this issue,like I did

Thanks for your sharing solution, much appreciated

[@kaykwame91]

Thank you for sharing I was having the same problem.

[@talhaeser2840]

thank you so much

[@the_proton_guy]

My God! You just brought me out of my misery. Thank you soo much

[@robertochieng8115]

Thank you Big Bro

[@momothiam]

Hi, I can add picture directly from the blog app but it doesn't show the file on my admin page. but when I do the reverse, I get the picture on the blog post app. Can you help me plz. I like the way you explain things(straight to the point and clear).

[@Codemycom]

Sorry I'm not really sure what you mean. Did you add the model to the admin area?

[@momothiam]

@@Codemycom Yes I did. I followed all the steps one by one but I am getting this error msg. File "C:\Users\......\mysite\lib\site-packages\django\db\models\fields\files.py", line 38, in _require_file raise ValueError("The '%s' attribute has no file associated with it." % self.field.name) ValueError: The 'header_image' attribute has no file associated with it. [23/Aug/2020 16:30:46] "GET /post/28/ HTTP/1.1" 500 161540

[@momothiam]

@@Codemycom The error happens when I try to add the image src onto my post_detail.html templates. this is how I have it formulated: I did add the model to the admin area. from django.contrib import admin from .models import Post, Comment # Register your models here. admin.site.register(Post) admin.site.register(Comment)

[@pandurangasharmaramaka]

Thank you John! I am learning Django from your videos in my 53 years of age though I am teacher in Telugu (a South Indian language) with 'zero' knowledge in computers. The posts without image are showing message " The 'header_image' attribute has no file associated with it. " Can you suggest please.

[@pandurangasharmaramaka]

Thank you John, I found solution!!! tried the bellow one -- {% if post.header_image %} {% endif%}

[@samucancld]

Gracias dolape

[@TechWithSabri]

Hi Sir; I hope you are doing very well first of all, thank you so much for: Time. Effort. Simplicity. Discipline. And when i'm watching your videos, a question came to my mind: Why you don't use an editor like PyCharm or Visual Studio. What is special for Sublime text? Again, thank you. I will text you when i finish this Tutorial We love you

[@Codemycom]

Sublime text is free, easy to use, requires no configuration, and always works. Those other tools don't always work, require configuration, and can be impossible for newer coders to figure out.

[@jakespeers6835]

Hey John, I'm a member on your site but oddly enough didn't see this series there! Anyway, great series, but was wondering if theres any chance you can make a video showing how to automatically upload photos to AWS S3 or some other NGINX host for production sites? Would help a lot! Thanks!

[@Codemycom]

Not a terrible idea

[@anthonyfortunes5136]

What if u want to use url field instead of image field. is it the same process?

[@Codemycom]

pretty much

[@FarhanAhmed1360]

I exactly following your tutorial step by step and now getting this error "The header_image attribute has no file associated with it

[@FarhanAhmed1360]

The problems gone after delete old post

[@mrbuslov]

@@FarhanAhmed1360 Oh GOD, thanks you for this solution! I've been solving this problem for 2 days! You really helped me

[@akashbhalotia317]

Thanks man.

[@Codemycom]

You bet!

[@amargupta8881]

Saved My Life :-)

[@Codemycom]

Glad to be helpful!

[@fabiof.deaquino4731]

Thanks again and time again :)

[@Codemycom]

Glad you're enjoying them!

[@stelity]

what if you don't want to use {{ form.as_p }} and want to do a custom form? What would you type in the html and views.py?

[@PhillyEastSide]

Hey, not sure if you have found a way around it yet. But I had a similar issue and I fixed it by doing the following in my .HTML template file: Title of route:{{ form.title }} Tags:{{ form.title_tag }} Country where crag/route can be found: {{ form.country }} Climbing grade(French system):{{ form.grades }} Route guide/Beta:{{ form.body }} I am building a blog for rock climbing and I wanted to add a bit more explanation for the required fields. so instead of calling {{form.as_p}} you just use {{form.x}} (x being = whatever you called the 'field' in your forms.py). You will just have to make sure you use the correct field name you used and create the form field by field. If there is an easier way around this, Please let me know! I am still quite new to the Dev game.

[@francineamberfortes4138]

what if multiple image?

[@shawnbeans7389]

Images, I like images...

[@Codemycom]

lol

[@evelynhernandez5564]

Hi Jhon. Thanks for your amazing tutorials. I have no problem when i try to upload the image, but when i try to modify on the 'updated post' page nothing happen. Thanks a lot

[@Codemycom]

Hm, weird. Typo in the code somewhere

[@solkidonakis5407]

can i use this for an api?

[@Codemycom]

Depends

[@graceyudha]

can we upload directly from our local machine using ckeditor uploading richtext?

[@Codemycom]

Sorry, don't know what you mean.

[@benabdallahrahma8245]

please i want to save my images in a mongodb database i tried with GridFSStorage but i didn't get any result could you please help me and thank you for your content it's really helpful.

[@Codemycom]

Sorry, I don't have any videos on Mongo

[@adityarajora7219]

uploaded is found to NULL ....please solve this problem.

[@toluwanimiadeyemo8099]

Great video I tried uploading a video file It's giving me some challenge

[@Codemycom]

yeah video is tricky

[@jakobfredriksson2272]

At 13:00 I felt like John Carmack because I noticed it earlier in the video.

[@silaskanku7377]

Hi Codemy i have code error : NameError: name 'os' is not defined I tried to "import os" in the sesttings.py but its still no working. May you please help.

[@Codemycom]

What did you do differently from the video?

[@silaskanku7377]

@@Codemycom Now it's working i'm following exactly what you did. However I just had to add "import os" inside settings.py file, then add BASE_DIR = Path(__file__).resolve().parent.parent instead of BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) I googled it actually

[@sandipsandal]

hi! how can I upload image without using :- forms.py and and their function I simply create a signup form using html and I create extra model: and add in contact and image file (in User detail) but contact save in User db but image not being saved..... any suggestions for me Help me

[@anonone9779]

How to upload multiple files sir

[@Ethiogamer-d9k]

how to update blog images???

[@doneeverything5410]

Make a tutorial on how to upload video like this uploading images ...

[@Codemycom]

Might do that, but no one uploads video to their own website...you host that stuff on youtube or vimeo or some other service...

[@deki90to]

Just use google, it's very simular

[@doneeverything5410]

@@Codemycom sif if someone wants to make video sharing website ... by the way I loved your content

[@aaronapm53]

pelao water white

[@zanz8166]

este kree k uno e loji el caeza e hueo y la ktm

[@Codemycom]

Ha

[@josephdoneecagampang3007]

Good day sir, I watched your video over and over again, still my media folder/directory doesn't appear. When I go to the django admin, it shows the image file name, but when I click on it, it says "'...\media\FB_IMG.jpg' does not exist". How can I solve this sir? Please notice me

[@Codemycom]

Add this to your settings.py file: import os

[@dradrigapatrick]

I think the new version of django doesnt use os.path() anymore bacuase when i use it, i get the same error, use this and see MEDIA_URL = '/media/' MEDIA_ROOT = BASE_DIR / 'media' STATICFILES_DIRS = ( BASE_DIR / 'static', ) and in url.py (root) use this option if settings.DEBUG: # new urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) instead of adding a + infront of the existing urlpatterns . Its same thing but when i used it, i ran into a crsf_token error. Hope this helps out. Otherwise the best

[@Codemycom]

@@dradrigapatrick it doesn't. you need to add this to your settings.py file: import os

[@dradrigapatrick]

Codemy.com Mine works well without import os

[@killcam8071]

yes

[@musabmohammed7973]

I am searching for a way to detect ID card.

[@solomonkassahun7845]

Awesome tutorial but when I try it on I got even the URL for the image but it does not display it on the browser. I tried it even for uploading video files but same does not display on browsor. I may need little help here 😃 ...thank you

[@Codemycom]

Check your code for typos

[@fajar3972]

have you missed the url text in code ? like {{context.attr.url}}

[@ignacioheim8637]

I am trying to use the media object Bootstrap like: But it doesnt work. Someone could use it? Thanks so mucho for these tutorials!! Greetings from Argentina!

[@erikonomics1400]

Hey, great video! I keep getting the following error: The 'header_image' attribute has no file associated with it. The image is displayed normally on the post where it was uploaded but displays when clicking on other blog posts that do not yet have the image. I made sure to add null, and blank = True in the models.py and if {% post.header_image %} in details.html. Any ideas what else could be causing trouble? Thanks!

[@waseksamin3216]

YOu have to type {{ post.header_image.url }}

[@sametdemir3961]

will you make comment section? thanks for the video!

[@Codemycom]

Eventually yes

[@jagadeeshmandala4097]

Can i get github link

[@AI_DevLab]

6:51 April Dog Shit LMAO

[@Codemycom]

lol

[@maihuire11]

os is not defined.

[@Codemycom]

In your settings.py file, type: import os

[@maihuire11]

@@Codemycom Excellent, I already corrected it. thank you.

[@rahulagarwal5694]

great video can you make a video related to tags using Django-taggit

[@Codemycom]

I've never used that, sorry

[@gouthamgoutham7640]

Sir do a video on uploding videos

[@Codemycom]

Probably won't. You wouldn't ever do that, you'd use a service like vimeo or something to host video.

[@cimihan4816]

make a video on posting comments on blogs

[@Codemycom]

probably will

[@mathoernsche]

the doggies

[@Codemycom]

:-)

[@derekkroeker4582]

Django 3.2 looks different 8:58

[@derekkroeker4582]

BASE_DIR = Path(__file__).resolve().parent.parent

[@Codemycom]

@@derekkroeker4582 just add: import os to your settings.py file

[@uzbegimuz3836]

Are they your own dogs

[@Codemycom]

yes

[@liviumircea6905]

media ,static files configuration blah blah real pain in the ass

[@Codemycom]

not really, no.

[@haimeiwang742]

Very helpful. Thanks a lot!

[@Codemycom]

Happy to hear it!