I am Hack Sparrow
Captain of the Internets.

Handle File Uploads in Express (Node.js)

How to handle file uploads in Express Node.js framework

Handling file uploads was a pain in Node.js some time ago. Then came formidable. It was a good start but uploading files was still not easy. Then came connect-form which made things a little easier, based on which I wrote a tutorial on handling POST requests in Express.

In the rapidly progressing Node.js landscape, it wasn't going to be long before the crucial file uploading functionality would become actually very easy. The time has come now - handling file uploads in very easy now in Express.

You no more require any extra module to work with file uploads in Express. File upload now works right out of the Express box. Along with req.body, now you have req.files which contains the details about the files you have uploaded.

If you don't want to specify the upload directory, you are all set to start processing file uploads without any additional changes to app.js. The files are uploaded to "/tmp" by default. If you want to make sure the files are uploaded to a specific directory, you change this




The express.bodyParser config option can found on line 16 as of Express v2.5.4. In the above example, the files will be uploaded to a directory named "uploads" in the same dir as the Express app.

To get a better idea about how the file upload and POST submission can be handled, let's create a form:

<form method="post" enctype="multipart/form-data" action="/file-upload">
<input type="text" name="username">
<input type="password" name="password">
<input type="file" name="thumbnail">
<input type="submit">

To handle the form submission, let's create a route:

app.post('/file-upload', function(req, res, next) {

It's that simple now!

In the above example, we can access the file from the req.files.thumbnail object. The object name is dependent what you set the name attribute to in your HTML form. In our case we set it as "thumbnail", so we access it from req.files.thumbnail.

A file object has these commonly useful properties:

size - size of the file in bytes
path - the uploaded location of the file (files are renamed after uploading)
name - original name of the file (as on your hard disk)
type - the type of the file

To know the size of the file in our case: req.files.thumbnail.size
To know the original name of the file in our case: req.files.thumbnail.name

Note that the "uploads" directory is just the temporary upload directory; you will need to move the files to their respective intended locations once they are uploaded there. Following is an example of doing that. In this case we will be uploading the files to the "images" directory.

// we need the fs module for moving the uploaded files
var fs = require('fs');
app.post('/file-upload', function(req, res) {
    // get the temporary location of the file
    var tmp_path = req.files.thumbnail.path;
    // set where the file should actually exists - in this case it is in the "images" directory
    var target_path = './public/images/' + req.files.thumbnail.name;
    // move the file from the temporary location to the intended location
    fs.rename(tmp_path, target_path, function(err) {
        if (err) throw err;
        // delete the temporary file, so that the explicitly set temporary upload dir does not get filled with unwanted files
        fs.unlink(tmp_path, function() {
            if (err) throw err;
            res.send('File uploaded to: ' + target_path + ' - ' + req.files.thumbnail.size + ' bytes');

You can set the upload destination to anywhere in the OS where you have access to. In case you want the files to be publicly available they should be uploaded within the "public" directory of Express. If want to upload the files to any sub-directory with "public", make sure they already exist else you will run into "Error: ENOENT, no such file" or directory error.

That's it! Handling file uploads in very easy in Express now. In case your old app is not handling file uploads as expected, try updating to the latest version of Express and NPM, and re-create the app. Any queries, suggestions; ping me in the comments.

60 Responses to “Handle File Uploads in Express (Node.js)”

  1. tung says:

    Thanks for your information.
    I have a question, I using xmlhttprequest to upload file to node js server run multer, but now i use xmlhttprequest.abort() to cancel upload, so should i do?

  2. reachlin says:

    you only need to unlink a file if rename fails

  3. Mason says:

    On the last blob of code you left out the ending ‘)’ before the semicolon on the last line.

    Thanks for the tutorial,

  4. bilal says:

    now i got it..can you please help me that how to access those files that user upload to directory…??any code??

  5. dahuchao says:

    In http://expressjs.com/4x/api.html#req

    “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.”

  6. vaghanijanak says:

    finally i got suuceessfully file upload
    thank you so mush

  7. Vinayagaperumal says:

    Thanks for making the article super awesome!

    Compact and informative.

  8. Vinayagaperumal says:

    Will it be supported in Express 4.x ?

  9. Vinayagaperumal says:

    …and what is the best practice to store images in server form plenty of options available?

  10. Sridhar says:

    Thanks dude very useful and i got successfull upload

Make a Comment