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 Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series