I can't upload an image using ESM for cloudinary

Question

I have a problem in this part of my code,with COMMONJS and it's working, my question is how can I make it work on ESM, I've tried this but not workiing :

import express from 'express';
const router = express.Router();
import cloudinary from 'cloudinary';
import { unlinkSync } from 'node:fs'; 

 const router = require('express').Router();
const cloudinary = require('cloudinary');
const { unlinkSync } = require('node:fs');

// we will upload image on cloudinary
cloudinary.config({
    cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
    api_key: process.env.CLOUDINARY_API_KEY,
    api_secret: process.env.CLOUDINARY_API_SECRET
});

// Upload image only admin can use
router.post('/upload',  (req, res) => {
    try {

        cloudinary.v2.uploader.upload(file.tempFilePath, { folder: 'test' }, async (err, result) => {
            if (err) throw err;
            removeTmp(file.tempFilePath);

            res.json({ public_id: result.public_id, url: result.secure_url });
        });
    } catch (err) {
        return res.status(500).json({ msg: err.message });
    }
});

const removeTmp = (path) => {
        unlinkSync(path, err => {
            if(err) console.log('this is the error',err);;
        });
        console.log(`successfully deleted ${path}`);

};
module.exports = router; 

Answer 1

so basically, I separated my route with my controller an put the cloudinary config inside the scope of the function:

import { v2 as cloudinary } from 'cloudinary';
import { unlink } from 'node:fs';

export const postImage = (req, res) => {
    cloudinary.config({
        cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
        api_key: process.env.CLOUDINARY_API_KEY,
        api_secret: process.env.CLOUDINARY_API_SECRET
    });

    try {
        if (!req.files || Object.keys(req.files).length === 0) return res.status(422).json('no files uploaded');

        const file = req.files.file;
        if (file.size > 1024 * 1024) {
            removeTmp(file.tempFilePath);
            return res.status(400).json({ msg: 'size too large' });
        }
        if (file.mimetype !== 'image/jpeg' && file.mimetype !== 'image/png') {
            removeTmp(file.tempFilePath);
            return res.status(400).json({ msg: 'this file format is not supported' });
        }
        cloudinary.uploader.upload(file.tempFilePath, { folder: 'sotef' }, async (err, result) => {
            if (err) throw err;
            try {
                removeTmp(file.tempFilePath);
                res.json({ public_id: result.public_id, secure_url: result.secure_url});
            } catch (err) {
                res.status(400).json({ msg: err.message });
            }
        });
    } catch (error) {
        console.log(error);
        return res.status(500).json({ msg: error.message });
    }
};

Answer 2

Try this one :

import express from 'express';
import multer from 'multer';
import { v2 as cloudinary } from 'cloudinary';
import streamifier from 'streamifier';
import { isAdmin, isAuth } from '../utils.js';

const upload = multer();

const uploadRouter = express.Router();

uploadRouter.post(
  '/',
  isAuth,
  isAdmin,
  upload.single('file'),
  async (req, res) => {
  
    cloudinary.config({
      cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
      api_key: process.env.CLOUDINARY_API_KEY,
      api_secret: process.env.CLOUDINARY_API_SECRET,
    });
    const streamUpload = (req) => {
      return new Promise((resolve, reject) => {
        const stream = cloudinary.uploader.upload_stream((error, result) => {
          if (result) {
            resolve(result);
          } else {
            reject(error);
          }
        });
        streamifier.createReadStream(req.file.buffer).pipe(stream);
      });
    };
    const result = await streamUpload(req);
    res.send(result);
  }
);
export default uploadRouter;

Answer 3

Okay, so I found what my issue was and it looks like it might be your issue too. My environment variables were coming back as undefined and it turns out that they need to be imported into the file where your config is using import "dotenv/config.js";. Here is the StackOverflow thread for reference: Can't use dotenv with ES6 modules