How to upload images to Cloudinary using react-dropzone

so this is our drop zone and here we can select images and we can drop it here we see that we have drop files we can add more images we can select these images here and we see that we have these two images because this is an svg and we are not accepting svg's we are only accepting jpg and png's and now we can simply click on upload to upload it to our cloudnary account so let's click on upload and let's go back to our browser here and we can see that we have these images inside our dashboard insider cloudnary dashboard so that's what we have done here and that's what we are going to do in this video so guys welcome back again so in this video we are going to use react drop zone with cloud neary to drag and drop our images to our drop zone and then to upload them inside our cloudnary account and we would be handling multiple uploads that is uploading multiple images simultaneous images in one go and then we are also going to see that how to delete an image robin cloudnary account and then in the process of learning all this you are also going to learn that is how to handle for each loop with promises so that's what we are going to do in this video so let's dive into our code and let's see that how it is all done okay so here we are inside our terminal and here if we do ls here we see that currently we are inserted inside this directory called drop zone cloud dna which is the name of our project and currently there are no files and folders inside this directory so what i'm going to do i'm going to create a new react application inside this project and inside a folder called frontend so let me do npx create react app front end use npm and i simply put in this flag here because i want to use npm as my package manager and not eon by default it uses yarn so i'm using npm here so let me press enter to create this front-end application let me fast-forward it so now react is installed so let's open this folder that is our root folder inside vs codes so let me simply do code dot to install to open this folder inside vs code and here we see that we have a front-end folder in which our react application recites that we just created and the first thing or let me start the application so let's see that is everything if everything is working fine so let me do npm start to start the application and we see that our application is up and running and we can see this react spinning logo so let's go back to vs code and let me stop this application because we want to install a package here that is called react drop zone so let's open chrome first and let's go to this url here that is the npm url of react drop zone and let me simply copy the dependency from here let's go to vs code again and let me clear up the console first and let me paste it here uh let me simply press enter to install it inside the front end package and just remember that you need to install react drop zone inside your front end folder because otherwise if you were inside your root folder that is drop zone cloudinerry then it would be installed like inside the root folder but we want this package to be only available to our front end so that's only what you need to take care of and for the backend part we'll be doing that in a moment once we complete a front-end part so let me start this application so that the application is always started in the background so let me minimize the terminal here and now what i'll do i'll simply go to my package.json file and let me verify if the dependency has been installed so we can see that react drop zone has been installed here so now let's go to our app.js file and here what i want to do i want to remove a couple of things or rather each and everything from this file because we do not need it and we can remove this header part from here because that's a boilerplate code let me save it and or before saving it let me create a div here with the class name or with the class name of uh drop zone because you want to style it according to that name that is class name of drop zone and this name is not necessary it is only for it is only a class name you can name this variable or this class name as in what you like but i simply want to create this drop zone uh i simply want to give this div a class name of drop zone so i can style it so let's save this app.js file and let's go to our app.css file here and if you're using any component library or so then you can style it as an what you like and here i simply want to give you a small demonstration that how to style the drop zone before even creating a drop zone here and here what i'll do i'll simply give it a border of let's say two pixels uh dotted uh gray like this and then i want to give it a background color of something like this let's give it a background color of let's uh let's say that let's let it be this color and if i and let me also give this drop zone a height so let's give it a height of 300 pixels though it need not be that height and let's give it a width of 100 percent like this and let's also give it a margin so margin like this so top and bottom margin of 16 pixels and left and right margins of 32 pixels so let's save this and let's go open our browser and let's see that what it looks like so we see that we are here and our box looks something like this and now what i'll do i'll simply go here and instead of this with let me remove this width from here and let's see that how does it look like so now it's a perfect box here in which uh we can drop our files so currently this is an empty tab here nothing is inside here but we simply want to uh drop our files here or we simply want to drop our files here inside this drop zone basically this rectangular box is our drop zone where we can drop our files or even if we click somewhere anywhere inside this box we should be able to select files to upload it to our back-end server so let's go back to our application and let's go to our app.js let me import use drop zone hook from the react drop zone package and since we are in 2021 and in a couple of days we'll be in 2022 so we should all be using hooks and not uh like components that is provided by the drop zone library which in case you want you can use but i always prefer to use hooks so from react drop zone and the thing which you want to import is use drop zone like this and now what i'll do i'll use this use use drop zone hook inside our app component so what i'll do i'll simply say call something equal to use drop zone simply like this and then what it returns it returns a couple of parameters but here we are interested in three parameters or three properties uh firstly we are interested in this get root props and i'll explain it to you that what each and every uh property does or function does because this get root drops is a function here and then get input props and then we have a property called is drag active so let's save this and now what i'll do i'll go inside my div and here what i'll do i'll simply write a j6 expression here and that is is drag active if the drag is active then we simply want to display here that is drag active like this otherwise we can simply print out here that is you can drop your files here so you can draw your files here like this so now the other thing which we need to do is this that we want to use these two props that is get root props and get input props so now let's go to the browser and let's see that what do we see here so if we go to a browser here and we can see that we can drop our files here but if we open this folder here and if you want to drop this react logo inside this inside this drop zone we see that we are not able to see this we are not able to drop here because we are not getting any message here that is drop here or drag active though the drag is active here and that is because we need to pass this get root props to this drop zone div that is cut that is the div containing our drop zone and here we need to spread this get root drops function that we got from this use drop zone hook and here we can simply say dot dot get root drops like this and now if we save our application and if we go back to our application we can see that if we now drop this thing here that is this logo here we see that we are getting this thing uh that is this thing here that is drag active but if we click here nothing happens uh even if we open our console we won't be seeing anything because we haven't done anything that is whenever someone drops here we we are not handling it as of now so let's go back again and now here what we need to do one more thing that is inside this div which is our drop zone we need to create an input html element inside this drop zone so what we'll do we'll simply create an input element so input uh we won't be using any type here because that type and each and everything else would be provided by this get input props so that's why we have this gate input props here which would take care of each and everything like on change event on this input and so and so forth and i would be simply printing out that what's all inside this get input drops and this and this get root props so firstly firstly let me simply spread this get input drops here so now let me let me also make a log statement that what's inside these get root props and get input props so console.log get input props and get root drops so it it would make you better understand that what these props are doing here or what these functions are doing here inside in each of the elements that is inside the step and inside this input element so let me save this and let's go back to our console here and now we see that we have this console open we see that the first thing which we see here that is accept and this is related to the get input props thing and we see that for except we have undefined for autocomplete it is off for multiple it is true we have the on change event we have the on click event we have the ref here and the style here and so on and so forth and the type is file here and that's why we said that we do not need to specify the type manually by ourselves it is provided by the get input drops and if we have other look at the get root props we see that we have these events here that is on blur on click and so on and so forth and that is what is handling this drag event here that is whenever we drag we see that we are getting this drag active here so now let's handle the dropping of the files inside this drop zone so let's go back to our vs code again and let me remove this get log statements and now what we need to do inside this use drop zone we can provide a prop here and that is our function that would be handling that what would happen when a drop occurs inside a drop zone or a file is dragged to a drop zone so we'll use this on drop function here and currently this function is not created here inside our app component so let me create this function here quickly so we'll say const on drop equal to an arrow function like this though we can create this function like this but for performance issues we should be using the use callback hook that is provided by react and you can read more about this that inside this react drop zone package that is why we need to use the use callback hook but we are simply want to use the use callback hook so before even using the use callback hook what all parameters are present here inside this function here we have two parameters that is the accepted files and the rejected files because we can provide in some more options here that what types of file do we want to accept and what types of file do we want to reject so we would be having the accepted files and we would be having some rejected files as well if there were any so this on drop function takes in two parameters or two arguments that is accepted files not guiles but files and rejected files like this and we want to wrap this function inside the use callback hook that is provided by react so let me import use callback from react so let me do import something from react and what we want to import we want to simply import the use callback and we simply want to wrap this function inside this use callback hook use callback like this and what we can do we can simply cut it like this and let's paste it here and we simply want to have a dependency that is an empty dependency array like this and this is all what we want to have here so for now let let me simply log in the accepted files here that is console.log accepted files and let me make a statement here that is accepted files and similarly we would be having the rejected files like this so let me paste it here like this again so let's save this and if we are good to go then we should be seeing these log statements here that is accepted files because we are not making a check for the rejected files so we are we won't be seeing this statement here or for the rejected files we would be getting an empty array here so let's go back to our application and now let's go to here and let me clear out the console first and let me drag in some images here so let me drag in this react icon image that is a png file so if we drag it here we see that we get this statement here that is accepted files and rejected files and as we all know that for rejected files i already told you that we would be getting an empty array but for the accepted files we see that we are getting a file here that is an array of files and here if we open this array we see that we have only one file here and that has a path here then the last modified date and the name of the file the size of the files the type of the file and so on and so forth and now you can do whatever you want to do with this file and we are going to upload this file to cloudinerry but before doing that let me show you some more things here so currently we see that inside this accepted files array we only had a single file here because we can see zero here and now if i simply drag in these two files that is the node.js image and the redis image which are both pngs again so if we drag it here and we leave it we see that now we have two files here that is zero and one and these are the two assets that we uploaded here or we simply dropped it here and that is because this accepted files would only keep the files that are presently or that are being currently dragged to the drop zone or data been currently selected from the drop zone so if i click here somewhere inside this drop zone we see that a pop-up opens which from which we can simply upload files or click to upload files so if we go to this folder and here if we go to this logos here and if i simply click on this r0.svg so now we see that again we have a single file here but we are not keeping a track of the previous files that were present there so for that what we need to do we need to use some kind of a state variable to keep a track of all the files that are accepted here but even before doing that let me show you one more thing that is suppose if you only want to accept images inside your application because currently we can drop in any kind of file here inside this drop zone but for the purposes of this tutorial we can make this drop zone like this that is we can only accept certain types of file and in this case we want to accept only images that are pngs not even svgs so what we can do we can go back to our application again here and here inside this use drop zone hook we can pass in one more prop and that is accept and here we can specify the type of file we want to accept so if we have a look at the documentation of this react drop zone package or we can see that inside the examples they have this accepting specific specific file types so if we click here accepting file types we see that we can pass in any extension with the stop character like this or a valid mime type for audio files we can simply pass in audio forward slash star which would contain each and every type of audio file for video also that is video forward slash star would contain each and every type of video file that is mov file that is mp4 file and for the images also if you simply pass an image forward slash star then we would be accepting any type of image file that is whether it can be jpeg file it can be a png file it can be a bitmap file or it can be a svg file but since we want to limit ourselves to only in pngs so what we can do we can simply pass an image forward slash png and that is what is uh that what is uh shown here to accept only jpeg and png we simply need to pass this thing here that is image forward slash jpeg image forward slash png so let me simply copy image forward slash png because we are not even accepting jpegs inside our application for whatever reason so let me paste it here that is we want to only accept image png so if we save this and let's go back to our application again and if we open our application here and let me clear out the console once again so now let me open this thing here and now let me drag in this png file we see that we have the accepted file that is a png file and just ignore this dot svg here because it's a png file and now let me simply open on this svg here that is a github svg so this is an svg file and if we drag it here we see that in accepted files we get an empty array but in rejected files we get back this array here which contains the file and the errors here so error is file invalid type so if you want to make your application super awesome if you want to make your drop zone super awesome then you can handle these errors inside the rejected files also but i'm not going to do that i'm only showing it to you that how you can do it and we also have the message here that is file type must be image png so this is all fancy stuff which you can do inside your drop zone but i'm not handling that rejected files case i'm only accepting the files so now let's create a state variable to accept all the accepted files here so to do that what i'm going to do i'm going to go back to my application here and here i'm going to simply create a state variable and that would be called files so use a state like this and the state name would be images or let it be images and the initial state would be an empty array like this because initially our images would be an empty area of images so to use a state we need to import the user state from react also so let me import that also so now the error is gone and now what we can do oh we can make a log statement whenever we push an image to this images state variable so let me use the uses effect thing also so use effect and the effect we want to do we want to simply console.log images like this and the we do not want any cleanup function here it is only for demonstration uh let me also import usefx from react and now we would be getting the log statement whenever we push any images inside our images thing here so let's go to our this callback here that is on drop function and here what we will do we will simply say accepted files dot for each we are going to use the for each loop and this should be like accepted files dot for each and here we have the file and here we simply want to set the images from this file so what we can do we can simply say set images and here we have the previous state and then what we need to do we simply need to spread the previous state that is an area of previous state and then we simply want to append this file to this like this if we save this application and now let's go back to our browser here once again and let me clear the console so once i drop this react png here we see that we are not getting any log statement here and why is that so maybe because i forgot to save so we saved it oh this effect should be fire whenever the images changes that is this image dependency changes so we need to put that image images here so that is whenever this changes we should be having this effect here so that was a mistake from my part so let's go again back to our browser so let me clear out the console so currently we saw that we have an empty array of images so as soon as we drop this react logo here we again see that we have this file here inside this uh this thing here and now if we drag some more assets here that is these two are png so let me drag it here and now we see that our images contain these three files so now the point comes that how do we upload these files to our server because currently this is in file we have this png file and so on and so forth but the easiest way to upload these files to our remote express server would be to create a base64 url of that file and the reason of using base64 format for to upload these files instead of directly uploading these files using the multi-part form data is because cloudenary accepts base64 images to be directly uploaded to their cloud using the cloudinary sdk so that's what we are going to do we are going to simply convert these files into base64 counterparts and then we can simply make a post request to our endpoint and we can directly upload that base64 strings to our cloudinary account so let's uh do that so let's go to our vs code and instead of setting the images like this what we need to do we need to create some kind of a file reader here to convert this file into a base64 counterpart so what i'll do i'll simply say const reader equal to new file reader like this and then we simply need to handle the reader on load method and we can say reader.onload we have a function here and here we can do whatever we want to do with this file so instead of setting the images here let me put it here and let me comment it out as of now and then what we need to do we can simply say reader dot read as data url and what we need to read as data url we can pass in a blob here and in our case the blob is this file here which we get here inside this for each loop so now whenever this file is read as a data url we would be firing this event that is on load event and then we can simply set the images using the previous state or this this file here so here we can simply set the images using the previous state like this and instead of passing in the file we can pass in simply reader dot result like this so if we save this and if we go back to our application so let's open browser here and let me clear of the console so let me drop in again two files here these two files here now we see that we have these things here okay we have this previous cache data here so let me clear the console and let me reload the application so let me simply drag in these two files here and now we see that we have two files here with the base64 counterpart here and we can also see the size which they have here so we have this uh this is the uh this is this is the base 64 counter part of that file and we are simply going to upload this to our express server but now let's see that how do we also display these files as soon as i draw as soon as they are dragged to this drop zone somewhere here so what i'll do i'll go back to my application here and below our drop zone let me create a div and this div would only be active whenever there are some files present inside the images folder that is inside this not the folder but this images state variable so what i can say i can create a j6 expression here and i can simply say images.length should be greater than zero then only display this div and this should be like hard and only display the stiff whenever the image's length is greater than zero and to display this div what i want to do i want to loop through each and every file inside our images to create an image image html element so what i can say i can say images.map and here we have the typical image from the map method and here what we want to render out we simply want to render out an image tag here or the image html element so we can say image and then for the source we can directly pass in the image here because image contains the base64 encoded url and here we can simply say image like this and alt we can simply ignore for this tutorial and for the key we can simply pass in the index here though we do not have the index here so let me use the index here inside the map method so we have the image comma index like this and here we can simply pass an index like this and let's give this image a class name because you want to style it also so let's give it a class name of selected images like this and let's quickly style it here somewhere inside our app.css where we style the drop zone so here we can simply give it a height of let's say 200 pixels and let's give it a width of 200 pixels and let's give the object fit to be covered something like this so let's also give it a margin of 16 pixels on each side and let's also give it a background color of this let's say antique white and let's change the height to be 100 pixels because 200 pixels is too large in my case so let's go back here and now let's reload now let me drop this logo here we can see this react logo and now we can simply drop this drop zone logo here we can see this drop zone logo and we can simply upload this node miller logo also and we can see that we have the files here and one thing i want of you guys to do by uh practice by yourself that is what you can do you can easily easily create a cross button here or a delete button here somewhere inside this image so that whenever you click that button then what you can do you can have that image deleted from this files array that is a state variable so that you can do pretty easily i suppose and in case you are having difficulties in doing that then you can let me know in the comments and i would be covering that part also so now let's see that how do we handle this image uploaded to our backend server so for that what we need to have we need to have some kind of a button here inside our application to make upload to our remote express server so let's create that button inside our app.js file so here what we can do we can simply say again images dot length only if the images.length is greater than 0 then only we want to show this button here that is that is the upload button and here it simply say upload images like this so now let me create the on click handler for this button so let me say on click equal to handle upload like this and this function doesn't exist so let me create it here create it somewhere at the very top so we can see uh function handle upload and here we can simply console.log we can simply say uploading files like this and here we can use some kind of a library like axios to upload the files to our backend server so for that what i'm going to do i'm simply going to stop my application here because i need to create the backend application because our backend application does not exist so to create the backend application what i need to do i need to use this package here that is express draft because it simply provides you the boilerplate code for a typical express application so to install it you can simply do npmi hyphen g express draft to install it globally and then we can simply do exp dot to install the application in current folder or to create the boilerplate in current folder with all the dependencies installed or we can simply do exp and the name of the folder so in our case we would be doing exp backend to create the boilerplate code inside our drop zone folder so for that what i am going to do i am simply going to clear out the screen and i am going to open my terminal here so let me clear out once again so we have the front end folder here and now what i am going to do i am simply going to do exp so exp express draft is not currently installed on my system so let me just simply do npmi hyphen g express draft like this and it would take a moment or so to install it globally so we have added it and now what we are going to do we are simply going to do exp back end simply like this and this would create a basic react app uh the basic express application inside our backend folder so it might take a couple of seconds or so not much so we see that everything is installed so what we can do we can close our terminal here and we can go to our backend folder here and we see that we have this app.js file inside our application and if we have a look at the package.json file it basically installed the dot env dependency the express dependency the http errors for handling the errors the morgan package for locking in the request and that's all what it does and inside the env file we want to run this application on port 4000 because our react application runs on port 3000 so let me save the dot enb file and to run this app.js file uh what we can do or to run this backend application what we can do we can open the terminal here and we can open one more terminal here inside vs code and here we can see into the backend folder and here we can simply do npm run div to start the application or the back end application on localhost port 4000 and if you simply click here we see that we get this message that is awesome it works so let me stop this back end application and why need we need to stop it because we need to install a dependency that is cloudinery to install uh to be installed in the backend app on the backend application so let's go to chrome and let's go to this dependency called cloudinerry and to install it on the back end we simply need to do npm i cloud in every to install it on our backend server so let me paste it here and make sure you are inside the backend folder or the backend part of your application so let me do npm i cloud in a re so it would take a couple of seconds to install it and now what i'll do is simply do npm run div to make the application started on localhost port 4000 and for the front end application i would simply do npm start to run the application on port 3000 that is our react application so let's again go back to vs code and let me simply minimize the terminal here and what i'm going to do i'm simply going to create a very simple route here that would be simply handling the uploads of our of our of our images so for that i'm simply going to do app.use or app.post and here i'm simply going to say upload like this and then we have the async function that would be simply containing the request response and next like this and then we can simply say restore sent okay for now so let's try this route that is post route on our this server that is whether we are able to hit this route but i guess so that we would be able to hit this route but and instead of simply sending back the request okay what we need to do we need to make the uploads happen to our cloud in the account so before using cloudtenary inside our application we need to configure it and before configuring it we need to simply import cloudinerry here and instead of importing here instead of importing we need to require it here so we can say const cloudinary equal to require cloudinary.v2 like this and make sure you are using the v2 here and we then we need to pass in some configuration options to this cloudinary here so what we can do we can simply say cloudenary.config like this and here we need to pass in the cloud name and we i would be getting into that that how do we get all this stuff and then we can simply pass in the api key and then we simply need to pass in the api secret simply like this and uh how to get the cloud name the api key and the api secret is pretty simple to do so once you create an account on cloudinary you would be getting a dashboard like this where you can see your cloud name uh when you registered your application or when you make a big when you created an account ordinary it would have asked you that what is the cloud name that you want to keep so here's my is my cloud name and then here is the api key and here is the api secret so we can simply copy these parts of code from this cloudnary account to our backend server so let me paste in the cloud name here uh let me also paste in the uh api key so let me paste it here let me paste it here and for the api secret i'm going to highlight so let me put it in in my environment variable so we can or let me put it here and i will simply blur it out so let me simply copy it from here that is api secret so let me copy it and let's go back here we can paste it here and now this part is hidden here and now this is all what you need to do to make a cloudnary configuration here so let's save this and now let's go to our upload route here and here what we need to do we can simply extract out images const images from rec dot body because we would be passing this images array or this images key inside this request body by making a post request to this upload route so let me get that images and here what i'll do i'll simply simply uh here what i'll do is simply rest.send images as of now just to make sure that is if everything is working fine so let me save this and let's go to our app.js file that is a front-end application and here what i want to do i simply want to stop the front-end application as of now because i need to install axios here so let me install it right away so npm i access because i want to use axios to make api calls or to make a post request to a backend server so let me do npm i axios on the front end folder or inside the front end folder make sure you are inside the front end folder so let me do npm my exeos so now it is installed so let me start the application once again that is a front-end application and let me minimize the terminal here and what i'll do i'll simply import axios from axior so i'll do import axios axios from axios like this and now inside the handle uploads thing or handle upload what we need to do we simply need to do axios dot post and we need to make a post request through our backend server and that is running on port 4000 so what we can do we can make a proxy pass we can use a proxy pass inside our package.json file inside the front end folder so we can do that also or for the sake of simplicity let me simply type in the whole url that is the backend url here so http uh localhost port 4000 forward slash upload or was it called uploads so let me check it once again so it is called upload here so that's what we are passing here upload and then we need to pass in the array or our json object here that is the json body of our post request and that would be simply images like this and then we have the then block that is what happens when we get back our response so for now we can simply make a log statement here that is console.log response.data like this because in axios response.data contains the actual response body and then we can properly cache the error if there is an error and we can again log the error so console.log error dot message or like this so let's save this and if everything goes well we should be seeing the course error inside our application and that's what i expect so currently let me clear out let's reload the application and let me simply drag this file here and let me simply click on upload images and we see that we get back this typical course error which we typically have when we are creating our front end and back end separately which is not running on the same port or on the same host so to fix this error the simple way is to do to install the course package on your backend to allow incoming requests from any host so what we can do we can simply do that by opening our or by stopping our backend application and let me simply install npm i course like this and let me run it again so it should be npm run div for the back end application and if we go to our back end application we need to go to the app.js file and here at the very top what we need to do we need to simply say const course equal to require course like this and then we simply need to do just after we initialize the express application we can simply say app.use course and here we can pass in the host or what it is called uh origin and here you can simply pass in a star to accept from all origins but even if you do not pass this and you simply do it like this then it would be accepting a request from any origin or otherwise you can simply pass in the origin of your front-end application which i am not going to do and if we go to our front-end application and if we reload the application and if we drop this react file here and if we try to click on upload images then we won't be getting that quartz error but instead we would be getting a response back so let's click on upload images and we see that we get back this data so which means that everything is working fine to and flow from the front end to the back end so let's handle the uploads from the backend so that is pretty simple to do once we installed cloudtenary here we initialize the cloudinary package here what we can do we can loop through each and every images from our request body so what we can say images dot for each and it should be like images for each and here we have the individual image and for now let me simply log the image or let's simply do it right away because like logging make takes a lot of time and instead of sending those response like this let me delete this response so firstly what we need to do let me show you the wrong way which most of you would do if you were trying to make an upload to cloud neary so if there is suppose if this images was not an array and instead it was a single image file that is uh let you let me simply get the first element of the error let me try to upload it instead of uploading all the images let me simply import the upload the first image so cost image equal to images 0 like this like this and now what we need to do to upload to cloudnery we can simply do it like this we can simply say cloudenary dot uploader dot upload and here we can pass in the file which you want to upload and as i've told you that you can simply pass in the base64 counterpart of that file and therefore i can simply pass an image because an image that is the that is the first element inside the array and that would contain the first image in b64 encoded string we can pass in that image here and then we can pass in some options here and the options we can pass here is where you inside cloud and every account you want to store this image so i can provide in a folder name here so let's say yours truly uh let me call it tutorial like this and then since uh this is a a promise here if we hover over it we see that we get back this thing here that is upload api response it is a promise so what we can say we can simply say const oh it's not like this so it should be cons response equal to await cloudnary uploader.upload and then we can simply console.log the response or we can simply say res.send response like this and since we are using async innovate then this piece of code most likely should be in a try catch block so let's wrap it inside a try catch block and here i can simply do it like this and now since we are using this express draft package so each and every error handling is done by this package so what we can do we can simply if there is an error we can simply call in next or with the error as the only parameter to handle the errors otherwise we are simply sending back the response which we get back from cloud nearly so let's save this application and let's go back to browser so let's reload the page and let me open my cloudinary management console and let me go to this media library here and we see that currently we have only these two images and currently we only have one folder here that is called sample here so let's see that if we can upload this file to this yours truly tutorial folder so let me draw drop this react logo so let me click on upload images and we get this message upload files and now we see that we get backup response we have the api key we have the asset id we have these many bytes we have the format here we have the url also somewhere here so we have the typical url also and we have the secure url also so let's copy this url here so this is the thing which you want to store in your database on your backend so that whenever someone wants to get the url of this file you can simply send you can simply read the url from your database and you can send it back and one thing also you should note that you should be also storing this public id somewhere inside your database where you are keeping a track of all the uploaded image inside your application and i would come back to this that why do we need this public id so we have the secure url so if we simply copy this you how do i copy this url so let me simply copy the property path and let's go here oh this is the property path so let me copy the property string contents like this and let me go to this url here and we see that we get back this react logo here and if i go to this management console and if i refresh this thing here we should be seeing that we have this one more folder that is called yours truly tutorial so if i open this folder we see that we have this react image here in in a png format so we are sure that this file has been uploaded to cloudinary so now we are done but no we are not because we need to handle multiple uploads so let's go back to our vs code so now you might be wondering that see truly now it is very simple to do that we have the we can simply use the images for each loop and we can simply upload it to cloudnary so very easily like this so let me comment it out and what it typically you would do is this that you can simply cut this piece of code and you'll you'll paste it here and then finally you would be saving this response somewhere inside an array like this that is uh let response be an empty array as of now and when you get back a response you would be simply doing response dot push or let's call it responses here so responses dot push and here we can simply push in the response for the individual file and then we can simply do responses like this and now we are getting await uh with us ready squiggly line so the easiest way to fix it would be or we can simply do it like this that is async images and this would be good to go and we can upload multiple files to our web server or to our cloudinary account so let's try it because this won't work it is not meant to be used like this but what we can do we can create we can create promises here and then we can fulfill all the promises at the same time or like or simultaneously and then we can send back a response so what we can do instead of simply saying it responses what we can say we can say promises equal to an empty array like this and then we can simply instead of awaiting it what i can do i can simply say i can simply comment out this this piece of code and hi i can see it here that is promises promises dot push and here we can push in this individual promise for the individual file like this and now what i can do i can see now these promises are not fulfilled because they are not completed they are simply these promises are simply pushed to this promises array here and now what we need to do we need to do promise promise dot all and here we need to prom of pass in this promises which we simply which simply contains all the uploads so whenever these all promises are fulfilled then what we need to do then we need to send the response then we have the response or otherwise if you are using the await thing here we can simply say cost response equal to promised await promise dot all like this and then we can simply send back the response so rest or send response like this so this is the proper way of uploading or handling promises inside the for each loop so i guess that you got to learn one more thing inside this tutorial so let's save this and now if we open a browser here and if we rewrote the application let me clear up the console so let me drag these two files here and let me again clear out the console so now let me try to upload these two images so i get this error once again and this is a course issue so whatever the best way to fix it would be to simply make a proxy pass inside our front-end application so let's go to our front-end package.json file and here we need to stop the front-end application once again and here what i'll do is simply make a proxy pass so i can say proxy like this not prozy but proxy and here i can simply say that i want to proxy pass all my urls that are not handled by this react application to local host port 4000 like this and that would be all and now if we go to our app.js file and instead of making a post request to this for this url we can simply make a request to forward slash upload and this would fix that course issue i suppose so let me start the application once again so let me minimize the terminal here let me reload the application a couple of times to clear out any cache here so let me click here that is upload and now if i try to upload these two images so let me click on upload images we see that payload too large and let's have a look at the network tab here so let's go to the network tab here and we see that we are getting this message that is 413 payload too large and the payload is these two images that we simply passed here uh let me show you one more thing if i can find it so content so it is because of the content length here and the body parser package is not able to parse it so what we can do we can go back to our backend application here and where we are simply using the express.json thing here that is passing the request body we can pass in an option here and that is a limit here so we can oh we can we can pass in a limit thing here and here we can simply pass in 20 mb which would simply accept any request body that is within the limit of 20 mbs so let's save this and let's go back to our browser here and let's reload and let's create the console again and let me try to upload both the images again so let's paste it here and let's try to upload this right now and we see that now we do not get any error here but we do get back the response here and that is the asset id the public id of both the images and if we go to our cloud navi console and if we refresh this cloudnary console we should be seeing that two images inside here and we can see these two images here that is the redis and node.js and if we go back to our application here let me close this tab or we can also copy this url here that is the secure url so copy string content and we can paste it and we can see that logo here and the same thing is for the second image also that is secure copy string contents so let's paste it here like this so this is how you upload images to your cloudnery account and that's all about this tutorial but wait a minute i told you that i would be simply telling you that why do we need to have this public id stored somewhere inside our database and the reason is this that if you want to somehow delete your image from your cloudnary account then what you need to do you need to have this public id stored so for the purposes of this tutorial i am simply not going to create any other route for this application but what i am going to do i am simply going to tell you that is how do you delete using this public id so let me simply copy this string contents that is public id from here or let me simply copy it right away like this and now what we are going to do i am simply going to delete this image so let's see that what's contained inside this image so we are simply going to delete this node.js logo from our cloudnary dashboard here so let me refresh once again so currently we see that we have this node.js logo here but we want to delete it so to delete this node.js image we would be again using the cloudnary package but we would be doing it manually as of now so what i can do since i have the cloudinary initialize inside this application or inside this app.js file why not let simply delete whenever this app.js starts or delete that file with this public id so const let me copy the public id from here so let me copy the public id from here let me paste it here and it is only for demonstration purposes it is not it is not meant to be done like this but i'm simply telling you that as simple you can simply pass in the public id you want to delete and then what you need to do you can simply say cloudinary.uploader dot destroy and here you need to simply pass in the public id so the public id is this public id and then we have the response so response and here we can simply console log base response so response and dot catch and here we again have the response uh not the response here we have the error and here i can simply log in console.log error dot not like this but error dot message like this so this should be like an arrow function and let me open the terminal here and let me let's see that what would happen as soon as i save this application because this application is meant to be restarted because of nodemon and this post of code would be run as soon as the application is restarted and we will be seeing this log statement here inside the console so let me increase the font size so let me save this app.js file so we see that we save the file here and we get this back here that is result okay so let's see that if this public id image is deleted from our cloudnary account so let's go to our cloudnary account so let's click on this refresh icon and we see that that node.js image has been deleted from our cloudnary account and now even if we do this once again then you might be thinking then that since that this public id has been deleted then we would be ending up inside this catch block but that is not the case we would be again ending up inside this response block here that is this then block here and instead of result okay we would be getting not found so let's see if this once more so again the application restarted this function again ran with this public id and we get back our response that is not found but this this uh doesn't throw us an error and we are not inside the cache block but we are inside that then block so this is you should note that is you always end up end up inside the then block when using this destroy thing here in case if you are using a valid public id but if you're using something that is not a valid public id then you might be ending up inside this catch block but otherwise if this resource is found then it would be deleted if this resource is not found then it would simply display result not found so this is how you can delete assets from your cloudnery account so guys that's all about this video i hope that this is a pretty long video but i've cleared out many doubts about using cloudnary nb64 images and then how to handle multiple uploads how to select different kinds of files using react drop zone so if you have liked the video do hit the like button and if you haven't subscribed to the channel till now do subscribe to the channel so thank you bye bye tata take care and have a good day and have a great day

Channel: Mafia Codes

Views: 7,116

Keywords: yourstruly, how to use react dropzone, how to upload images to Cloudinary, drag and drop images in dropzone, how to delete images from Cloudinary, how to use Cloudinary SDK, using Cloudinary with react

Id: TBOkDQEBPIU

Length: 55min 2sec (3302 seconds)

Published: Fri Dec 10 2021