How To Upload Image File in Node.js Express?

For teams turning “How To Upload Image File in Node.js Express?” into a repeatable delivery task, the complete guide can document setup, troubleshooting and review time; managers should interpret those records alongside reliability and completed work, not as a stand-alone score.

Package and operating-system behaviour can change, so verify the commands and supported versions through the Node.js project before running them on a production host.

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/