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.

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

      1. hi I did so
        let MB = 1024 * 1024;
        let form = new formidable.IncomingForm();
        form.maxFileSize = 1000 * MB;//default maxFileSize is 200MB
        form.multiples = true;//default false

        Reply

      1. But I could’n figure out how to store other form fields with the file with multer. Also how do not upload file in formidable if it is not chosen? It seems like empty file it is uploaded anyway in temp directory.

        Reply

  12. yeah great work !!!
    thank you very much !
    it’s the simplest way to upload with nodeJs, im using it for upload from angular4 and it work like a charm!!

    kiss bambi mom for me :p

    Reply

  23. 美女，你好，请问 File.toJSON 方法这么用呢？
    我使用它返回文件的信息，报错了
    C:\Users\Administrator\Desktop\node实战\04-Chapter\4-4-static.js:285
    let fileIfno = formidable.File.toJSON();
    ^

    TypeError: Cannot read property ‘toJSON’ of undefined

    npmJS 上没有看到使用这个函数的例子。

    Reply

    1. 你的这个file对象是不是上传拿到的File对象？你看这里的实现，File对象是有toJSON这个方法的：https://github.com/felixge/node-formidable/blob/master/lib/file.js#L37

      Reply

  25. I don’t even know how I finished up right here, however I thought this put up was great. I don’t know who you are however certainly you’re going to a famous blogger should you aren’t already 😉 Cheers!

    Reply

  28. Hi Shiya, I have a question regarding your express/node coding blog on how to upload files. I am very new to this and I am working on a school project where I am using this app that captures emg data on a local http server. However, I cannot upload the data because the size of the file is too large. Any thoughts on how to increaes the payload post limit through express.js? Thank you

    Reply

  31. i needed to move the res.sendFile() to the form.on(‘file’) callback as node was dropping the connection before the end of a larger file

    Reply

  32. So what’s happening here is a couple of things. On a POST call to the web root, Express instantiates an IncomingForm on our Formidable object. It then looks for any file elements within passed form data (in the req uest object) and uploads them to a folder called uploads. It then logs to the console that it’s done this before showing the user the index.html page.

    Reply

Leave a Reply to mejdan Cancel reply

Your email address will not be published.