How To Upload Images With Django - Django Blog #26

what's going on guys John elder here from Kota me.com and in this video we're gonna look at uploading images for our blog with Django and Python hi guys like I said in this video we're gonna look at uploading images for our blog but before we get started if you like this video want to see more like it be sure to smash the like button below subscribe to the channel give me a thumbs up for the YouTube algorithm and check out Kodambakkam where i've dozens of courses with hundreds of videos that teach you to code use coupon code youtube widen to get $30 off membership that's all my courses videos and books for one-time fee adjust $49 which is insanely cheap okay so a few videos ago we added this sort of rich text editor and this allows us to put images in our blog posts but we have to reference them from some other website right we're just we're just pointing a URL at some other image we're not actually uploading it to our blog and in this video that's what we want to do we want to add a little functionality that allows us to upload an image now we're gonna start out very basic we're just gonna upload one image per blog post just like a header image for a blog post and that's it and that's all we're gonna look at in this video but that will set up sort of the mechanism for uploading videos or uploading images and show you how to do it so let's head over to our code and let's head over to our models dot pi file in our the blog directory so that's gonna be right here and what we want to do is come down to our post model and add a field that will hold the images or at least hold the location of the image and I'll talk about what I mean by that in just a minute so let's just come under here and let's just call this header image and this is gonna be models dot image field the I and the F and image are capitalized you know in the past we've been working with car fields date fields many too many fields rich text fields this is an image field obviously it's for images so we called image field makes sense now we want to make sure like some of our blog posts don't have images and that's okay maybe we want to not have an image in a particular blog post and that's okay too so we have to sort of designate that so let's go null equals true and let's go blank equals true and now this will allow us to you know not have an image if we don't want one right or if we do all one we can still have one so now we need to designate where we want these images to be how like where do we want to put them right you would think we put them in a database but in sort of modern database design we don't often put images in databases you can some web hosting companies like Heroku won't even let you put images in your database you can do it and then like at the end of the day they'll delete all the images that you add it to the database because you just don't want to do that in these days you usually host your images on someplace like Amazon AWS or some other CDN content delivery network so you're not really ever gonna want to hold database images in a database what we will do is put the location of the image in the database that we can reference but not the image itself and that'll become clear in just a minute but for now we're not we're gonna be using Amazon AWS or anything like that we're just gonna store these in some directory in our app over here right so what directory well we need to designate that we can go upload underscore to set that equal to and let's just say this is images make sure you have the trailing space there now we don't have a directory called images this will get created automatically and I'll talk more about that in just a second so let's go ahead and save this and let's head back over to our terminal now this is a major change to our model so we have to run a migration now we're gonna probably get an error here when we do this so let's take a look at this so let's go python managed up I make migrations and we've done this a bunch of times in the past and you can see we get an error and it's saying hey you can't use the image field without pillow a pillow is a an image library the kind of width for python pillow stands for python image library pil was the original one but they've now updated it and renamed it pillow just be cute I guess so we need to install pillow so let's do that right now let's go pip install pillow and it's capital P I ll Oh W and if you read through this image you'll it'll tell you you know hey pip install pillow right so so often a so often error messages tell you exactly what to do if you just actually read them people just don't bother to read them so let's go ahead and pip install this collecting bum-bum-bum and it's done so we can clear the screen now and now we can run that command again python my make migrations this will make a migration it's added this little field thing and now we need to push that migration so Python managed to pi migrate and that will push the migration and we're good to go so let's now go python manage pi or run server to run our server again now we need to make a quick change to our form that makes the blog post so head over to our templates directory and look at our add post so here is the actual form that we fill out and it's got this form as p thing but up here we've got our form method post' we need to be able to tell our form hey it's okay to accept images and images are a different type of data right and they have different encodings so we have to allow for that sort of encoding in our form so all we have to do is in our forum post after after a method here we could just go ENC for encoding type equals and this is gonna be multi-part slash form - data so let me have this over so this is all on one line so you can read it multi-part slash form - data right so okay so this will allow our form to sort of accept accept images let's go ahead and save this now let's just for fun head back over here and hit reload and nothing has changed on here because we have to actually add a thing to our form itself right so let's head back over to our code and let's find that form so our form stop I file here's our post form and we have different fields right title title tag author all these things well our models PI we created this header image so let's copy this and bring it over here and sure we're in our post form and just add this field wherever we want and I'm just gonna put it at the end so if we save this now if we head back over here and hit reload boom we have this little header image thing down here and we can click browse a little thing will pop up and we can pick the image we're not gonna do that just yet but we're coming right along so now we need a mechanism to store these images and we need to tell our app hey you need to store these images somewhere and exactly how to do it now django comes with something that takes care of this for us now we haven't really talked about static files in this video series but if you look at any of my other django courses or playlists we almost always talk about static files and static files are CSS images and javascript and usually create a static directory make a quick change to your settings that PI file and then you put all those types of files in that directory well we need to do the same thing now but for something called media Django thinks of images as media where we're gonna be uploading so there's a specific media folder that needs to be created and we need to do that now so let's go ahead and head back over to our code and we want to go to our settings PI file this is the original settings that PI file way back when we first created this app I think we called our directory a blog and inside of here we see this setting stop PI and we don't really done much in here we come down here and we see there's a static URL so we need also now a media URL so let's go media underscore URL and we want to point this to media now this directory will be created manually or automatically when we upload our first image right so we also need to create a media route so let's go media under SCOR root and that's going to equal OS dot path dot join and then be a SE base underscore dir and then media so this just tells us hey how to create the URL path of our media stuff and where to put it we want to put it in our base directory which is defined way up here at the top somewhere right here this just allows URLs to work system independent whether on Windows Mac Linux or whatever this takes care of the pass for your files and stuff so okay now while we're here we might as well flesh out the static folder as well so this is what we always do with static files we create a static files underscore dir s equals and then inside here we can go oh s path join and then be ase dir and then static now strictly speaking we also need a comma at the end of this one and these two things media root and static ders they're very similar looking this is just inside of a tuple and this is not for reasons we don't really care about right now so we're probably not gonna be using static files if ever but if we do we're set up now we can we can use static files in a static folder we'd have to create a static folder to do that but anyway we're getting off topic media is what we want to look at so let's go ahead and save this file now there's one more change we need to make we need to go to our original URL spy file and this is the one in a blog write this is the one that gets set up automatically when Django creates our project remember we we added include and set the URLs to our the blog URLs and then we haven't really done much with this we did some member stuff also but we we need to make a couple of changes here so first we need to import a couple of things so let's go from Django Kampf conf we need to import that settings file and then from Django conf dot URL s dot static ridiculous we need to import static as well and then down here we need to make a really weird change to our URLs we need to come to the closing bracket here and put a plus sign and this is really weird but you likely have not seen this before but this is the way to do it so we go static and then settings dot media underscore URL that's that media URL we just set up in our settings not by file and then we want to go document underscore root equals Settings dot media underscore root right so little plus sign static and then settings dot meet a URL and the document root is settings whoops dot media root and these are the just the things we just set up in our settings that PI file so okay let's go ahead and save this and I believe that is pretty much all that needs to be done and we still need to account for how we want to output the image once we upload it and how we want to use it on our blog we'll do that in just a second so let's head back over to our website and let's well let's just start over come to add post and let's go image test and let's go image test again we don't put this in coding this is an image upload test all right and snip it image test one so here's the moment of truth let's click this browse button pick an image I've got just a picture of my dogs on the couch so you can see now it appears right here and let's click post and okay now we're not quite sure if that worked or not one way you could find out is to go to your admin panel let's just do that real quick I'm logged in as admin already and you come down to posts and here's our image test and oh does not look like anything was created messed up something and sent back over to our code and let's look at our the blog directory and our add posts and suppose we want multi-part - forma data Dewey alright so let's save this this will actually allow us to upload the images ok so that should do the trick let's head back over here and let's go back and let's delete this and try it again so add post let's call this image test - image test - this is an image test dot 22.0 image - and we come down here again click browse let's find an image there's a picture the dogs and let's post this now when we come back here and hit reload let's check this out and now we see there's this images right there so there was a file that got uploaded now we can head back over to our code and confirm this by you see now we have this media folder that just appeared inside there's an images folder why an images folder because in our models dot PI file remember where'd we go we we set the upload to images this images directory will be in this media directory and then so we see we've got dogs we click on it there's the picture so very cool now one more thing we need to do because if we head back over here and click on this it doesn't show up on the actual blog thing because we haven't told it to so we need to do that so let's head back over to our code and let's look at the let's see the blog directory templates and it's gonna be in article details HTML this is the file that puts the blog post on the page right so let's just come down here and find the post body and here it is and maybe right on top of this since this is an image header we want it listed first in the blog so we could just well let's do it two ways I'll show you what what this output so if we go post dot and send back to our models dot PI file and you need to know what you called this thing so we called this header image so I'm just gonna copy this and post that header image now we're not posting the image itself we want the location of the image the URL of the image so we put dot URL so let's save this and I'm gonna put a couple of line breaks just for good measure let's go ahead and save this head back over here and just see what this is we're not done yet I just want to show you what this will output this will output the URL where this thing is sitting right so now we can take that and make it into an image tag and it will output the image so let's just do that real quick and to do that all we have to do let's put this on a separate line is go IMG SRC equals and then wrap this whole thing in quotation marks and then close the tag this is just a basic image tag it's basic HTML image tag right an image source the source is that URL right there so now if we go ahead and save this head back over to our blog hit reload boom there's our picture if we can right click on this and view the image if we want to see exactly where it's sitting it's sitting at localhost / media / images / dogs - dot PNG because that's the name of it and boom we're done that's how you upload images so pretty simple once you get the setting stop io5 file fixed you know add those media URLs in the media URL root and all that stuff that we did you don't have to do that once obviously now you can upload all kinds of images any type of images that you want using the same process you would go to your models dot pie file create a record for it to store little specific images and you're good to go so now one last thing we need to look at is posts that don't have an image right we try and click on an old post with no images we get an error so let's head back over to her code really quickly and we can just fix this but with a quick if statement so we've got here our image URL let's create a quick if statement let's go if post dot header underscore image so if there is an put it on the screen otherwise we can just end if and not do anything so go ahead and save this head back over here now we click on some other post it works fine if we come up to our image test2 it works fine and we're good to go so pretty simple pretty straightforward and we are moving right along so that's all for this video if you like to be sure to smash the like button below subscribe to that channel give me a thumbs up for the YouTube algorithm and check-out go to me.com or you can use coupon code youtube align together $30 on membership they pay just $49 to access all my courses over forty five courses hundreds of videos and the PDFs of all my best-selling coding books jo-ann over a hundred thousand students learning to code just like you my name is John elder from Kota me , we'll see in the next video

Channel: Codemy.com

Views: 43,312

Keywords: django image upload, django image upload and display, django imagefield, django image gallery tutorial, django images in templates, django imagefield example, django image upload form, django image model, django imagefield tutorial, python django image upload, python django image processing, django blog image upload, django blog images, django blog, django blog app, django python image files, upload images django blog

Id: ygzGr51dbsY

Length: 17min 58sec (1078 seconds)

Published: Tue Jun 23 2020