How to add Dropzone.js to Django project

hi this is bobby from dig coding and today i'm going to show you how to use drop zone js in a django project [Music] so this is the project this is on github i'll put the link in the description i have already created an account and i've also created a super user so i can just walk you through this and this app if you've seen previous videos you will notice that they all look very very similar they're all based on a user auth application that we've got on github all i'm doing with each of these tutorials is i'm adding different javascript libraries or i'm adding apis in previous videos we've added braintree to take online payments we've added stripe also to take online payments we've added google places api and we have added twilio for two-step verification this app does have google places api for adding if you look in profile to the left here you can add an address and it pre-populates so it uses google places api to predict an address that you're you're typing which is good which is great but we've also got add images and we've got gallery so if we add images this drop zone is programmatically added using javascript uh you can if you go into drop zone as website it's got some instructions on how to just slot in a drop zone from their box which is great but i've programmatically added it because i wanted some extra features and i'll go through that js file in this tutorial but if you click it it'll open up your directories to select a file or an image in this case the image cannot be more than 500 kb in this tutorial but you can change that and we can add up to 10 images in this drop zone so if i open the directory this i'm using images of myself i'll just drag one in there add image perfect now visit your gallery i'll remove that alert actually we don't need it click ok click in gallery and then we've got a gallery here so as you drag them in it doesn't automatically add them to the gallery you need to explicitly submit them which is an option in drop zone you can turn it off or on or true or false but that is the project like i say it's on github the description sorry the link is in the description so let's jump into the code this is github this is the project it's did django drop zone what you need to do is you need uh to set up a directory and a virtual environment on your machine you need to clone this repository and then install all of the requirements you've got the normal requirements as previous uh applications but or previous projects but in this case we needed pillow so to handle the images so get that all sorted on your machine and then we'll go through this um this tutorial so what have we got installed we need to go to settings.p1 we need to add some email backend settings and the google api so here's settings this is the project but if you're going to settings here we've imported os because we're using static files and media files the user app is in installed apps no other changes to previous projects other than at the bottom here so we've got static files dars we always have static in these projects because we're handling logos and css and javascript but in this case we've got media files because we're handling images against user profiles so you need this in a static dir so it's os.path.join based directory media and then you have you need to explicitly say a media url which in this case is slash media and then we need a media room which is the same as static free apart from it says media cdn and then we've got the normal login url logout redirects and whatnot and then we've got an email backend we're using google as i always do but you can use any back end but configure it correctly and google api key sorry this here is a google app password i've got a video showing you how to get one very easy uh you will need a app password if you're using outlook and this is the google api key for the address auto populate so you'll need them for this project but if you tweak it you can remove the google api key if you like but our settings if you're going to url so the main directory url we've included the user's urls which is the user app so we've brought in from conf of djangoconf the settings and the static libraries and we've added them here to the url pattern so static is added or the static url is added to the url patterns in debug mode and so is the media url so that is what we've done there static you can see here we've got dropzone.js and we've also got dropzone uh the directory here i've downloaded that straight from their website so we go here dropzone.js dropzonejs.com great docs it walks you through step by step which is great but in installation here you just need to click here um simple example source and you click that you download the files you add them to static happy days that's all you need to do back in here then so that's the static the user model so let's start with models.py user profile no different we have imported pill so if you noticed in requirements it says um pillow so we need pillow to handle the images in this case the user profile hasn't changed so the user model we fire up the user model from using signals which i've talked about before but user token that handles the email verification and password when you've forgotten a password and we've got user image so there we've got a foreign key which links it to the django user model and we've got an image field here which we call user image and we upload it to user images and because we've set up the media url and the url patterns in the directory url dot py it sets up when you add an image to a user profile it creates media crn and it creates a directory called user images user images user images so that's how that works so if we look at signals quickly um we're importing the user model from the built-in django user models authentication model we're bringing in receiver and we're bringing in user profile from our models now we use the receiver decorator post save which is from signals and the sender is user so is the built-in user model we're sending a signal to this file here and the signal is done the the function is called create profile so we've got sender the instance created and keyword arguments so if a user is created then we create a user profile so that's how we do that we register that signal here in apps dot py so here the class user configs which this is written as you create an app in a project this comes straight out of the box but we have to add this here so the function ready and we import user.signals so that's how we get the signals to work if you're new to using signals you may forget to do that i did that a few times and it takes a little while to figure out what's happening so urls we've added images we've had a gallery and we've added this one here called drop zone image now that is handed in an ajax call from drop zone which we'll look at now let's go into views i won't look into look at sign up if you want to look at sign up sign in sign out what else we got we've got verification forgotten password there's a few views if you want to deep dive into those i've got other videos on my channel which goes into great depth and what they do and how they work we don't need to do it in this tutorial you're trying to find out how to use drop zone right so profile then we've got images this is a very very basic view it has got the login required decorator on the view so only authenticated users can get there that is the view where we've got the drop zone itself so we're looking at the images.html file gallery same decorator but in this case what we're doing we're pulling in the all objects in user image the model user image and we're filtering the user against the request.user so this is the authenticated user in gallery so it's a gallery.html and lastly we've got this here which is drop zone image so this is just a view that handles the creation of user image objects so we're getting a user from a quest.user so this is request.method equals it post get the user from the request itself so we'll pass a request into the function the image is request.files.get and the keyword is image now we explicitly call it image in the js file next image equals user image objects create so we're creating an image we're passing through the image from the request and we're passing in user from request.user and we create that object that's all it's doing and it's responding with a http response back to the javascript and that's what we're doing that's all we're doing in the back end so let's look at the front end so that's the javascript main.js look at my previous uh videos if you want to deep dive in that there's a few there a lot of ajax calls because we're using ajax with django forms which is quite handy uh but the one you want to look at is dropzone.js you can see here we've got directory drop zone that is what we downloaded from dropzone's website but the dropzone.js so this is how i'm programmatically adding that drop zone to the html so we're creating a variable where so drop is the variable and we're just firing up a new drop zone and we're looking for the id drop no sorry did drop zone so if we look in images html that's it here so it's a form if i just there we go so the form id is did drop zone so this new drop zone that we're creating is from that id so straight out of the box the the default functionality is as you drag images to the drop zone it then fires that image straight to the back end that's how it works straight out of the box so you need to add auto process cue to stop that behavior which i like to do i like to explicitly press the submit button to send them images to the gallery you don't have to do that though but that's what i've done in this case the power name is image if you remember in the views dot py when we when we're pulling uh request.files.get and we're calling it image well that is because we're calling an image here the file size 0.5 megabytes clickable true so if you click the drop zone it opens up your directories accepted files i believe in there you can actually just put images but i've said i just want jpegs and png files the maximum files in this drop zone is 10. i don't know what the maximum is on drop zone you'll have to look at the docs but i've said 10 you can probably have 100 for all i know but um i think 10's a good number and the preview template so this is the html that is so this is the html that drives that drop zone that you see in there when it's rendered out and then what we've got is an init function and we've got a success function so in the unit function we're looking for um the query selector we're looking for a button in this case the id is image button so we look here yeah id image button so that's the button that sits at the bottom the purple button that sits at the bottom of the drop zone that's this here dropzone.js here we go right so um the url that is the action in the form on the html so action forward slash drop zone image so if you remember that's the um the view that i was just talking about my drop zone equals this so it's this drop zone and we now refer to this drop zone as my drop zone in these um three um functions that we've got here so submit event listener so when we click the button what we then do is we process that queue so if you remember up here we we said do not process the queue well now we're saying when we click the button process it so that's us explicitly saying send those images to the back end and create objects please we've then got on processing so as when we're processing those images we're sending them to the url which is explicitly written in the form so images form we've got accepted yeah so sorry that's the action so it's drop zone image and we've got drop zone.js again so then we've got complete so when that image is when it's been completed so when it's gone to the back end and he's got the response remove the file from the drop zone that's all there is to it on the success i did when i showed you the the um the example of the app a minute ago it did come up with that alerts because i haven't closed down this browser and opened up another one but you don't need that because if you have that in there it adds the alert every time one image goes to the back end so you'll have if you added 10 images you'd have 10 alerts so we don't want that so i've removed that but that's it that's the back end so that's the front and that's the javascript that's all you need to do to add a j drop zone js to a django project i hope this video has been useful and i hope also that you can just take this project and slot it in to whatever you're working on i'm bobby this is decoding please subscribe and please like it's massively helpful and i'll see you in the next video thank [Music] you you

Channel: Did Coding

Views: 3,189

Keywords: #Python #Django #Development #Tutorial #Didcoding

Id: OqvQMwUSKQM

Length: 14min 31sec (871 seconds)

Published: Mon Apr 05 2021