Node js Express Upload File Example Tutorial

Nodejs express file/image upload example; In this tutorial,i am going to show you how to upload image and file in node js express using busboy library.

Busboy is an event-based streaming parser that’s not tied to Express.js. Instead of storing intermediate files, it provides a stream to the incoming file. It’s been around since 2013. The core multipart/form-data implementation has been extracted to a separate dicer module.

In this tutorial; i will create a simple html markup form for display file/image upload form. Then i will install busboy library to store file/image into node js express app directory.

Node JS Express File Upload Using Busboy

  • Step 1 – Create New Node Js Application
  • Step 2 – Install Express and Busboy
  • Step 3 – Create index.js file and Import Libraries
  • Step 4 – Create HTML Markup File Upload
  • Step 5 – Run Node js Express File Upload App

Step 1 – Create New Node Js Application

Open your command prompt and execute the following command on it to create a new node js application:

mkdir my-app
cd my-app
npm init

Step 2 – Install Express and Busboy

Install express and busboy library into your node js express application by executing the following command on command prompt:

npm install express
npm install busboy

Step 3 – Create index.js file and Import Libraries

Create index.js and import the above installed libararies. So visit your app root directory and create route for showing image upload and store image into directory, as shown below:

var http = require('http'),
    express = require('express'),
    Busboy = require('busboy'),
    path = require('path'),
    fs = require('fs');
 
var app = express();
 
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'file-upload.html'));
});

app.post('/file-upload', 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(3000);

Step 4 – Create HTML Markup File Upload

Create html markup for file upload form; so visit your app root directory and create create file-upload.html file and add the following code into it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Node JS Express File Upload - Laratutorials.Com</title>
    <style>
        body{
            padding: 0;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        .container{
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            text-align: center;
        }

        [type="file"]{
            border: 1px solid #cccccc;
            background: #f9f9f9;
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            font-size: 18px;
            border-radius: 2px;
        }
        [type="submit"]{
            cursor: pointer;
            font-size: 16px;
            background: #5d13e7;
            color: #ffffff;
            padding: 10px 20px;
            border: 1px solid rgba(0,0,0,.1);
            border-radius: 3px;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        }

    </style>
</head>
<body>
    <div class="container">
        <h1>Node.js File Upload</h1>

        <form action="file-upload" method="POST" enctype="multipart/form-data">
            <input type="file" name="filetoupload" required>
            <input type="submit" value="Upload">
        </form>
        
    </div>
</body>
</html>

Step 5 – Run Node js Express File Upload App

Open your command prompt and execute the following command to run node js express file upload application:

//run the below command

node index.js

Conclusion

In this tutorial you have learned how to upload file/image in Node.js Express App.

One Comment

  1. mark j hubrich said:

    Hi, great tutorial. How can I edit to allow multiple files selected? It will only allow me to upload one file at a time.

    Thanks

    September 27, 2019
    Reply

Leave a Reply

Your email address will not be published.