Draft Image Field with airSlate SignNow

Decline image field

so this one we're going to be implementing file filled uploading so that is we're going to use a file filled and then we're going to convert it into an image field so you on your Django models can actually upload images into that media stuff that we've already seen before and then we can use those inside of our posts so initially we're going to use that file field and then we're going to transition it into image field so to do this we're going to jump into our models so in models py we are going to add a new line in here and we're going to call it image and it's going to be models dot file field and I'm just going to allow it to be empty so no equals to true and blank equals to true because we don't have a default value for these images and also the post doesn't necessarily need to have an image to be a post so we're going to leave it as that I'm going to save this and we'll do Python manage that py make migrations so whenever you make changes as you may remember whenever you make changes to your models you have to run Python manage py make migrations and Python messed up py migrate so let's make sure we're in the root of the Django project before we do that and then we'll do Python minishka py migrate notice it says change meta meta options and that just has to do with this ordering here it is included in the migrations just as a version history but as you've seen it doesn't actually affect on how that works so let's go ahead and migrate it and now we have this image field here so I'm going to run the server and we're going to jump into our admin first and we'll do it here so inside the very first one I'm going to say image here this is what I'll actually end up using and I'm going to use a Tesla Model S as the image so go to images and just going to save one of these images so we'll save it on the desktop just as an image that we can use and I'll just call it car and we'll close that out and now we'll go into image here and do car ok so I select that hit save and continue' notice it as car ok so if I click on this open into a new tab you can say page not found right because it's saying change but if I went to well we'll have to actually look at the URL and I'll do it in a little bit not quite yet but car is essentially where it's going to be now what we did with our settings stuff is we actually set up our URLs to work with our settings so if we go back into our URLs our main configuration URLs we're going to add one more line in here and that's for the static media so excuse me the media URL and the media route so inside of our settings we want to make sure we have both of those things we have media root but we do not have media URL so we'll add that in there too and it's going to be slash media and then also it let's look at our media root in media CDN notice it says car the image was actually uploaded into our CDN as expected so we'll save that and we can refresh in here and what we should see now is if I open this in side up here and now opens to the correct link and it's now serving that media image and again this is going to work exactly like static so now that we've got this image I can actually display this image but before I go any further I do want to go into post create and I want to be able to actually upload the image here right it would make sense that I would have something to upload in the forum itself not on the admin so in forms up pie we are going to add in image save that and refresh now we've got this image file if I wanted to change the order just like how the admin habit I could do that that's not a problem so I'm just going to leave it at the bottom though and now that I've got this I need to do a few things to the form itself so we'll go into post form and inside of the form we have to add in something called ink type and it's going to be multi-part slash form - data this is something you have to do when you're using data and since we have something for type make sure we spell it correctly ink type there we go since we have this multi-part form data there's a thing that we have to do in our view and that is when we actually get the data we're going to come in here and do request data data or none excuse me request files or none and we're going to do that same thing when we update it it's so much a request post but basically if there is file data is there actually data coming through that form we have to call that as well inside of this form data otherwise it's not going to work and right before the instance I'm going to put it there as well cool okay so now that we've got that let's try it out on our form itself and I'll say Tesla Tesla go to image go to the desktop car and hit create post and if I go into the admin posts Tesla is the last one we click on here we see that we have that image coming through and notice it actually auto-generated a new image name for it too which is pretty nice for us so if we go into post or CB into media CDN we see that we have that Auto generated which is cool so there's that now let's go ahead and actually just display it on both our post detail itself as well as the post list so at the very top I'm going to just put in here and do image source equals to and it's going to be instance image dot URL and I'll give it a class of image responsive image responsive or IMG responsive okay so let's go back into our posts look at that one and there we go so we've got our image here that's pretty cool actually looks kind of nice and each image if it's bigger than the width of this it's going to be cut right into that just like that and we'll do this same thing with our post list and the thumbnail this time so we had that thumbnail class I'm going to put it in here we don't have to change anything like this is what we commented out so we'll change it back go into posts and make sure you save it as obj this time dot image that URL and it says image has no file associated to it so what we have to do is actually add if object image and we're going to do that same thing in our detail if there is no image then we don't want it to say anything so if instance that image and if say those refresh in here and now we have some images showing up cool so it's definitely starting to look a little bit better as far as the content is concerned so there is I did we did stall install that Python image library for reason because we've been using a file feel that we have not been using an image field so let's actually take a look at the Jing of image field inside of the Django documentation by doing a quick Google search and model field reference and then image field do a quick little search inside of the page so command command F to do that and down here we have a few attributes for this image field and it relies on the Python image library otherwise it will not work so let's go ahead and change this to image field and I'm going to add a height field Eagles two models dot integer field and we'll say default equals to zero and we will also put a width field in here and then we can add these attributes as additional attributes to the image field itself you'll see what this does in a second so patience alright so now we've got that and we can also have our max length foot and I can't worry about that so there we go so now we've got this image field let's run the migrations again so python is py make migrations and it same pillow pillow is not working so pip install pillow alright so pillow is what it's relying on so the python image library is what pillow does so now that we've installed it we can now do this and it adds these fields for us so we'll do Python managed uh py and migrate and we'll run the server again alright so we'll go back into our posts I'm going to go into this first one and just hit edit I'm going to change the image that it is change it so I'm actually changing it but I'm going to put upload a new one so I'll say call the title Tesla to hit create post it seemed to have created a new one it says it was saved successfully which is good if we go into the admin now and go into posts Tesla - we now see that gives us the height and width of this image so there's a lot more things that we could do with these images that we're just not going to cover but digital marketplace does cover how to make like thumbnails and stuff like that from here and auto generate all sorts of things so that's pretty cool but now that we've got this image field and it's starting tags come together very nicely for us except there's one thing that I do want to change and that is where these images are actually uploaded to so this upload location has relative to the media uploads and we'll see what that means right now so I'm going to define a function called upload underscore location right above the model and it's going to take an instance or obj and then the file name and all I'm going to do here is return a string a relative string of where it's going to be going so there's going to be instance ID and file name so this upload location is going to change how it uploads side of the media CDN so then in our image field we would just do upload to and we set it to that function itself and this will now every time it uploads a new image it's going to go based off of this upload location here of course you could hard-code it as well as like images like that there's nothing wrong with this but this is a little bit more dynamic and it would be something that you might use if there was a user or you did some other things so if you had an instance user you could put it in their folder so there's that and this also works for that file field that we already did so that's the last thing that we're going to do here and let's go ahead and and try it out just kind of edit this post again we're going to come in here car upload post go back into that edit and now we see it says 27 slash car and if we see in here it also says 27 so it's going based off of the actual post itself now so off of the post ID and that also means that it's not going to by default change the image name another nice thing about this is you can actually change the file name in here so what I'll do now is I'll just say file name or file base and extension equals to file name that's split here now this is not the greatest thing ever here but at the very least we could do something like this where we said instance dot ID and then you would basically have the instance ID be in the name of the file instead of the original file name so let's just show you what I mean create that post come back in here refresh and now it just changes that this this right here is not the greatest because if for some reason the image itself had other periods in there it would it would definitely break this so I'm not going to actually leave it like this I'll leave it as a comment and just put the original that we had in there first because that's more likely what you'll end up doing so auto-generating that type of stuff is definitely something you can consider doing if you really need it most of the time you probably won't all right so there's that's it for actually adding images and there's a few steps so remember let's just recap the steps themselves so for the model the image field or the final field if you use the image field you have to use pip install pillow so use the python image library and then once you actually put that image field in there you can change the upload location by using a function itself if it's a file field you can't use the height and width fields that does just doesn't exist on a file field that's specifically for image field and the Python image library is what sets those other fields for you once you upload it and then once you add this to the model you have to make sure that your form the HTML form has the ink type once it has the ink type then you want to make sure that your view actually requests the files or nothing so request files or none is similar to request post or none if it's not coming through it's not going to ask for it if it is coming through it to ask for it and that's pretty much it so those few steps if you have any questions on file uploads let us know otherwise let's keep going