How to Upload Multiple Images to Cloudinary in Node.js Express & Multer

hello guys welcome to this video in this video we will be making an application which will be uploading multiple files to cloud Neri website using Modi Express and Malta so basically this is my cloud nari website here I have already created account and the uploaded files will be there inside my images folder so the application is I am testing it using postman so postman is a tool for checking the URLs so I'm just making a post request to this route here local who's 5000 this is my node.js server which is running here you can see that on port 5000 and my I am making a request to slash upload - images and I have selected these two images in the body here and I've selected form data here and if I click the send button here guys this will upload these images onto the server it will take some time because if you check the body you will see that this is a response which you are getting here a message that is images uploaded successfully and followed by the data that - a URL of the image if I click this URL and let's suppose I make a get request to it I will see my image you will see that this is my image that I have uploaded here I can verify also by going to this cloudy website and all the your images would be stored inside this images folder if i refresh it you will see that these two images will be there you can see that guys these two images are there inside my cloud airy website so in this video we will be building this application from scratch so let's get started now to get started building this application create a new folder here on the desktop here let's suppose I named that as a multiple image upload you can just name it anything of your choice so just open this folder in command line so just open command line inside this folder and the very first thing that we need to do is initialize of a node project so NPM innit - why so this will create the package dot JSON file with the default options and now we just need to install some dependencies so first dependency will be the install this Express so this will be our server and second dependency will be cloud ready so this will be the package which will be uploading multiple to cloud-ready website and apart from that we also need Walter so Walter will be uploading other images into a local folder so that we can just upload it to this cloud Marie website apart from that we also need body parcel so this will be the package which will be getting the image from the forum that is submitted and apart from that we also need to install mode one so this will restart the server when we make any kind of change and also we just need to install this dot env so in this we will be storing the sensitive information such as cloud and airy app API key secret all that stuff so press ENTER so this will install all these dependencies so this will take some time depending upon the speed or internet connection so I will be back whenever these dependencies are successfully installed open this in Visual Studio code and create my simple Express server so this command will open this inside Visual Studio code you can use any text editor of your choice but I am using Visual Studio code here so this will open this inside Visual Studio code and this has created a package or JSON file which will instruct which will have all the dependencies for us so just wait it is opening so now you will see that guys dis contains a package store JSON file and if I open this file I will find all the dependencies listed out in the dependency section body parser cloud Neri dot e and we expressed Malter and odd mode and now we just need to make a start script here inside script section so just try it start here and : after that you just need to write mode more server door Cheers and here you just need to replace here server or Cheers and now we will be creating a simple Express server let's create a server or JS file and here we will be importing our dependencies first of all we will import Express require Express and now we will be making a simple Express app which will listen the food 5000 abroad listen 5,000 and it takes a callback function arrow function so here we can just print out on the console that server is listening on forth 5000 that's it and now in order to run this app it is very simple you just need to go to command prompt and write the simple command that is NPM start so this will start our server that is node more server or cheese and you will see that server is listening on port 5000 and now if I just make a simple get request on the home route let's suppose this takes request and response and I can just send a response that is hello world so if I save this so this will automatically start the server if I make any kind of changes you will see that and now if I go to the same route here localhost 5,000 so it will be returning the response which is hello world so you will see that how the world is returning and now we just need to bring some more dependency which is body parser so you also need to require it so just write a require body parser and just after you initialize your app you just need to use it so AB dot use body parser dot URL encoded and here you pass a extended property to false and also you just need to use another middleware which is body parts or Dorchester so this will set up the body password middleware for our Express application so that we can just get the form values inside our application so now wise before you uploading the image to this cloud and ready website you just need to create a account here first of all so account creation process is very simple so just sign up for a new account and I have already created a count here and after you create your account just go to dashboard here and you will get your cloud name API key and a a secret so these three things we need we need to store it inside of an application so just here create a new file which will be dot env file so this is the stands for environments variable so this is very much useful if you want to store any kind of sensitive information so we will be using this file to store this information so in this we just need these three things that is cloud name API key and API secret so I will just copy paste it inside this here you just need to write your cloud name so in my case the cloud name is let me just copy-paste it you will see at coding section so your cloud name may be different so just create it and paste it here and this is my API key so I will just copy to clipboard and lastly we have the secret key also so if I wanted to reveal it so I will just reveal it and then copy to clipboard and it will be copying pasting this to API secret here so now we have successfully configured these three values and now we are ready to upload files into cloud meri by making a post request in our Express application thing about files since inside our uploads directory so for that we just need to create an uploads directly here right inside our project directory so just create this directory of uploads so here we will be storing our images so for that we will be creating a new file which would be monitored or jeaious right here inside root directory here so just wait here just right Malter door cheers so inside this we will be writing our code which will be responsible for uploading the file inside this directory which is uploads so first of all we just need to import Malter so i will just write call small term and require Malter at the very top and after that we just need to specify the storage engine storage engine of Malter so we will just fight Malter dot discourage and for that we can just specify a variable here coin storage inside this very even we can justify it malted or disc storage and this takes some options so the first option is destination rise so where you want to store your file so this is a callback function so which have a request at the actual file and a callback and this is a callback function so we will call we will call this callback that is CB stands for callback this is the first argument which is null and the second argument we just need to specify the uploads directory here so I will just write dot slash uploads so we will be storing this inside of our uploads directory and a another property takes as a file name so just put a comma here file name property it takes so it will again be a function which takes request file and call back this is again a function and in that function we just need to call the callback and pass this first argument as nil and in the next argument we will need to call a date function so inside this we just need to convert this to to ie so I will call this function and I will concatenate the file name put a - sign here in front of the file name and then I will be writing the actual file name which is stored inside this file variable file dot original name so here in this we are just doing that we are signing a random name to a file name whenever the file is uploaded inside our directory we are storing them with a random name attached to it so this date function will generate a random stream and it will be attaching it to the original file so that way every time we upload a file it will have a random name attached to it and now we have successfully have the storage of Malter so after that we have to have some file validation we only want to upload JPEG and PNG images for that we just need to create filter so I will just write file filter variable so this will be an actual function which takes request the file and the callback this will be a arrow function and here we just need to check the file file dot mem type property so mem type will actually contain if backs tension so we will check if it is equal to image slash jpg so this is for the jpg mem type or it is equal to this is all sign and we will just write file dot mem type is equal to image slash PNG image slash PNG so we are only allowed to upload jpg and PNG images so if the file is equal to in either of these cases they need to allow the upload so here we can just call the callback and pass null here and the second argument to true so true meaning here there is no error you can just proceed in uploading the image but if the image is different from these two we'd want to prevent the upload here prevent the upload so here we will be getting just sending the error to the user that your file name is different so here we will call the callback function and I will pass a message to it a massive object in a set of curly brackets we will be passing this property or message so we can just write here unspun supported file format that's it and the next argument will be false so false here meaning that there is a error here which we are passing here you cannot upload so after having the validation now we just need to attach all these storage and the file filter options that we have created here now we just need to call Malter so I will be calling the upload just be storing inside this upload variable and calling the actual molted lab ready so inside this this takes some options first is the storage option I will be assigning it to the actual storage that we have created put a comma and then we will be having some limits also so there is a limit property inside Malter also so inside this we can just pass a file size property so we can just biases 1 0 to 4 x 1 0 to 4 so this is a limited amount of file size that we are restricting you cannot upload more than that put a comma the next property we just need to have the 5 filter property we will be assigning it to the file filter that we have built that's it and now our upload variable is complete now we just need to export it inside of a server or chase this is very simple in the last line we just need to write this piece statement module dot exports and upload function that's it now we are successfully exporting this file inside server or share so that we can just use or include this file twice after creating our molted or jeaious we just need to set up our cloud very fire also where we will be specifying this parameters that we have stored here cloud named loud Mary API key and API secret for that just create a new file here which will be Cloud Mary dot Cheers so this file will contain the setup structure for our Cloud Murray library so first of all right here at the top we just need to import our cloud nary library that we have installed in the NPM modules so right here Cloud Murray just install it and after that we also need the dot env file module that will import it so require dot E and V so after importing these two modules we just need to call this function on dot E and V dot config just call this function here and after that we will be calling a clowder e dot config function so this will set up our library here of Cloud Murray so inside this just takes some objects here first is the cloud name property cloud name and this is equal to crosses dot E and V so this is they're inside of environment variables in order to access that we can just write process dot E and B dot the followed by the name that you have given so you can see that this is my name so I can just copy this name here and paste it here and put a comma the second property it takes is the API key and this is located in again processed or D and V dot I think that I have made this yes cloud Duryea paid so just copy this make sure the name is same inside both the files so put a comma and the last value it takes is the secret key API underscore secret we can just get it by a processed or a and B dot and then we just need to copy paste the name here which is cloud theory API secret so just go to the file and paste it here and now we have setup this config object which is cloud Neri config after calling this method we can just write here export dot up loads and this will be a function guys this takes file so I did this needs to be exports not this takes a file object and the folder and this will be arrow function and first of all it returns a promise to return new promise so inside this promise it takes a resolve variable so this will again be a arrow function so inside this we will be having the cloud MIDI library variable dot uploader dot upload and we just need to upload the file comma result first variable we are passing is the actual file that we need to upload and the second argument it will be having the result variable here just surround this with the parentheses so this will contain the result if it is successful or not so this will be arrow function basically you can see that this is callback function which will contain the result if the file upload is successful or not so here we will check here you pass it to the resolve function in set of curly brackets you can write here you are so this will be the actual URL of the uploaded file so this we can access by result dot URL and the second property it has is the actual ID which we can access as result dot public underscore ID that's it now it also takes a second property guys so right here then you just put a comma here put a comma and after that just put a set of curly brackets so inside this we have some more properties which is resource just right is resource type colon and inside this just right or to here in double quotes comma and the second property will be folder to folder so which folder we are passing here so in this case we are passing the uploads folder so we just need to initialize it to the folder property that's it so this is our cloud very towards file guys which is ready here and now we just need to export we are exporting this into a uploads method so now we can include this file cloud method or shares and use this X simple uploads method inside of a server or Cheers so now after that guys after creating these two files cloud-ready dot J's and Walter or J's you just need to import this inside our server or Cheers so just create a new variable of upload and we should be requiring over Walter library here so dot slash Malter and we will be storing this reference inside upload here and similarly it's just create a cloud very variable and we will be storing the references of the file cloud array and also we will be needing the filesystem module so just require it it is a core node.js module you need not have to install it manually and now we are making a simple post request to upload our file to cloud nari so we will use app dot use and here we will be providing our URL so this will be upload images so this is our URL we will be making a post request and the second argument it takes is upload dot array so basically we have made this method upload inside mortared or cheers we are exporting this method here you can see that and we are using Walter method which is array so in order to upload multiple images this array method will be useful so here we will be making a key value which is image so you can just give any name of your choice this is actually a key value but I will be giving as image and put a comma and last argument it takes as a function call which will be asynchronous so I will just write asynchronous and it takes request and response and this will be arrow function so inside this first of all we just need to make a new variable of uploader and we again have to have write async method again which is and put a argument inside this which is path this is arrow function and we will be awaiting cloud Neri dot uploads and inside this we will pass our path comma images so just make this so it will be getting the path on the it will be fetching the path of the images inside our cloud that is over so this will be async function so after that we just need to check that if the request is a post or a get request it is very simple we will just find request dot method and we will check if it is a post method so if it is a post method then we will be making our configuration so inside this if condition we will be making a array of URLs so currently this is empty and on the next line we will be fetching the files which are attached in the post request so this is very easy just make a new variable of files and then we will be ex it by request dot fights so this will get all the files which are passed as an attachment and now we just need to run a simple for loop for Const file of files inside this we just need to get the path so we are using B structuring so we can just get the path of the image so is equal to 5 after that we can just get the new path first of all we just need to upload it so a weight uploader dot we just need to pass in this function which is path here actual path we have just using this variable which we have declared above here so this will contain the path we are just used using this function here that's it after that we just need to write URLs dot push this new path so this will push it inside this URL sorry currently it is empty so now it will push a new entry inside this array after that we just need to delete the file once it is uploaded we can just do it by this module filesystem unlink synchronize and inside this we can just pass the path of the file so once it is uploaded we just need to delete the file from the server and after that guys after this outside the for loop we just need to send out some kind of message to the user response to add status and if it is successful we will pass 200 message and we also want to pass a JSON response inside this we will be having a simple message property which will be message images uploaded successfully that's it and also put a comma and we also need to return the data which will be URL stats it the actual URLs which will be there which will be actual URL of the cloud very so and in the else block if it is not successful so here we just need to write something here which will be very much useful for the user if it is not successful we can just pass a response toward status which will be four or five and we can also send out a some kind of message to the user so here we can just write a error which will be let's suppose images not uploaded successfully that's it and now our application is complete guys so now we just need to check it I will be using a tool called as postman in order to make the post request as they are not using any kind of interface so postman allows us to so I will be having this you can see that postman here so I will be using this tool now guys we are here in inside postman we will be making a simple post request to our application so we will write the URL that is HTTP localhost the port number is 5000 and the URL is upload - images so now just go to body here and select form data because we are uploading images here and now we just need to give this parameter that is image because inside the application let me just show you inside server or J's we are making we are setting this as image upload dot array so whichever name that you have given you should be writing the same name here so image this is the key parameter and here we just need to provide a value so this will be either text or file so we will be selecting file here because we are selecting images so I will just select this image and I will be uploading multiple images as at one time so I will select another image and this time I need to again attach this as Phi and select another image let's suppose I want to upload this image and now if I click the send button guys it hopefully it will upload it on to the server now it is getting some error here because I think that I have made a mistake inside the path just go to Walter or Chia skies here and this method is creating this problem here so just replace this method I think that colon is not allowed inside path so it just replaced this to date dot now that's it and now you will not get any kind of error so just make this change and it will auto reload because we are using node 1 and now if I send the request with these images selected if I send it I think is we have date now is not a constructor or sorry we also need to remove this new keyword also because if it is a method not a constructor and now hopefully if I just send this request here it is uploading here so just wait and now you will see that guys a message has come here in inside JSON that is images uploaded successfully and this is the data URL this is actual URL you can just copy paste the URL here if I go to this URL you will find your image if I just make a send request here get request if I open this you will see that this is my image and now we can just verify it by going to cloud meri website so this will be located inside your images folder if i refresh it you will see that two images will be there you will see that guys this is my two images that I have uploaded right now and in this easy manner we have successfully created how to multiply multiple images to cloud meri website using node.js Express and Malter so thanks very much guys for watching this video if you like this video then please hit the like button and also don't forget to subscribe the channel and I will be in the next video until then thank you very much

Channel: Coding Shiksha

Views: 21,362

Keywords: coding shiksha, cloudinary, cloudinary image upload, cloudinary image upload node.js, upload image cloudinary javascript, cloudinary express js, cloudinary multer, node js cloudinary, node.js cloudinary upload

Id: zeWz_PZIwQg

Length: 29min 2sec (1742 seconds)

Published: Sun Dec 01 2019