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.

34 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

      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.

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

  2. 美女,你好,请问 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 上没有看到使用这个函数的例子。

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

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.