How To Upload Image File in Node.js Express?

Hello Friends,

In Express.js, file upload is slightly difficult because of its asynchronous nature and networking approach. It can be done by using middleware to handle multipart/form-data. There are many middlewares that can be used like multer, connect, body-parser, etc.

There are several Node libraries available on NPM that can simplify the process of validating and uploading files to the server. Among them, the most popular choice these days are Multer, Formidable, and Multiparty.

Step 1: Create Node Express js App

Execute the following command on the terminal to create the 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 the form method should be posted

Step 4: Create Server.js File

Create server.js file and import express, busboy, and 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 the development server:

//run the below command

npm start

After running this command open your browser and hit

http://127.0.0.1:3000/

I hope it can help you...