CODEWITHSUNDEEP
node.jsexpress
Frode
Frode

Reputation: 503

Do stuff with multiple files when uploading them using node-formidable with Express

Uploading files with node-formidable on Express is as simple as this

app.post('/upload', function(req, res) {
    // do something with req.files
});

The files are now saved

The form: (multiple="multiple" is a HTML5 feature that allows users to select multiple files to upload)

<form method="post" enctype="multipart/form-data" action="upload">
    <input type="text" name="title"/>
    <input type="file" name="upload" multiple="multiple"/>
    <input type="submit" value="upload" id="s3form_submit"/>
</form>

If i add this line to the upload code

console.log(req.files.upload.path);

When uploading one file, the path shows up in the console. But when I upload more than one file it just says undefined in the console. How do I get the log stuff for each file? Using a for loop?

The node-formidable example on GitHub logs every file when you upload several: https://github.com/felixge/node-formidable/blob/master/example/upload.js (I tried using this code in Express, didn’t work) It does exactly what I want, but how do I do this in an Express app?

Upvotes: 10

Views: 20048

Answers (2)

Frode
Frode

Reputation: 503

It works by moving the line below to the bottom of the app.configure function. Read about the importance of order regarding middleware in Express here: http://expressjs.com/guide.html#middleware

app.use(express.bodyParser({ uploadDir:__dirname + '/public/uploads' }));

And by using this handler:

app.post('/upload', function(req, res){
    var form = new formidable.IncomingForm(),
    files = [],
    fields = [];
    form.on('field', function(field, value) {
        fields.push([field, value]);
    })
    form.on('file', function(field, file) {
        console.log(file.name);
        files.push([field, file]);
    })
    form.on('end', function() {
        console.log('done');
        res.redirect('/forms');
    });
    form.parse(req);
});

Upvotes: 13

rfunduk
rfunduk

Reputation: 30442

So req.files could be an array. Try doing console.log(req.files) in the handler and see what it looks like... But I think you're better off just doing it like in their example. You can get it to work by just removing the ../test/common require at the top and changing the constants to static values (eg instead of TEST_TMP use __dirname + '/uploads').

The handler:

var form = new formidable.IncomingForm(),
    files = [],
    fields = [];

form.uploadDir = __dirname + '/uploads';

form
  .on('field', function(field, value) {
    console.log(field, value);
    fields.push([field, value]);
  })
  .on('file', function(field, file) {
    console.log(field, file);
    files.push([field, file]);
  })
  .on('end', function() {
    console.log('-> upload done');
    res.writeHead(200, {'content-type': 'text/plain'});
    res.write('received fields:\n\n '+util.inspect(fields));
    res.write('\n\n');
    res.end('received files:\n\n '+util.inspect(files));
  });
form.parse(req);

The files are now in __dirname + '/uploads' named as per the output on the console (and to the response, as you can see in the end handler).

Upvotes: 3

Related Questions