Let’s get started, shall we…
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
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
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.