cloudinary.uploader.upload not working

danny21jaya · April 2023

Hi I'm trying to use Cloudinary to store my images in a MERN stack project. So basically I converted my image upload in the front end to a base64 string, have the data:image/jpeg;base64 removed and send them to my API. Now in my Controller file I wrote something like this:

const postDog =  async(req,res) => {
    const {name, type, age, description, image} = req.body;
    const imageunstripped = 'data:image/jpeg;base64'+image;
    try{
        // console.log(image)
        const result = await cloudinary.uploader.upload(image,{
            overwrite: true,
            invalidate: true,
            resource_type: "auto",
            folder: "Dogs"
        })
        console.log('hello')

        console.log(result);
        const dog = await Dog.create({name, type, age, description, 
            image:{
                public_id: result.public_id,
                url: result.secure_url
            }});
        res.status(200).json(dog)
    }
    catch (error){
        res.status(400).json({error: error.message})
    }
}

So I want to upload the base64 image to my Cloudinary, and have the result's public_id and secure_url stored in my MongoDB, but I kept being thrown to the catch error, so I tried console.log in my try block to see where the code went wrong and I saw that my console.log('hello') is not running so it must be the await cloudinary.uploader.upload function that went wrong. I'm not sure what I did wrong though because I've read multiple solutions and felt that I did the same way.

For context, I thought that cloudinary should send the image base64 with the data:image/jpeg;base64 included in the string so I tried adding them to the imageunstripped const and upload them to cloudinary but nothing changes.

I also thought that maybe the problem is in my cloudinary config, but I'm not sure I just followed the website's config

My cloudinary.js file looks like this:

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

// Configuration 
cloudinary.config({
    cloud_name: process.env.CLOUD_NAME,
    api_key: process.env.CLOUD_KEY,
    api_secret: process.env.CLOUD_KEY_SECRET

});

module.exports = cloudinary;

I also thought maybe my CLOUD_NAME, CLOUD_KEY, and CLOUD_KEY_SECRET was inputted incorrectly, but I tried both keys with enclosing them in " " (as how copying from the cloudinary is) and also removing the " " in the env file.

So I expect that my result can be used to get the public id and the secure url for my MongoDB but I kept failing the cloudinary.uploader.upload function.

Anyways this is my first time asking in the community forum and yeah I'm just starting out as a developer so I'm sorry if I said something wrong

SreeCloudinary · April 2023

Hi @danny21jaya ,

Thanks for your post. I see that you are performing everything correctly.

One thing I would change is to add a comma after base64 in the imageunstripped constant variable

Example:

cloudinary.uploader
.upload("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==")
.then(result=>console.log(result));

Please let us know if this works.

Best Regards,

Sree

cloudinary.uploader.upload not working

Best Answer

Categories