Django with React - upload images

hi in this video I'm gonna show you how we can upload images using two popular frameworks jungle on a back-end and react on a front-end so first we'll start with our package so back-end will be based on the jungle with a restful api so it will serve as our api and then we'll use our front-end to a select the image and upload it to our back-end and back and we'll take care of the image save it in the server and it will be available for current model so what I have here is I have a simple jungle application so not in complicated here if you are not really sure how to set up our application like this if you go to Jango test framework tutorials slash kickstart or just go to the main page here and then tutorial QuickStart you will see a set of instructions how to set up a simple application I also have a few videos on my youtube channel so if you are not sure how to do that you can watch them as well I have a react and jungle full course on udemy at the moment is 16 hours but I will add more content into it so if you are interested in learning more about react and jungle I will leave a link in the description okay let's go back to our application so what we have here at the moment I have a simple single model book I have only one field title and this is a car field so this will hold the title for me I have one serializable for the same model so we have only title here and also I have a view which is a view set so we have query said and the serializer that we just created here also in the in the admin I register on my book so we can go to admin page and we have a books at the moment there is nothing in our database so we will start from scratch in the URLs I included rotor that I register my books and that will be included here so I can act Youth slash books to access all the URLs for that book so I can use that URL to upload my books so that's what I have if you go to the settings also use the rest framework so if you want to start the same as I have here you will also usually niche to install Django and angle rest framework also I registered my application my application is API here this is my project and this is my application so we'll do everything in from here okay so what we need to do basically we would like to store our cover for that book so we will create another field here and this field would be an image field so let's do that cover models and then image field and then we can provide a few arguments here first we can do blank true so that means we can actually this not it's not going to be required so we can leave it blank then we can do No so true also if it's provided blank then we'll store it as no next argument we'll do upload to and this is interesting part here so what we can do is we can provide a simple part here where to upload it but I will show you more elegant way how to do it with a function so what we can do is we can create our own float function so upload let's say pad we can name it whatever we like and then it will accept two things instance and file name so what we have here is we can actually return so we can build our path here and it will start from slash that means it will be a default media part here and then we can join and in join we can provide an array of things that we will have as a join for our folder structure basically we are telling Django where to upload it and it's up to us how we going to store it in our server so in what folders and how we gonna name them and basically we can use to actually find a name like this and it's pallet we can use those two to actually use it and leverage the data that is available on that on instance and filename to actually put it in the folder so what we can do is I will show you three things but it's up to you how would you like to store it basically we're building kind of folder structure here so first I will say it covers and you will see that folder structure when we actually see the first image in so what I'm saying here if we upload our image we would like to use the base media part that we'll set up in a second and then we should use folder covers inside that covers we can do instance let's say title so instance title we can actually force it to be string so instance title that will be another folders folder inside the cover so if we upload book with some title that will go here so if you have more images for one book for example you might have a cover back over and stuff like that you can actually put it all images inside covers inside that book name and that's what we are gonna do so we'll do that and the last thing we can use is file name actually you can and that's supposed to be a name like that so basically it's up to you how you would like to have it so I will take upload part here and we'll come back to this later once we will see a working example so we we can provide that function here and that cover will use that function to put it in in the specific folders okay we have that done and there's not much more complicated here it's just as simple field that is available on Django what we need to do in the settings we need to also add media so me yeah Brewed all capital OS pat join and then we do based here and then we can provide media hora can name it whatever you like and then media URL and it will be media like that that's supposed to mean media URL so we need to provide two things here first media root so what is the root folder of our media and then media URL so you can name it this as you like I named it media so it is easier to remember and basically it will just create a new folder media here so this will be our root folder for our media so if we go here that's what we are referring there so it will be everything uploaded to our server it will be media a slash covert slash name of the a book slash file name and the final will be the name actually of the file that we uploaded so I will show you how how it works in a second I have joined missing one requirement positional I think it's it's fine now we don't have that anymore so what we can do is I can do a Python three minutes by run server and the server is running here okay so we have that available now what we also need to do is we need to put that in the serializer so we are extra fuel to serializer over and then we need to do something in views okay so in the views will need to create a new method so basically we have a visit here and the basic metals are already included in the model view set so post put delete and get all them are accrued but what we will do is will actually override one for creating a book and we will like to kind of hijacked it and create our own so we over post and then self request and then we'll have art and also quarks so basically what we are doing here is we overwriting the built-in method that is built in Django will create a variable over here so it will be request data and then we will provide cover also we'll have title entitled so this is what we are expecting from the front end that it will sell a set so next thing what we will do is we'll do book objects create and we'll create our book so title it's gonna be our title that we've created just variable and then cover it will be cover from here so at the end what we can do is like actually we can return something so we can do HTTP response now we need to actually import it first so I will do from Django HTP import HTTP response so that HTTP response can return two things first which will be our object let's say we can provide our message and that message will be book creators so another argument I can do status 200 which is everything is OK of course you will need to do some validation here check it if you have that in the request data and so on and do try except if you have a if you created that model or not but I will try to simplify everything to a bare minimum so basically we're not - error handling here anyway we created their their book and then we have our HTTP response for for that and it's a book created and we hope that both title and cover will be safe in one go okay so we have that already available in the jungle so everything is a kind of ready for us to jump into the front-end framework okay so let's move to our front-end application now and we'll go to visual studio code here and what I have here is I have a very basic application that I have created with npx create a reactor application I just remove in the app G as the the template that comes with a create react up and replace it with just one heading here so if we go to our front-end here we have just a heading here so upload image with react and we will build a kind of form that will allow us to upload images here along with some extra fields like title okay let's do that now so we go here and first things what we need to do is we need to create a few fields that will the user will be able to type in and we'll transfer that data to our Django application on a back-end so first I will create a label and that's going to be title and then we can have an input of type text and we'll close it here and then I can duplicate this and I can have a color and that's going to be type file or separated about by a break here and I will have another one here and then we can have a button here and the button will create new look like this so we have a kind of template down here so we have a title we have a file selection and then we have a button here so at the moment they don't do anything so what we need to do is we need to pre prepare our component for that functionality in so first what we need to do this is functional component here so what I would like to do is I would like to store both title and the cover in the stage so in the functional component we can a use state but we need to import the function fair so use stage that react hooks so we have you stage and then we'll create two variables so first will be title will store the title and then we'll have another one a method set title so this will be the method to actually change our title and then we can use our hook which is use state so what we have here is we have local variable and a method to change that variable and we'll use EU state this is functional component so that's a hooks and the newest addition to react okay we have that so what I can do is I can duplicate this and I can have another one for cover and then we will have method set cover okay here we can put on a default value of empty string so that I will be here what we can do is we can actually hope that value into our inputs so I can do value and then inside I can say that's our title and then what I can do is I can do unchanged so whatever we change this then I can trigger on our arrow function which is our event and so our function here and then we'll set title use that method here and then what we want to pass is that event that is passed from here on when we change the value event that target that value so what we have here I'll put it on a separate line and I can collapse this so what we have here is we have an input that the default that well the input will get the value from our state which is the the local variable here we have title and then whatever we change it will have an event listener and that event will transfer the new value and we'll set title with that even target value so basically we will hold whatever it's on that input field will store it in the title so if I will save it now I can come back here and whatever I type in here it's we don't have an error so that means it's good so basically whatever it's here it is stored in our state we have some my problem which they a cover but we haven't owned the cover yet so let's go back here and what we can do in the cover is we can do similar things so we had unchanged here so what I can do is I can use the same kind of unchanged here we will have event and instead of subtitle what we do is we'll have set cover so we'll set cover but this one it's not going to be even targeted value because this is the type file so this could be a multi file selector so basically what we have an even target is we have a list of files so if you select more than one it will be all in files but we don't want to enable the multi-part here will have only one so what I can do is it's still available in the files but what I can do is I can access the first one so first one from the list is zero index so even target files so whatever we have set of five on this input will grab the first one and we'll send it to set cover which our hook that is here and then it will be available in our cover at the moment we don't use it in the cover here so what we need to do is we need to have another one on click here so we'll create another method and then we can do new book we also need to trigger an arrow function here and then so our function it will create a new book and then we need to create that method here so I will create a constant new book and I will create an arrow function here and that's going to be our mettle so we don't have any errors here and what we can do is we can console.log let's control lock title for now and see if that's what that works ok so we are here I will type in something here I will click new book and we have that available so that I do is a rare available and cover will be available in the second it's what we need to do now is we need to send that data into our application and we have found numerous options how we can do that but I will show you the one that doesn't require any third-party a library or any plugins and we'll use the built-in methods that I fetch so we can do fetch here and then we can actually attach our response so what we need to do is when we go here that's our URL so I will copy that and then what we can do is that's over you URL and we'll send it to books and the slash at the end so that's our URL to fetch and we'll use a method post so I will put a comma and then our object in that object I can I can do method and that method it's going to be post also what I can do is I can attach a body and then we'll attach something here so let's create our constant upload data is equal to new form data so we'll have a form data here and what we can do is we can grab these values from here and attach each to that upload the data and also did upload data here it will be our body okay so what we need to do is we'll take up data append and we can append some values here so what we want to append basically if we come back to our PyCharm this is what we actually expecting to have we expect to have cover and we expect to have title so basically that's what we need to attach into our front-end so we first thinks it will be title and the second one is value so what is the value we have a value value here on our hooks so I'll have it like this and that's the first data we can append the second one will be cover and then it's gonna be our cover here we can also include cover that name so it will include the file name with weight with the file okay so we have a blue data which is our format data then we append title and the cover from our hooks and then we actually we can remove this one now and then we'll try to fetch so we have our URL books then we will do post with that data attached okay so what we need to do here is we need to do then so then means whenever we don't that and we can expect some read also responds console.log we are not really interested in response here what we want to do is we can actually prove that going to the server and see if the data has been uploaded but it's up to you what would you like to do with a response so I can do catch and then we can have Ferrer and then just console.log it so whatever it's here normally you should have some kind of error handling and so on so basically this is promise so whatever we have the fail fetch we have a promise and this will be returned when you have a success and this will return when you have an error so basically normally you would convert this to JSON and then have another then okay we just want to have it everything super simple so we have a fetch we have uploaded data from our form here and we are expecting to everything to work at this point but it's not going to work yet I will show you why it's not gonna work so first let's try to do something so I will do not like loads of the Ring and I will try to attach this a file a half a book cover loads of the Ring and I will try to attach it so at the moment nothing's here I will do a new book and then we have a problem so what is that about so basically there is a hint here it is cross-origin resource sharing error so access control allo origin is actually preventing that for fetching this data so what is happening here is we have one server let's say it's a server on localhost 3000 that is requesting the data and the other one is another local host so this is two separate domains so he Django is blocking that request because this is not safe someone after that data but we have no way to authorize that request so by default this is blocks what we can do is we can use plug-in Django course headers and that will help us set the headers for trusting sources so first thing what we need to do is going to install and that in our jungle so I will go back to the Django I will close the server here and then I will do Pippin style junk of course Heather's that's been done the next thing what we need to do and I can see here you can find the junk of course Heather's on a geek up the next thing what we need to do is we need to add it to installed apps so I go here settings and then I can paste that in here so we have that that third think what we need to do is we need to include that in the middle we're in the settings as well so I go here middle wire I need to do it above the common middleware so I'll place it here and we have that the last think what we need to do is we have two choices we'll a low for all which is not really save or we can whitelist it so what I can do is I can whitelist our application so I can place it anywhere in the settings it doesn't matter where and I will leave this one here so what we want to do is we want to whitelist it that means we'll allow this host to access our resources and when you go to a react application you can see it's a local host 3000 so what we need to do is we need to allow local host 3000 to access the resources so now what we can do is we can run the server again and go back to our application and we have already that data here so what I can do is I can do new book and you can see here we don't have that error anymore and we have some a response here so I can click here and we have internal server error so this one is different one so let me take a look what's happening here we have 500 so table API book has no column name cover okay so that was mine a mistake what I did is I had extra cover here but I haven't really applied that to the database yet so what I can do is I can close my server and I need to do make migrations make my creations like that so new a new field will be migrations have been created for a new field and then I can migrate which is adding that to the database schema okay that's done I can run the server again and let's come back here I will open this here and we can come back here and then I will try it again I will clean it try it again and this time is status 201 that means everything went true and it's supposed to be in our database so let's come back here I will go books and in fact I have one book here so I can take a look at that and I have Lords of the ring this is what I have created so if we go back here in the PI drop you can see I have folder Maria that's supposed to be media I made a mistake so if you go there settings and scroll down or you can see here Maria my intention was to put it as a media it doesn't matter so I have that folder here if I open that folder I have cover so if we go back to the views I sorry if you go back to the models here you can see the folder structure will be as we set it up so we have root folder for the media from the settings which is this one then we have covers which is this one and then we have name of the movie gets a romanian name of the book so this name of the book comes from a title so we named it instance title so this is the folder and inside we have file name and in fact we have a few of them here I think it is because it was locked for the two twice so the file itself it was uploaded what the the request was rejected so the file has been a safe a few times basically that was the original file but the next time we try to upload it Django just add a random string in today so it's it save it like this I think the third one was the the one that actually passed anyway what we have here is we have this JPEG uploaded to our server so we along with our and name because we with our title because we can see that Idol here so basically we have successfully connected our jungle and react and we were able to grab the image from the user interface here and pass it to our back-end server ok that's working fine there is one thing I would like to show you so what we can actually do is we can click on the covers here and that's the URL for that cover so basically that cover is on our jungle server media covers lodge and then that file name JPEG but the page is not fine so why this is a happening so this is happening because we need to enable static files for Django normally Django is not designed to hold the static page static files for us so what we need to do is we need to go to the URL and we need to enable that first we need to import from Django conf URLs static import static and then we also need to do from Django comes import settings we need to have those two things imported and then what we can do is on to our URLs here we can add statics so I will do URLs patterns both equal and then static and then we can add static methods to do this and we can say here settings media URL and then document rude is equal to settings media route so this is what we have set up on the under setting so we have made your URL and media route in our settings if you go here you have it here so basically we just do our URLs to our URLs the part we have here we also add the static part with a media will and media route okay once I have that if I come back here and alright I will refresh it and I have some problems here and you have got an unexpected keyword argument document Luke and I missed I page if you go to URL you have document Luke so this is supposed to be document route like this so I will save it again and then refresh it and and that's supposed to be document not to comment so I've done a lot of mistakes here sorry about that document root probably so that before and we have the the cover here so what we have now is that we have fully functional Django back-end that will handle images and we have react application that will be able to get the file from the user and send it along with some other data to our models and store it in our server so this is all now functional and as you can see here you have a full control where you would like to put it how would you like to store it and how would you like to handle all of their images it doesn't have to be images we just pick the image field here so image field is basically the same thing as the field field but it will also accept the width and height for the further image but if you would like to have other fields and other files accepted you could have the file field and use the same URL apart so that's it I hope this tutorial was very helpful for you I know a lot of people asked for for that and usually when you see a tutorial it is only one part so it is either backhand or the front end so what I try to do is I will try to do show you the full part and that's a working example of this if you liked it please do subscribe to my channel because I will have more videos like this in the future also I will appreciate if you click like if you enjoyed this video thank you

Channel: Krystian Czekalski

Views: 14,110

Keywords: django, react, hooks, upload images, full stack, front end, back end, upload file

Id: Sc1KKe1Pguw

Length: 33min 39sec (2019 seconds)

Published: Tue Dec 03 2019