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-
- Uploading single or multiple image using multer, cloudinary and node.js.
- Uploading an audio file using multer, cloudinary and node.js
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 aserver.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
- Install express using following command.
npm i express
- Setup the express app in the following way.
Once the initial setup is done we will move further with the:-
- Addition of middlewares such as
app.use(express.json())
andapp.use(express.urlencoded({extended: true}));
and connection of mongodb using mongoose inserver.js
file.
- In the following way the routes setup is done.
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.
Now we will use the upload.fields
as a middleware.
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.
Once the setup of Multer, Cloudinary is done we will take a quick peek of the controller.js
.
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
Hurrey!π₯³π₯³ we are successfully receiving the url of both the files.
And also getting the url stored in mongodb.
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)
Super Useful ππ
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??
Sure brother.
Drop the issue you are facing. I will surely look into it
Sure brother