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;

Did you ever figure this one out? I'm running into the exact same issue and can't see why it won't work.I've been trying to get it working for days. — St3ph3n92, Feb 25 '23 at 18:13

score 1 · Answer 1 · answered May 25 '22 at 19:43

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;

I'm getting this error using your code:: ```node:internal/process/promises:279 triggerUncaughtException(err, true /* fromPromise */); ^ [UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "# — Ronice Yemeli, May 26 '22 at 08:31

score 1 · Answer 2 · answered Mar 11 '23 at 11:26

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

score 0 · Accepted Answer · answered Aug 10 '23 at 17:20

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 });
    }
};

I can't upload an image using ESM for cloudinary

3 Answers3