Node js Express Upload Image File Example – Tuts Make

Upload image file in NodeJS express; In this tutorial guide, you will learn how to upload image file in node js express framework using busboy package.

Create File upload component in Rea…

Please enable JavaScript

Create File upload component in React JS

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.

Upload Image File Node js Express js

Let’s follow the following steps to upload image file in node js express js using busboy library:

• 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:

Conclusion

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

Recommended Node JS Tutorials