Upload Images To Django - Django Wednesdays #38

what's going on guys john elder here from codeview.com and in this video we're gonna add images to our app with django and python alright guys like i said in this video we're gonna add images to our venues before we get started if you like this video you want to see more like and be sure to smash like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codeme.com where dozens of courses with hundreds of videos that teach you to code coupon code youtube one to get 30 off memberships all my courses videos books runtime for just 49 which is insanely cheap and going up very soon check the video from a couple of days ago we're tripling the price of membership in the new year if you want to get the cheap price now you just have a few days to take advantage of this so i definitely recommend you do that now if you want details you can watch the video from a couple days ago big announcement video on the channel okay so like i said in this video we're going to add the ability to add an image to our venue so we have it we have a venue those venues might want to have a picture of themselves and right here i've just got it sort of listed here on the screen we'll make it look nicer later on in this video i just want to set the stage to start to actually upload and save them to our app and do all that stuff so that's what we're going to do in this video so you can see if we come over here to add venue now we have this thing where we can pick a picture and pops it in there and then we can submit this and that's what we're going to look at in this video so let's head back over to our code i'm using the sublime text editor and the git bash terminal as always and as always you can find a link to the code in the pen comment section below as well as a link to the playlist with all the other django videos in this series so check that out if you haven't so far so there's a lot of moving parts to this and it's going to take a little while to do so let's just jump right in here and let's head over to our original directory in our settings.pi file now when we started this django 3 had just come out and django 3 has this path lib and in the past we've used os so we can still use os so i'm just going to do that now i'm going to import os that'll make this a lot easier than dealing with this new path lib thing even though now we're in version 4 of django we can still just do this import os thing so let's come down here to the bottom of our screen here and we've got this static url directory and we don't actually have any static files in our app just yet but it's conceivable that we will at some point but that's not what we want to focus on we want to add a media directory so let's go media underscore root and set that equal to forward slash media forward slash and think of images as media files we're going to upload them to our app itself we're not going to upload them to a database now normally you don't generally save images in a database in fact most databases that are hosted online won't even let you do it so if you try to upload an image to a heroku database it'll let you but then at the end of the day it'll purge out all those images and delete them so generally what you do is you save those files somewhere else and then in the database you save the location of the image the url right so you're saving text in the database not the image itself so what we're going to do normally you would save it at a cdn like amazon aws or the azure cloud or you know somewhere like that we're just going to save it in a directory called media in our app here so it'll be sort of like a static file and that's how we're going to do it so we need that so now we need a url so let's go media underscore root and set that equal to os dot path dot join and we want to join the base underscore directory and set that equal to media and this base dir base directory that's always defined at the top here base directory and the newer versions of django this is path this used to be os that's why we're doing it os old school way still works just fine so that's we're going to do so okay that looks good now we probably don't really need it but for good measure let's go static files underscore durs and set that equal to a tuple and inside here let's go os.path.join and do the same thing set the base dir but in this case it's going to be static and this needs a comma at the end of it since it's a tuple here right so this will just create a path to our static files we don't really have static files yet but we might sometime in the future so i'll just put it in there now so okay that looks good so now anytime we upload an image we need to be able to find the url for that image to reference it so in our original urls.pi file in our myclub website not in the events one right in the original one here we can sort of define that stuff and up here we need to import a couple of things so we need from django.conf we want to import settings that settings file we just did and then also from django.con.conf dot urls dot static we want to import our static url okay and now down here this is where it gets a little weird we need to put a plus sign and then type in static and then set settings dot media underscore url that url we just defined right and then we need to define the document root and we to do that we just go document underscore root and set that equal to settings dot media underscore root okay that looks good so what this does is basically when we upload an image it will allow this to automatically kind of create a url so that we can reference it later we'll save that url in the database and this will help us when we click on it or want to view the image it'll help to create the url that will allow us to view that image so okay let's go ahead and save this file make sure settings.pi file is saved and looking good so now before we go any further we need to talk about the database so let's head back over to events and look at our models.pi file and we've got this venue model and these are all the fields in the database for the venue and there's no field here for image so we're gonna have to add one right so we can call this anything we want let's call it venue underscore image and we want to set this equal to models dot image field up until now we've worked with integer field email field url field and car field now we're adding image field and inside of here we need to define a few things so first of all a venue may or may not have an image if it doesn't that's fine so we need to account for that so let's say no equals true that means you know hey it doesn't have to have an image also blank can equal true all right same deal if there isn't an image that's fine and now we need to define where we want to upload these images so let's go upload underscore two and set that equal to a directory called images with a forward slash okay so this images will go in our media directory remember we created this media directory you'll see over here there is no media directory in all of our files over here but as soon as we upload an image it will be created automatically and inside that media file there'll be a subdirectory called images where all of our images will be saved right so okay that's cool now this is obviously a major change to the database so we're gonna have to make a migration and push the migration but we're dealing with images here and we also need a library to deal with the images and for that we're going to use pillow now if we run pip freeze from our terminal i'm in my my club website directory i've got my virtual environment termed on we can see we've already got pillow so we must have done something in a past video to where we needed pillow if you didn't for some reason you need to install it that's just pip install pillow and it's going to tell me hey you've already got it no big deal so all right we've already got pillow so now let's make our migration so let's go python manage.pi make migrations that's plural even though we've just made one migration it's always make migrations and we can see okay we've made a migration we've added the field venue image to venue okay now we need to push that migration into the database so python manage.pi migrate and we've done this lots of times before watch the earlier videos if you don't know what i'm doing here so okay we're good to go so now if we clear let's run our server so let's go python manage.pi run server all right and let's head back over to the website here and let me log out and log in as admin so now if we go to venues and add a venue you'll notice there's still no field here to actually upload an image so we have to do that next but sort of interestingly enough if we go to localhost 8000 admin and go to our venues section here and click on one of these you notice there is a venue image field with a little thing that allows us to add an image from the admin panel so at least we know the migration worked and things are sort of set up and ready to go but now we need to fix this page here in order to be able to upload images so let's do that head back over to our code and there's a couple of things we're going to need to do first we need to go over to our events templates events ad venue page and this is the actual form right here and we're using a django form here so we don't see the actual form but this form action and method post we need to add something else here too we need to add an encryption type so enc type set that equal to and this is going to be multi-part forward slash form dash data so a multi-part form data just means basically allow images right so okay we need that so let's go ahead and save that now we need to go to our forms.pi file here it is and let's come down here to our venue form there it is and we need to add the field that we just created the migration form and what was that called again venue underscore image so we could just copy this boom pop that back in that looks good now we can come down here and for a label we can you know add that in there we don't want a label for it so okay that looks good and then down here for widgets we're going to leave this alone we don't really want to define a widget for this and do the classes we're just going to take the default thing for now we might play around with this later so okay that looks good and let's head back over to the website and see what that did boom now we have this thing so if we go over to our views.pi file i'm going to search for add underscore venue and this is our add venue function you'll see here's our form and this is the thing we're submitting from the website request.post well we're also now dealing with files image files right so in addition to request.post we also need to deal with request dot files right so that's really all we need to do there so let's go ahead and save this head back over to the website give this one more try so let's go to venues add venue and uh vegas pool two one two three pool street eight nine one three seven phone number one on one two two two three three three three pool dot com n a at n a dot com whatever and now let's try and add a picture there it is click submit all right that looks good we come back here hit reload we see vegas pool 2 now when we click here we see sure enough aha we've got this pool image we can click on it this is the pool so all right okay so that looks good but if we come back here to venues and all venues and go to last here and click on vegas pool 2 oh still no image because we need to now edit this page to allow for images so let's head back over to our code super easy and see what do we need we want templates events and probably show venue yep there it is show venue and we can come down here to the bottom and underneath here i'm going to put a line break and let's create an if statement because you remember if venue dot venue underscore image not all venues will have an image so we don't want to put an image on everything it'll just show a broken link right so let's test to make sure that it has an image and that's just going to be venue dot venue image and let's go ahead and enter if so now inside of here let's look and see what this is so let's go venue dot venue underscore image you'll remember we're not saving the image to the database and this is what this is this is a database field right here we're saving the location of the image to the database so that's very different let's go ahead and save this head back over here hit refresh and you'll see images slash pool and then the name of the file that's been created so that's cool but we really want the url the exact url so we can go dot url here same thing come back here hit reload now we get a forward slash uh you know we're on localhost so we get a forward slash if you uploaded this to an actual web server you'd have probably a or an absolute path here but okay that's all we need now we can create an image tag for this thing so image tag is just img src this is pure html and that's it so if we go ahead and save this head back over here hit refresh boom we've got this image and that's a big one so we can play around with this we can make it smaller if we want bigger whatever we want let's go with equals i don't know 500 or so just to make it a little smaller just for fun and there we go so that's all there is to it so that's all there is to it there was a lot of steps there but uh you know a couple of configuration things in our settings.pi file we added a quick url modified our form for encoding multi-part form data tweaked the form itself migrated the database yeah that was a lot we threw that we flew through that kind of quickly but uh yeah there we go so this is just one thing venues obviously you could do the same thing for events you could do the same thing for profiles you do the same thing anytime you want to add images to your app you could do it this way maybe in django4 there's a better way to do it with the new path system that they introduced in django3 i'll look into it but for now this works just fine even with django 4 or django 3 or django 2 so i i suggest doing it this way at least for now and uh yeah that's all there is to it so that's all for this video if you like to be sure to smash like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out cody.com you can use coupon code youtube1 to get 30 off memberships your page is 49 to access all my courses over 47 courses hundreds of videos in the pds of all my best-selling coding books join over 150 000 students learning to code just like you my name is john elder from coding.com and i'll see in the next video

Channel: Codemy.com

Views: 75,020

Keywords: django image upload and display, django image upload, django image upload form, django image upload not working, python django image upload, django admin upload image, codemy.com, john elder, john elder django, john elder django tutorial, john elder django tutorial #38, django tutorial, django tutorial #38, codemy django, django wednesdays, django wednesdays #38, john elder django wednesdays, django images in templates, django tutorial python

Id: O5YkEFLXcRg

Length: 14min 46sec (886 seconds)

Published: Wed Dec 15 2021