Upload image file in NodeJS express busboy; In this tutorial guide, you will learn how to upload image file in node js express framework using busboy package.
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.
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.
node.js – Upload file using Express js and BusBoy
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 Busboy Upload File/Image Tutorial with Example will look like:
Conclusion
In this tutorial, you have learned how to upload files and images in node js express framework.
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
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.