Reputation: 1
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