10

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?

2 Answers 2

13

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);
});
3

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.