DEV Community

Cover image for Handling Image Uploads in Node with Multer and Cloudinary
gilbert-kiana
gilbert-kiana

Posted on

2

Handling Image Uploads in Node with Multer and Cloudinary

Hey there! 👋 I recently ran into a bit of a challenge while creating my portfolio. I had a blog page with cover images, and initially, I used Multer to upload images to a local folder on my server. Everything worked like a charm until I decided to host my site on Render directly from GitHub. The images weren't uploading to GitHub, which wasn't surprising.

I decided to use cloud-based storage and opted for Cloudinary. In this guide, I'll walk you through how I set up Cloudinary on my server integrated it with Multer, and saved the image links to MongoDB.Solving my problem.

I started by installing the dependencies.

npm install multer cloudinary dotenv
Enter fullscreen mode Exit fullscreen mode

Before diving into code, I had to set up Cloudinary account and grab my API key, API secret, and cloud name from the dashboard. I added a .env file in my server's root folder and populated it like this:

CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
CLOUDINARY_CLOUD_NAME=your_cloud_name
Enter fullscreen mode Exit fullscreen mode

Next, I created a utils folder and within it, a file named cloudinary.js to configure my Cloudinary setup:

// utils/cloudinary.js

const cloudinary = require('cloudinary').v2;
require('dotenv').config();

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

module.exports = cloudinary;

Enter fullscreen mode Exit fullscreen mode

Now, in my root folder, I set up a middleware folder, and within it I Created a file named multer.js to configure Multer:

// multer.js

const multer = require('multer');

const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

module.exports = upload;
Enter fullscreen mode Exit fullscreen mode

imported these two files into my post controllers like this:

// Your post controllers file


const cloudinary = require('./utils/cloudinary');
const upload = require('./multer');
Enter fullscreen mode Exit fullscreen mode

Now, in my post route, I can upload a file and wait until it's uploaded using a promise before adding the rest of the form data from the body. Here's how my post route looks:

my post route

my post route body

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)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay