NachoK66
NachoK66

Reputation: 1

Cloudinary uploading picture correctly but node catches an error

I am trying to create a web prototype for an exam which requires to upload images to the cloud, so I chose Cloudinary. The problem I am encountering is that, when I make the following axios request to upload the image

await axios.post(`${VITE_PICTURES_API_HOST}/subirFoto`, formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });

the backend receives it and uploads it to Cloudinary correctly (shows in the Cloudinary console), but when I get the result, the program detects it as an error and goes to the 'catch'. The contents of "result" seems to be, however, the expected response for a successful upload. This is the code for the Cloudinary upload microservice:

const { v2: cloudinary } = require('cloudinary');
const streamifier = require('streamifier')
const dotenv = require('dotenv');
dotenv.config();

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

let streamUpload = (req) => {
    return new Promise((resolve, reject) => {
        if (!req.file || !req.file.buffer) {
            return reject(new Error("No file provided or buffer is empty"));
        }

        let stream = cloudinary.uploader.upload_stream(
            (result, error) => {
                if (result) {
                    console.log("Result: ", result);
                    console.log('Imagen subida a Cloudinary');
                    resolve(result);
                } else {
                    console.error('Error al subir la imagen a Cloudinary:', error);
                    reject(error);
                }
            }
        );

        console.log('Subiendo imagen a Cloudinary...');

        streamifier.createReadStream(req.file.buffer).pipe(stream);
    });
};

const upload = async (req, res) => {
    try {
        let result = await streamUpload(req);
        console.log('Imagen subida correctamente: ', result.url);
        res.status(200).json({ message: 'Imagen subida correctamente', imageUrl: result.secure_url });

    } catch (error) {
        console.error('Error al subir la imagen: ', error)
        res.status(500).json({ message: 'Error al subir la imagen:', error });
    }
};

module.exports = {
    upload
}

and these are the contents of error (urls changed to pass the spam filter...):

{
asset_id: 'c3312469757b47fb679677f6bdf2dc17', 
public_id: 'rj56fhmrloocseckxoya',
version: 1737931940,
version_id: '3c5ecd0b239df6892c90afc6767b0591',
signature: '1c33663bdbff77c15cccc07737c5e07dccd1c62f',
width: 688,
height: 649,
format: 'jpg',
resource_type: 'image',
created_at: '2025-01-26T22:52:20Z', 
tags: [],
bytes: 24229,
type: 'upload',
etag: 'dedfeec2071cc37af05dc262b18a6153',
placeholder: false,
url: 'WORKING_PICTURE_URL',
secure_url: 'WORKING_SECURE_PICTURE_URL',
asset_folder: '',
display_name: 'rj56fhmrloocseckxoya',
original_filename: 'file',
api_key: '122927128446869'
}

and the axios error:

{
    "message": "Request failed with status code 500",
    "name": "AxiosError",
    "stack": "AxiosError: Request failed with status code 500\n    at settle (http://localhost:5173/node_modules/.vite/deps/axios.js?v=b1cb4d00:1235:12)\n    at XMLHttpRequest.onloadend (http://localhost:5173/node_modules/.vite/deps/axios.js?v=b1cb4d00:1566:7)\n    at Axios.request (http://localhost:5173/node_modules/.vite/deps/axios.js?v=b1cb4d00:2124:41)\n    at async uploadFileToCloudinary (http://localhost:5173/src/services/uploadService.js?t=1737929778888:20:22)\n    at async handleFileUpload (http://localhost:5173/src/views/HomeView.vue?t=1737929778888:51:24)",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http",
            "fetch"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "Content-Type": "multipart/form-data"
        },
        "method": "post",
        "url": "http://localhost:4000/cloudinary/subirFoto",
        "data": {}
    },
    "code": "ERR_BAD_RESPONSE",
    "status": 500
}

Upvotes: 0

Views: 26

Answers (0)

Related Questions