Upload File using AJAX in Django || How to

hi guys welcome back to how to i am shubham and sorry for all the delays in the video but i'll try to be consistent from now onwards i have a request to make you all please like this video subscribe this channel as it is free and also commit in order to help us get some engagement direction from youtube so in this video i'll be showing you how to upload any image or file using ajax and save it on the storage of the django as in uh the storage disk using gengar so here as we can see a file has been uploaded and we get success response and this is my uh link to that file so what we'll do we'll start by creating uh okay so here is my folder i've already created my virtual environment and i have activated it and installed it django to show you all here is the list of all the installed packages in the directory now what i'll do is i'll start by creating the project then go admin start project uh i'll call it as ajax file uploader upload we'll go into that folder [Music] upload okay so now we have an a project called ajax file upload an app called file upload so let's connect them together in order to do that bring up my vs code open folder here we go so first we'll move to settings stop by and we'll install our newly created app that is file upload we need to do some configurations before we can start with the actual work so the configurations are we are going to import os let me bring this to the top and then we are going to create few directories templates directory will be so i'll create a folder called as templates over here which is this which will be connected to this and we are going to install this template directory in into your templates directories we are also going to specify media urls so how to specify that i'll do media underscore url will be the media now why i do this is because i want to store all the uploaded files over here in this directory and also specify media root this will also take path dot drawing base directory comma media so this is done now now we can get started we'll start by creating the model first and it will be class file [Music] file file field and it will have one parameter which is upload tool which will go to media so all the documents uploaded on this on in this model will be uploaded to media directory so our model has been created now we will go to view and we'll create some views first we'll create the index which will load our html page will create the html page soon and this will return index.html and the request will be the request so let's quickly create our index.html inside templates.com so index.html i'll start by this and i'll show you all the main thing and i'll do the cosmetics later i'll start by creating i'll import the bootstrap so here we go what's apple called this hashtag [Music] column 4 and we have a label over here called upload file will have a input which will be a type file and it will have id called file and will have a button called submit form so if we have a look at it right now let me run this first yes i don't have my migration supplier here we go since i have not created the url it will take me to the default one so let's go to url stop by will import from uh our app is called file upload i want to import the views and i'll create a blank path so whenever it comes here it will go to view start index so here we go now we'll do the uh now we'll put the ajax part so first of all let me import the jquery that is done now okay so i'll create a chase function called as function upload file with zero parameters it will have a [Music] hx call for do that as x it will have method which is type post since i want post url and create a new url for this so this will be called as upload then we have some things that are actually required while sending the file onto the backend so we have to that process data will be false then content type will be also false then mime type will be multipart multipart slash form data since we are going to send the file as append as inform and then data will be and create this data later and once we get success which is also a function [Music] success will have something response so and i'll just log this control lock so now we want to append now we want to submit the file while doing the ajax call so that will be by using form so i'll create a variable called where data which is a new form data then we are going to append something called as new i'll call it as file which will be just take note of this oh sorry i'll increase the font size so this will be since its input whose id is id is equal to file now to select the input whose id is equal to file and it will consist of it is list so i'll select the zeroth one and from that since its file types will select the files zero so this will have mean that and also when we are doing this we need uh to pass the csrf so instead of exempting the csrf we are going to append it that will be in and we will use the csrf underscore token so our hx function is ready now let me do some cosmetic changes so after the cosmetic changes it looks something like this and only one small thing that is left we have to be done is on button click we want to call this function so that we will do the hx post code so here we go one click call this upload file function that's it on the front and side now we'll go to the backend side so that we can create the definition create the function so that we can upload the file here we go we'll call it as upload file this will take in the request you will get the file from the request so request.files.cat since i have called it as file so it will be filed now we are going to import some things we are going to first of all import the file storage system then we are going to import the json response and then we are going to import the file model so we'll start by creating our file system file storage system and call it here addresses now in this will create the file name first preface dot save url and it will take the parameter of file name [Music] so that's it the file has been uploaded now it will upload with the help of this code now we want to save that on to this model so we'll copy this file model dot will create an object of it create and the parameter will be the parameter this file that is talk doc will be equal to this newly created url and what we are going to return is return json response which has link my head link of the uploaded file now that we have created this we are going to create the url for it so we are going to call it as upload which will be new start upload file name [Music] upload file name so this is the function function name and why we are calling it is upload because we are using the same over here now the coding part is done by the way y'all can check this code on my github repo the link will be in the description so now we have to apply the migrations for the typhoon manage first of all we are going to create the migrations by the command make migrations this is done now we will apply the migrations by the command migrate and and also will run the server and check it out if it is working or not i'm not created any system while coding this i did two mistakes one is in the url start by after the path of upload we need to put a slash so you can do that and in the ajax under the function we need to separate this comma so these are the two changes that have been done and also will register the newly created admin side sorry newly created model on the admin side so for that we are going to import so from dot [Music] after that stop this will create uh super user python management create [Music] i'm going to create admin since i already have created admin so i'll create adam into i'll keep this blank yes and now and run the software and if you go over here select any file and inspect before that click on on submit oh we got a refresh and you can see the file has been we get a success response 200 and we get the link that we specified in the return statement so that means our object has also been created in the app so we will [Music] and you can see our image has been uploaded our object has been created and if we go to the project folder and media you can see our images has been uploaded so this is it for this video guys i hope you have understood how to upload any file or image using hx on the django and save it on the disk so if you have any questions do ask them in the comments and also suggest me some topics for the next video and please do subscribe to this channel because that will help me a lot thank you bye

Channel: How to

Views: 2,496

Keywords: django, ajax django, django ajax, upload file in django, django file upload, file upload, ajax file upload, django rest framework, upload django, django upload file, simple file upload, how to, mvt, django begginer, django ajax live data, image upload django, django image, django image upload, upload image in django, upload image using ajax, upload image in drf, upload file in drf, shubham jha, kira boi, django file, drf, django project, django ajax tutorial

Id: g3h1OC3S5Lo

Length: 18min 50sec (1130 seconds)

Published: Wed Apr 28 2021