Django and dropzone js | Upload multiple files on drag and drop using Django and JavaScript

hi guys in this video we are going to use dropzone.js to provide a cool solution for uploading our files so let's take a look at exactly what we are going to build i'm going to select one picture and i already uploaded it to our django database and let me do do it one more time and there we have it so right now we have two pictures uploaded if i try to upload it one more time we will have an error you cannot upload any more files because we set the max file upload to two pictures if we decide to upload a pdf file we will also have an error because this extension isn't allowed if we do a png we will have the same situation because we didn't allow png files to be uploaded all right guys so without further ado let's get started all right guys so let's take a look at what have i done so far so i started a brand new project called dc approach and over here if we scroll just a little bit down we will see in the installed apps list that we have additional position we have the docs so i started a docs application and i included it in the installed apps list then if we scroll down we have templates and in the directories we have some settings i told django where to look for additional templates and according to the settings over here i created a templates folder inside the src folder and in the templates directory i placed base html moving all the way down we have some settings for the static and media files the static and media folder will be kept next to our main project folder next to our templates folder and so on so it will be all state both of these folders will be kept in the src directory all right so in the urls py i just included those settings for the static and media files in the url patterns and if we jump to the models py of our docs application here we have a very simple class with only one field upload and this is a image field with the upload to images so inside the media folder we will have another one called images and over there we will keep all the images that we simply upload and then as the string representation we just return the primary key i also registered this class in the admin so we will be actually able to see it we will be able to see the progress of the objects that we are going to create and then we have an empty main.js and an empty style css and we will be doing some work over here shortly and we have a base html and this code is borrowed from the star rating project with django with javascript star rating project which is available on github so i'm leaving the link in the description you can just simply copy it and download it over here what we can change is the title so let's have it as maybe drag and drop okay and i'm going to save this and now i'm going to proceed and head over to the views py file of our docs application over here we will begin by doing uh imports so from django views generic we just want to import a template view and we can use it right away so we are going to create a class maybe let's call it main view and it will inherit from template view and the template name let's let's just call it um yeah main html main html so let's actually go to the docs create the templates directory inside the templates directory let's place the docs directory and over here let's place inside of the docs this main html so right now what we need to do is to inherit from base html and then let's put in the blog title and the blog content here i'm just going to put in upload now and for the block content well let's just leave it empty for now or let's just put in hello world and i'm going to save this i'm going to also save the views py file and we are going to bring this main view directly into our project folder so let's head over to the main urls py file and over here let's do an import from docs views we want to import the main view and let's put in path and over here this is going to be the main path so let's keep it empty and here main view as view and the name let's set it as main view okay so let's go back to our docs folder actually let's go maybe let's go to base html because we need to do some stuff over there and let's prepare a section for the drop zone so i'm just going to put it below the custom css and js and drop zone js and css and we need to get the proper files so let's go to dropzone.js um we need to scroll down to the installation and here we have download the standalone dropzone.js and i recommend you download this file and simply put those this dropzone.js file as well as drop some css inside the static folder and just link it up just the way we did over here but i'm going to do it a little bit easier to save some time i'm just going to grab it from over here so i'm just going to copy those links and place them over here all right so i just pressed let's make this a little bit bigger i just press and the source of the simple example okay and then if we move uh down let's take a look at this particular part i'm going to copy it and i'm going to head over to our main html and over here let's actually see if everything is working so i'm just going to open this link do we have hello world no we don't we actually forgot about the static so let's go to base html and at the top let's load load static okay i'm going to save this hit refresh and there we have hello world so right now i can go back to main html get rid of this hello world and place in this code from dropzone.js i'm going to save this hit refresh and here is our very basic dropzone so right now if i try to put something we see some error as you can see and this is because we don't have our back end linked up so it's looking nice but it doesn't work just yet so i'm going to restart it and we actually want to do a few things over here not only to make this work but we also want to style this a little bit better and we want to add some limitations for example we would only want specific file extensions to be allowed and for example we only want to allow two or three files to be uploaded at once so i'm going to jump to our style css and begin from here first of all i'm going to change the body background color so let's change it to maybe um f 8 f 8 f 8 so it will be just a little bit grayish and then i'm going to add a class d set as drop zone and over here we will have a border which will be dashed and i'm going to set it as important and we also would love to have a border collar that is going to be a little bit darker gray than this one so i'm just going to put in ccc and also let's put in border radius and over here i'm just going to put in 10 pixels okay and let's also have a hover effect and here i'm just going to change the background color to maybe alice blue and everywhere i'm going to put in important important important okay so right now we need to what we need to do is to go back to our main html and we need to apply this dset class and form class so next to the drop zone we will have the d set okay i'm going to save this and let's press refresh and there it is so this is looking in my opinion much better so let's go back and let's also provide some additional information so here we will not have file upload we will have maybe simply upload like this upload and let's specify the method equal to post and since this is a post method so let's also put in a csrf token and i'm going to indent this and i'm going to save this and return to the views py where we are going to create another view for handling saving our files in the database so i'm going to put in a function view this time and this is going to be maybe a file upload view and this will take in a request and maybe first of all let's just print request files and let's import from django http http response so here i'm just going to return http response and i'm going to put in upload so as the next step i'm going to register this view so let's jump all the way back to our main project folder to the urls py and i'm going to import it and let's put in this path upload that we did set and file upload view and the name will be upload view okay so right now i'm going to save it again and let's try this out so again in the main html we have the action upload we have a method post we have a csrf token here we have an input name file and let's see if this will work okay so i have a terminal open over here i'm going to move this file a little bit like this and here we have not found file upload and let's just hit refresh let's try it again and there it is so we have our multi-value dict and as the file in memory uploaded file okay so this means that we are one step closer to finishing our project as the next step i'm going to head back to the views and i'm going to comment this out and then i'm going to do a check if request method is equal to post in that case i want to create a variable called my file and this is going to be request files get and we want to get the file that we saw in the terminal and then we want to create our object our doc object so we need our doc model from dot models we want to import doc and over here i'm just going to put in doc objects create and we want to set the upload as my file and then maybe let's over here return and http responds a blank http response and if this is not the case let's return a json response so let's put in return json response and we need to import it json response and i'm just going to put in post and false okay so i'm going to save this and right now if i go to upload we have post false but then if i let me just maybe log into the admin very quickly let's take a look at our docs right now we haven't any objects we don't have any objects and then if i drag and drop this we have some issues all right guys so actually the problem was that i didn't reload the page and to prove to you that this was the issue i'm going to hit refresh and there it is so here is our uploaded image so i'm going to reload the page one more time and i'm going to upload the same image so you can see how this is working and as you can see we have a confirmation that this particular file has been uploaded and then if we go back and go to the docs here we have the second position all right so um this is working and we can upload many full many files okay many pictures and right now let's do some limitations because we can even upload a pdf and if we go to the docs open the fifth position here we have our sample pdf okay so right now as mentioned before let's try to apply some modifications and in order to do that we have to go back to our visual studio code and open up main js so over here what i'm going to do is to write down drop zone drop zone auto disk cover and i'm going to set it to false if we don't do this we will have some errors like drop zone already attached we don't want this so let's put in drop zone auto discover equal to false and then i'm going to create a const called my drop zone drop zone and this is going to be a new drop zone and over here we have to set an id so let's go to our main html and we don't have any id right now so i'm just going to put an id my drop zone drop zone and i'm going to grab this id copy it save the main html go back to main js and over here let's open up the quotation marks hash my drop zone comma and let's open up curly braces so here actually we can provide a url so i'm going to put in this upload and after the comma in the new line i'm going to put in max files and i'm going to set it to two and i'm going to put in max file file um max file size like this and i'm also going to set it to two so this is two megabytes and i'm going to also put in accepted files and here i'm going to specify png and jpg okay or maybe just jpg let's do it for now only jpg so yeah let's see if this will work so i'm going to save this and i'm going to refresh so let's try to upload the wings because this is a png file and as you can see you can't upload files of this type let's try to upload [Music] sample pdf and we have the same issue if we change max files to one hit save refresh and drag and drop both files the first one will be accepted the other one will have error you cannot upload any more files but then if we change this back to 2 save this refresh try it one more time as you can see there are no no problems so if i hit refresh over here actually if i go to the docs and as you can see here we have eight objects right now so let's just have a confirmation that this is working i'm going to grab one more time this image and right now we should have nine objects and there it is all right guys so i think this is it if you enjoy this tutorial if you like my content please consider subscribing to the channel we are almost at 5 000 subscribers i can't thank you enough for for this um when i started my youtube channel i was hoping to someday achieve 1 000 subscribers uh today it's almost five five thousand thank you so much i will continue providing uh content that hopefully you will enjoy and yeah see you in the next one so i think the next video will be about um the social network project part 18 with authentication and then and then the the next one after the social network project part 18 will be the real uh crypto application fifth part and the final part so yeah one more time thank you have a great day and bye bye

Channel: Pyplane

Views: 36,680

Keywords: django and dropzone js, django dropzone, django dropzone js, drag and drop django, django with javascript, multiple file upload js, multiple file upload django, js drag and drop tutorial, drag and drop javascript, dropzone js django, dropzone js example, upload files django, modern django, django with js, django tutorial 2020, cool django project, django javascript project, django javascript files, django project with javascript, Drag and drop javascript html

Id: jUtCtlCRAT4

Length: 22min 31sec (1351 seconds)

Published: Fri Oct 16 2020