Overview

In this node js files/image upload tutorial, you will learn how to upload files/image in node js express framework using busboy package.

File upload is the basic requirement of any application. Here we will demonstrate how to upload files in node js express framework.

So let’s get started with the file upload in node js express

We are using node js express framework and busboy to handle the form, you can use any other framework as per your requirement

Dependencies

• express
• busboy

First install dependencies

Run the below command to install the dependencies

npm install express
 
npm install busboy

Export Dependencies

var express = require('express'),
var Busboy = require('busboy')

Create Form

To upload a file we need a form. We will create a form with a `file input` element that allows us to choose the file and a button to submit the form.

app.get('/', function (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();
})

Make sure your form must have enctype="multipart/form-data"attribute and form method should be post

Handle Form Submit

Here we will handle the form, We will parse the form and store the file in the folder. To send the file in the server we must have the post method in the form. We will create a route with the post method

app.post('/fileupload', function (req, res) {
    var busboy = new Busboy({ headers: req.headers });
    busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {
  
      var saveTo = path.join(__dirname, 'uploads/' + filename);
      file.pipe(fs.createWriteStream(saveTo));
    });
  
    busboy.on('finish', function() {
      res.writeHead(200, { 'Connection': 'close' });
      res.end("That's all folks!");
    });
      
    return req.pipe(busboy);    
});

After completing the above steps your file will look like this

var http = require('http'),
    express = require('express'),
    Busboy = require('busboy'),
    path = require('path'),
    fs = require('fs');
  
var app = express();
  
app.get('/', function (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();
})
  
app.post('/fileupload', function (req, res) {
    var busboy = new Busboy({ headers: req.headers });
    busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {
  
      var saveTo = path.join(__dirname, 'uploads/' + filename);
      file.pipe(fs.createWriteStream(saveTo));
    });
  
    busboy.on('finish', function() {
      res.writeHead(200, { 'Connection': 'close' });
      res.end("That's all folks!");
    });
  
    return req.pipe(busboy);    
});
  
app.listen(8080);

Click to know more about the express

See the preview of node js file upload:

Conclusion

In this tutorial, you have learned how to upload files and images in node js express framework.