Node Express JS Busboy File Image Upload

Node Express JS Busboy File Image Upload

To upload image file in node express js using busboy; Simply install busboy module in node express js app and use busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {const saveTo = path.join(__dirname, 'uploads', filename.filename); file.pipe(fs.createWriteStream(saveTo)); }); with your application route to upload files in your application.

Busboy is an event-based streaming parser that’s not tied to node 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.

Node.js Upload file using Express js and BusBoy

Steps to upload image file in node express js using busboy library:

Step 1 – Create Node Express js App

Simply open your cmd or terminal window and run the following commands into it to create node expres js application:

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

Step 2 – Install express and Busboy Module

To install express and busboy module; Simply run npm install express and npm install busboy command on cmd or terminal window:

npm install express

npm install busboy

Step 3 – Create File Upload Form

To create a form with a `file input` element that allows us to choose the file and a button to submit the form; like following:

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 with form method.

Step 4 – Create File Upload Route

To create route to upload image file in your node express js application; Like following:

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);    
});

Step 5 – Import Module and Route in Server.js

To create server.js file, and import express, busboy, path and routes into it to upload images files: Like following:

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 = Busboy({ headers: req.headers });
    busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {

      var saveTo = path.join(__dirname, 'uploads/' + filename.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');
});

Step 6 – Start Node Express Js App Server

To run the npm start to run the 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 using Busboy will look 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

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including 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. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

3 replies to Node Express JS Busboy File Image Upload

  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

  2. I get this error:

    Node app is running on port 3000
    TypeError: Busboy is not a constructor
    at /home/felipe/Desktop/myapp/server.js:19:18
    at Layer.handle [as handle_request] (/home/felipe/Desktop/myapp/node_modules/express/lib/router/layer.js:95:5)
    at next (/home/felipe/Desktop/myapp/node_modules/express/lib/router/route.js:144:13)
    at Route.dispatch (/home/felipe/Desktop/myapp/node_modules/express/lib/router/route.js:114:3)
    at Layer.handle [as handle_request] (/home/felipe/Desktop/myapp/node_modules/express/lib/router/layer.js:95:5)
    at /home/felipe/Desktop/myapp/node_modules/express/lib/router/index.js:284:15
    at Function.process_params (/home/felipe/Desktop/myapp/node_modules/express/lib/router/index.js:346:12)
    at next (/home/felipe/Desktop/myapp/node_modules/express/lib/router/index.js:280:10)
    at expressInit (/home/felipe/Desktop/myapp/node_modules/express/lib/middleware/init.js:40:5)
    at Layer.handle [as handle_request] (/home/felipe/Desktop/myapp/node_modules/express/lib/router/layer.js:95:5)

    • Look, node_modules doesn’t only contain the packages, which you installed, it also contains dependencies of your installed packages. So a good practice is to use lock files as package-lock.json, which will lock every package’s version and every time you run npm install it installs the exact locked versions (to be more precise – with npm ci script). So in this case as I see one of your packages has been updated or maybe that “busboy” package has been updated and after you ran install script it brought to you the updated package (or packages) which involves this error.

Leave a Reply

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