Subir ficheros al servidor

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Usar multer para almacenar temporalmente en la memoria las imágenes:

const storage = multer.memoryStorage({
    destination: "./public/uploads/",
});
const upload = multer({storage})

Multer se usa como un middleware. En el siguiente código, file es el name de un <input type=»file»>

router.post('/uploadavatar', upload.single('file'), asyncHandler(async (req, res) => {

Usar cloudinary.com para almacenar imágenes

import Cloudinary from 'cloudinary';
import {cloud_name, api_key, api_secret} from '../../../application/config/cloudinary';

const {uploader, config} = Cloudinary.v2;

config({cloud_name, api_key, api_secret});

export const uploadStream = (fileBuffer, options) => new Promise((resolve, reject) => {
    uploader.upload_stream(options, (error, result) => {
        if (error) {
            reject(error);
        } else {
            resolve(result);
        }
    }).end(fileBuffer);
});

export const removeFile = public_id => new Promise((resolve, reject) => uploader.destroy(public_id, (err) => {
    if (err) {
        reject(err);
    } else {
        resolve();
    }
}));

Para usar el código anterior utilizaremos:

const result = await uploadStream(req.file.buffer, {folder:'nombre-carpeta', public_id:'nombre-id'})

Usaremos la siguiente función en el lado del cliente (React):

export const uploadImage = async (file, studentId) => {
    let data = new FormData();
    data.append('file', file);
    data.append('studentId', studentId);
    
    const config = {
        headers: {
            'accept': 'application/json',
            'Accept-Language': 'en-US,en;q=0.8',
            'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
        }
    };
    await i.post("/student/uploadavatar", data, config);
}