How to handle file upload in Node.js ?

Last Updated : 16 May, 2022

File upload can easily be done by using Formidable. Formidable is a module that we can install on our project directory by typing the command

npm install formidable

Approach: We have to set up a server using the HTTPS module, make a form that is used to upload files, save the uploaded file into a temporary location by using the Formidable module & finally move that file into our project folder by using File System Module.

Step 1: Require HTTP, Formidable & File System Module

const http = require('http');
const formidable = require('formidable');
const fs = require('fs');

Step 2: Create a form for file upload

http.createServer((req, res) => {
 res.writeHead(200, {'Content-Type': 'text/html'});
 res.write('<form action="fileupload" 
     method="post" enctype="multipart/form-data">');
 res.write('<input type="file" name="filetoupload"><br>');
 res.write('<input type="submit">');
 res.write('</form>');
 return res.end();
}).listen(8080);

Step 3: Upload the file to the temporary folder using the Formidable Module

We have to create a variable for handling Incoming Form Data, then we will parse the data. We will also use the files parameter for getting the details regarding the uploaded file. Such as filepath is used to get the path of the file which is temporarily stored by Formidable Module, originalFilename which is used to get the actual file name of the uploaded file.

var form = new formidable.IncomingForm()
  
form.parse(req, function (err, fields, files) {
     var tempFilePath = files.filetoupload.filepath;
     var projectFilePath = __dirname + '/uploaded_file/' 
         + files.filetoupload.originalFilename;
});

Step 4: Move the uploaded file into the project folder

fs.rename(tempFilePath, projectFilePath, function (err) {
   if (err) throw err;
   res.write('File has been successfully uploaded');
   res.end();
});

App.js

const http = require('http'); 
const formidable = require('formidable'); 
const fs = require('fs'); 
  
http.createServer(function (req, res) { 
    if (req.url == '/fileupload') { 
        var form = new formidable.IncomingForm(); 
        form.parse(req, function (err, fields, files) { 
  
            var tempFilePath = files.filetoupload.filepath; 
            var projectFilePath = __dirname + '/uploaded_file/' + 
                files.filetoupload.originalFilename; 
            fs.rename(tempFilePath, projectFilePath, function (err) { 
                if (err) throw err; 
                res.write('File has been successfully uploaded'); 
                res.end(); 
            }); 
        }); 
    } 
    else { 
        res.writeHead(200, { 'Content-Type': 'text/html' }); 
        res.write( 
'<form action="fileupload" method="post" enctype="multipart/form-data">'); 
        res.write('<input type="file" name="filetoupload"><br>'); 
        res.write('<input type="submit">'); 
        res.write('</form>'); 
        return res.end(); 
    } 
}).listen(8080);