Question 215239 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why doesn't my formidable code work with node js (upload an image and have the code respond according to the user's action)?

How are you? [Hola. ¿Cómo están?]

I’m watching bluuweb’s node course and in it they do a practical exercise ((I mean exactly this one: https://www.youtube.com/watch?v=iU3mnrw48I0&list=PLCB86r2r1iKKmz21UIlZjQieBF7ljb6Qu&index=80).
[Estoy viendo el curso de node de bluuweb y en él realizan un ejercicio practico (me refiero exactamente a este: https://www.youtube.com/watch?v=iU3mnrw48I0&list=PLCB86r2r1iKKmz21UIlZjQieBF7ljb6Qu&index=80).]

This is the code for minute 39 specifically: [Este es el código de específicamente el minuto 39:] 

const formidable = require("formidable");

const cambiarFotoPerfil = (req, res) => {
    const form = new formidable.IncomingForm();
    form.maxFileSize = 5 * 1024 * 1024;

    form.parse(req, async (err, fields, files) => {

        try {
            
            if (err) {
                throw new Error('Falló formidable')
            }

            console.log(fields);
            console.log(files.myFile)

            const file = files.myFile;

            if(file.originalFilename === ""){
                throw new Error('No se seleccionó ninguna imagen')
            }
            
            if(!['image/jpeg', 'image/png'].includes(file.mimetype)){
                throw new Error('Por favor agrega una imagen con formato .jpg o png')
            }

            if(file.size > 5 * 1024 * 1024){
                throw new Error('La imagen debe ser de máximo 5MB')
            }

            req.flash("mensajes", [{ msg: "Ya se subió la imagen" }]);
            return res.redirect('/perfil');
            
        } catch (error) {
            console.log(error);
            req.flash("mensajes", [{ msg: error.message }]);
            return res.redirect("/perfil");
        }
    });
};

module.exports = {
    formPerfil,
    cambiarFotoPerfil
}

This is the HTML: [Este es el HTML] 

<form action="/perfil?_csrf={{csrfToken}}" method="post" enctype="multipart/form-data">
    {{!-- <input type="hidden" name="_csrf" value="{{csrfToken}}" /> --}}
    <input class="form-control form-control-sm mb-2" type="file" id="formFileSm" name="myFile" />
    <button class="btn btn-dark">Cambiar foto</button>
</form>

The problem is that if I don’t send any files it jumps to the error ‘Failed great’ and ignores the rest. And when I send a jpg or png file I get the error ‘Please add an image in .jpg or png format? although it is supposed to comply with the format.
[El problema es que si no envío ningún archivo me salta al error ‘Falló formidable’ e ignora el resto. Y cuando envío un archivo jpg o png me salta al error ‘Por favor agrega una imagen con formato .jpg o png? aunque se supone que cumple con el formato.]

I tried to remove the code: [Intenté eliminar el código:] 

if (err) {
      throw new Error('Falló formidable')
}

but it jumped to an error ‘Cannot read properties of undefined (reading ‘originalFilename’)’ [pero saltaba a un error ‘Cannot read properties of undefined (reading ‘originalFilename’)’].

I also tried uninstalling formidable and reinstalling it but nothing changed. I don’t know if it’s a syntax problem or a formidable bug. [También intenté desisntalar formidable y volverlo a instalar, pero nada cambió. No sé si es problema en la sintaxis o un fallo de formidable.].

I would appreciate your help. [Les agradecería mucho su ayuda].

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    How are you?

    Finally I found a solution. This is my new script:

    const {formidable} = require("formidable");

const cambiarFotoPerfil = (req, res) => {

    const form = formidable({});
    form.maxFileSize = 5 * 1024 * 1024; // 5MB

    form.parse(req, async (err, fields, files) => {
        if (err) {
            req.flash("mensajes", [{ msg: "Falló formidable" }]);
            return res.redirect("/perfil");
        }

        **const file = files.myFile[0];**

        try {
            // console.log(fields);
            console.log(file)

            console.log(file.originalFilename)

            if(file.originalFilename === ""){
                throw new Error('No se seleccionó ninguna imagen')
            }
            
            if(!['image/jpeg', 'image/png'].includes(file.mimetype)){
                throw new Error('Por favor agrega una imagen con formato .jpg o png')
            }

            if(file.size > 5 * 1024 * 1024){
                throw new Error('La imagen debe ser de máximo 5MB')
            }

            req.flash("mensajes", [{ msg: "Ya se subió la imagen" }]);
            return res.redirect('/perfil');
            
        } catch (error) {
            console.log(error);
            req.flash("mensajes", [{ msg: error.message }]);
            return res.redirect("/perfil");
        }
    });
};

    If you can see, in const file = files.myFile[0]; I added the [0].


  2. 0

    Looks like the error you get is caused on the line:

    if(file.originalFilename === ""){

    You’re trying to access a originalFilename property of a file object. But as far as I can tell, file does not exist in your code. Earlier, in your form.parse function you are passing files argument:

    form.parse(req, async (err, fields, files) => {

    I’m guessing that this is only a typo: use either file or files.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search