How to upload multiple images using Cloudinary and Node js.

Joshua Lugada
Oct 29, 2019 · 4 min read
source: https://www.lifewire.com/uploading-and-downloading-online-3985950

Hey there, in this article we are going to walk through on how we can upload multiple images at once using Cloudinary, ExpressJS, and NodeJS. Please note that this article assumes that you have working experience of NodeJS and Javascript in general, this article will not cover persisting data in a database or anything like that.

Let’s get started, shall we…

Make sure you have NodeJS installed on your machine or download and install it. Secondly, create an account on Cloudinary if you do not have one already, it is a very quick process.

Great, now that everything is in place, it’s about time we set up our project as well. Open your terminal and run the following sequence of commands

$ mkdir myAPP && cd myApp
$ npm init
$ npm install --save express cloudinary multer body-parser nodemon

After running all the commands successfully our folder structure should look something like this.

Create files called app.js and server.js and paste the following code respectively.

With this code in place, our server should be able to run and all we need to do is head to the package.json file, under scripts, add the following line.

“start”: “nodemon server.js”

nodemon is a tool that will help restart the server in the terminal every time changes are made to the files. Now you can open the terminal and run the command below to make sure that everything is working fine

npm start

Great!!, our server is up and running, now let’s configure multer and cloudinary. But before we can get started, there’s one more package that I’d like us to install and that’s dotenv. As we move forward we shall see why we need it, simply run the command below to install it.

npm install dotenv

Create a file called multer.js, add the following code and let me walk you through it quickly.

We have the storage configuration that determines where the files received by multer will be stored on our server and in this case we have chosen to use the uploads directory so let us create it under the root directory. We then have the fileFilter which is a function that controls which files are accepted and as you can see we are only accepting only .jpeg and .png files. And lastly, we have the limits property which as you might have guessed already is to limit the uploaded data and in our case, we only accept files that are less or equal to 1MB in size.

Now let’s create the cloudinary config file cloudinary.js and add the following code.

We have the cloudinary config method that takes in an object containing the cloud_name, api_key and api_secret. Since this is all sensitive information, it’s not advisable to add it to our configuration as plain text and this is where the dotenv tool comes in handy. It helps access this information through the environment variables. And to do this add a .env file in the root directory and add this code

CLOUD_NAME=<your_cloud_name>
CLOUDINARY_API_KEY=<your_api_key>
CLOUDINARY_API_SECRET=<your_api_secret>

These can be acquired from your cloudinary dashboard if you have an account, just as shown in the image below.

We now create the uploads function that takes in two arguments, file is the path to the file on our server, then folder which is the name of the folder on cloudinary where our images will be stored. This function returns a promise with the url to our image and the public_id. Please note that the response from cloudinary is not limited to those two but in this case, it is all we need.

Okay, we’re almost there. Let’s go ahead and create the endpoint through which we shall receive our files and handle them accordingly. At this point we shall require to update our app.js file to look like below, then I’ll quickly run through the code for you.

So we have created a route and added the multer middleware that receives an array of all the files with the field name of image just like in the screenshot below.

We then loop through the files array while passing the path to each individual file into the uploader function which returns a promise with the url to the image and the public_id that we store in the newPath variable then add it to the urls array and finally we delete the file from our server after it has been uploaded successfully.

Our images were uploaded successfully and can be found in the Images folder. Yaaassss!!!!…

I hope you found this article very helpful, here is the link to the Github repo containing all the code that we have used for this article. Thank you so much for being on this journey with me and happy coding.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store