Node js Express Upload File/Image Tutorial with Example

Node js Express Upload File/Image Tutorial with Example

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

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.

It’s easy to setup busboy and start reading the incoming request. But, it’s a little trickier to terminate busboy and prevent reading the request any further. You might need to prematurely terminate the processing in case an internal error happens in your app or you notice the received data is invalid. Then you’d want to send the HTTP response as soon as possible and not waste any resources processing the request further.

File upload in node js express using busboy example tutorial will teach you step by step on how to upload files in node js express framework with busboy library.

File upload in node js express

  • Step 1 – Create Node Express js App
  • Step 2 – Install express and Busboy dependencies
  • Step 3 – Create File/image Upload Form
  • Step 4 – Create Server.js File
  • Step 5 – Start Node Express Js App Server

Step 1 – Create Node Express js App

Execute the following command on terminal to create node js app:

mkdir my-app
cd my-app
npm init -y

Step 2 – Install express and Busboy dependencies

Execute the following command on terminal to install express and busboy dependencies:

npm install express

npm install busboy

Step 3 – Create File/image Upload Form

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

Step 4 – Create Server.js File

Create server.js file and import express, busboy, path dependencies in server.js; as shown below:

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);    
});
 
// port must be set to 3000 because incoming http requests are routed from port 80 to port 8080
app.listen(3000, function () {
    console.log('Node app is running on port 3000');
});

Click to know more about the express

Step 5 – Start Node Express Js App Server

You can use the following command to run development server:

//run the below command

npm start

after run this command open your browser and hit 

http://127.0.0.1:3000/

Node js Express Upload File/Image Tutorial with Example will looks like:

node js file upload preview

Conclusion

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

Recommended Node JS Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

One reply to Node js Express Upload File/Image Tutorial with Example

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

Leave a Reply

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