How may I upload file with formData to node js with express?

Question

I want to upload the file on the server with some data, and if I'm right, I need to pass the file and all data in formData, and parse on the server side.

I'm also using Multer for parsing body and save the file on the server, but I don't know how to take my text data from my formData, because Multer takes and read-only file without formData with my data from Form.

How I may take all data in Multer or take form data without Multer?

FrontEnd

let file = file[0];
//some file from input

let data = {
  name: 'Jhon',
  job: 'Engener',
  time: 12
}
let formData = new FormData();

formData.append('formData', JSON.stringy(data))

axios.post('someURL', formData);

backend

const multer = require('multer');
const fs = require('fs');

let storage = multer.diskStorage({
  destanation: (req, file, callback) => {
      callback(null, '/files')
  },
  
  filename: (req, file, callback) => {
    callback(null, 'newFile');
  }
});

let upload = multer({storage)};
 
 
api.post('/', upload.any(), (req, res) => {
  
});

Honestly, this question is too broad. Multer does have documentation. We can't tell what you've done wrong without a minimal reproducible example. — Quentin
– Quentin, Commented May 29, 2019 at 11:20

Marcelo Vismari · Accepted Answer · 2019-05-29 11:45:09Z

2

If I understood correctly, the code should treat upload and get some posted data in the same operation. A while ago I wrote this snippet of code that works very well, maybe it helps:

exports.myPostFunction = function (req, res) {
    var multer = require('multer');

    var path = require('path');
    var storage = multer.diskStorage({
        destination: function (req, file, cb) {
            cb(null, process.env.UPLOAD_FOLDER);
        },
        filename: function (req, file, cb) {
            cb(null, path.extname(file.originalname));
        }
    });

    // Treat posted file
    var upload = multer({ storage: storage }).fields([
        { name: 'myImage', maxCount: 1 }, 
    ]);

    upload(req, res, function(err) {
        if (err) {
            // ...
        } 

        // Get posted data:
        var obj = { 
            myField1: req.body.myField1,
            myField2: req.body.myField2
        };

        // ...
     });
};

In front end:

var formData = new FormData();
formData.append("myField1", data.myField1);
formData.append("myField2", data.myField2);
formData.append("myImage", data.image[0]); // myInputFile.files[0]

$.ajax({
    url: 'someURL',
    type: 'put',
    processData: false,
    data: formData,
    success: function(data) {}
});

answered May 29, 2019 at 11:45

Marcelo Vismari

1,1798 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Drop Over a year ago

And that function using in router callback with passing req, res as arguments?

Marcelo Vismari Over a year ago

@Drop, yes! Pass req, res to upload function. I made that because multer first save files and then writes to req the remaining data.

sonseiya Over a year ago

Hi, i did something similar, but it's nowt working. I have router.post('/withimage', alertWithImagePost ); where alertWithImagePost is liket your myPostFunction . It's like it never pass the functions for destination and filename(diskstorage) Did i miss somehing else?

Collectives™ on Stack Overflow

How may I upload file with formData to node js with express?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related