How to parse formdata on node serverside?

Question

I'm using nodejs, REACT, express, axios. I want to make upload function, but I can't. When I upload file, server cannot parse the uploaded file (only shows {} log).

Below is my frontend code

When user click UPLOAD button on form element, 'handleSubmit' function is called, and 'handleSubmit' calls 'fileUploadRequest' function.

In 'fileUploadRequest' function, everything is good. I can see infomations of attached file.

<form onSubmit={this.handleSubmit} encType='multipart/form-data'>
                    <input type="file" onChange={this.handleChange}/>
                    <input type="submit" value="UPLOAD"/>
</form>

export function fileUploadRequest(username, uploadFile, uploadFileName) {
    return (dispatch) => {
        dispatch(fileUpload());

        let formData = new FormData();
        formData.append('fileName', uploadFileName);
        formData.append('fileHandler', uploadFile);

        return axios.post('/upload/upload', {formData})
        .then((response) => {
            dispatch(fileUploadSuccess());
        }).catch((error) => {
            dispatch(fileUploadFailure());
        });
    };
}

below is backend code.

router.post('/upload', (req, res) => {

    console.log(req.body.);

    var form = new formidable.IncomingForm();
    form.parse(req, (err, fields, files) => {
        console.log('parse');
        console.log(fields);
        console.log(files);
    });
});

on req.body log, I can see only '{ formData: {} }' log.

'fields' and 'files' are all '{}' on log

How can I parse attached file on server?

kadiks kadiks · Accepted Answer · 2017-04-30T13:12:19

Use multer for Express to handle the uploaded file. Then use req.file to access all data about the uploaded file.

const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

...

router.post('/upload', upload.single('fileHandler'), (req, res) => {
  console.log('req.file.filename', req.file.filename); // the filename will be generated by multer
  console.log('req.body.fileName', req.body.fileName); // to access the filename you created at the upload
});

How to parse formdata on node serverside?

2 Answers