DEV Community

Cover image for The easiest way of uploading image and audio files together using Multer, Cloudinary, and Node.js.
FARHAN KHAN
FARHAN KHAN

Posted on

The easiest way of uploading image and audio files together using Multer, Cloudinary, and Node.js.

The project listπŸ“ƒ of a backend web developer always includes projects on REST API and other websites projects such as E-commerce with fully functional backends. One main functionality of these kinds of projects is file uploading such as image, audio, video, etc.

When working with MERN stack one of the most common and popular way of uploading a file is using-

The most probable solutions for uploading a file found on the internet are-

You have to search a lot to find the perfect solution for uploading the image and audio file together using multer, cloudinary and node.js.

I hope that this blog of mine is going to help most of the backend web developers for easily uploading the image and the audio file together using multer, cloudinary and node.js.

Prerequisites

  • Node.js and Express.js
  • Multer
  • Cloudinary

Let us start with uploading the image and audio file

First of all let's setup the express app. Following are the steps to create an express app.

  • Create a folder server which contains a server.js file which will be the root file.

  • Run the following command to initiate the node modules.



npm init
npm i
npm i node-modules


Enter fullscreen mode Exit fullscreen mode
  • Install express using following command.


npm i express


Enter fullscreen mode Exit fullscreen mode
  • Setup the express app in the following way.

Image description

Once the initial setup is done we will move further with the:-

  • Addition of middlewares such as app.use(express.json()) and app.use(express.urlencoded({extended: true})); and connection of mongodb using mongoose in server.js file.

Image description

  • In the following way the routes setup is done.

Image description

Now lets setup the Multer file which is in the middlware folder.
For uploading the image and audio file together we are going to use a third party dependency namely multer-storage-cloudinary

In the following way the multer setup is done using the third party dependency.

Image description

Now we will use the upload.fields as a middleware.

Image description

We are also going to setup the cloudinary in the cloudinaryconfig.js file so as to use it as a middleware in the server.js file.

Image description

Image description

Once the setup of Multer, Cloudinary is done we will take a quick peek of the controller.js.

Image description

In the uploadcontrol.js file:-

  • First of all we have created an async function namely Create.
  • Then we have stored the path of both the image and the audio file in the constants imageurl and audiourl.
  • In the last step we have stored the value of both imageurl and audiourl in the Uploads db.

Once the entire setup is done we will check the upload request on Postman

Image description

Hurrey!πŸ₯³πŸ₯³ we are successfully receiving the url of both the files.
And also getting the url stored in mongodb.

Image description

So I hope that this tutorial is going to help all the backend web developers out there in uploading the image and audio file together using Multer, Cloudinary and Node.js

Top comments (5)

Collapse
 
bhanu1776 profile image
Bhanu Sunka

Super Useful 😍😍

Collapse
 
ajinkya_kingre profile image
Ajinkya Kingre

dude, I am also using multer to upload audio file for my media-player-app but its not working properly.
can you please help me??

Collapse
 
itsfarhankhan28 profile image
FARHAN KHAN

Sure brother.

Collapse
 
itsfarhankhan28 profile image
FARHAN KHAN

Drop the issue you are facing. I will surely look into it

Collapse
 
itsfarhankhan28 profile image
FARHAN KHAN

Sure brother