DEV Community

Cover image for Single and multiple images upload and remove from Cloudinary using Node JS, Multer, MongoDB
MD ARIFUL HASAN
MD ARIFUL HASAN

Posted on • Edited on

4 1

Single and multiple images upload and remove from Cloudinary using Node JS, Multer, MongoDB

This system is working without using the file system of node. And I'm also using Thunder client (VS Code extension) for sending request, but you can also use Postman.

First create an ordinary Node JS application.

This is my folder structure and package.json file. I will be using these packages to do the work.
Image description

Go to Cloudinary and create a free account. After creating an account, you will find CLOUDINARY_NAME, CLOUDINARY_API_KEY, CLOUDINARY_API_SECRET in your account dashboard.

1# .env file
=> This file will contain all of the secret you don't want to show others
Image description

2# cloudinary.js file
=> Connects your application to cloudinary. Remember to use dotenv
Image description

3# cloudinaryAccountStorage.js file
=> This file will create a seperate folder to store all of your images in Cloudinary.
Image description

4# people.js file
=> People schema and people model for mongoose to store data in DB.
Image description

5# message.js file
=> Message schema and message model for mongoose to store data in DB.
Image description

6# server.js file
=> Every file is connected here. Remember to import and use dotenv.
Image description

7# uploadRouter.js file
=> Main routing file of this application. Send different request to different path.
Image description

8# imageUploader.js file
=> Universal image uploader file. Maximum file size, maximum file number, file type, and validation can control using this function.
Image description

9# avatarUpload.js file
=> Sending params to imageUploader.js for file size, file number and file type with error message. Most of the tutorial uses upload.single(), upload.array(), upload.fields() but I'm using upload.any()() to give you some idea how it works
Image description

10# attachmentUpload.js file
=> Sending params to imageUploader.js for file size, file number and file type with error message. Most of the tutorial uses upload.single(), upload.array(), upload.fields() but I'm using upload.any()() to give you some idea how it works
Image description

11# uploadController.js file
=> Structure and async function name of controller function. This file control upload and remove images from Cloudinary. It also sends json data to database.
Image description

11.1# addUser function of uploadController.js
=> Upload single image to Cloudinary and send public_id, secure_url to database of cloudinary upload.
Image description
Result of addUser function
Image description

11.2# deleteUser function of uploadController.js
=> Remove single image from Cloudinary also remove from database.
Image description
Result of deleteUser function
Image description

11.3# sendMessage function of uploadController.js
=> Upload multiple images to Cloudinary and send public_id, secure_url to database as an object of different cloudinary upload.
Image description
Result of sendMessage function
Image description

11.4# removeMsgAndAttachments function of uploadController.js
=> Remove multiple images from Cloudinary also remove from database.
Image description
Result of removeMsgAndAttachments function
Image description

Git repo of this code.
Thank you all.

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay