Simple File Upload with Express.js and Formidable in Node.js

Here’s a very simple upload example with express 4+ and formidable. According to Express doc:

In Express 4, req.files is no longer available on the req object by default. To access uploaded files on the req.files object, use a multipart-handling middleware like busboy, multer, formidable, multiparty, connect-multiparty, or pez.

So here’s an example combining the two.

The code is going to save the files you upload in disk under the folder /uploads in the root directory of the project.

1. Setup

Create a new directory for your files. Create two new files called app.js and index.html.
cd into the directory and type npm install --save formidable and npm install --save express.
Use npm init to save these settings.

2. The Code

app.js

var express = require('express');
var formidable = require('formidable');

var app = express();

app.get('/', function (req, res){
    res.sendFile(__dirname + '/index.html');
});

app.post('/', function (req, res){
    var form = new formidable.IncomingForm();

    form.parse(req);

    form.on('fileBegin', function (name, file){
        file.path = __dirname + '/uploads/' + file.name;
    });

    form.on('file', function (name, file){
        console.log('Uploaded ' + file.name);
    });

    res.sendFile(__dirname + '/index.html');
});

app.listen(3000);

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Simple Upload Example</title>
</head>
<body>
<form action="/" enctype="multipart/form-data" method="post">
    <input type="file" name="upload" multiple>
    <input type="submit" value="Upload">
</form>
</body>
</html>
  1. Run the Code
    Go to http://localhost:3000/ to try it out.

10 thoughts on “Simple File Upload with Express.js and Formidable in Node.js”

Leave a Reply

Your email address will not be published. Required fields are marked *