Nodejs express file/image upload example; In this tutorial,i am going to show you how to upload image and file in node js express using busboy library.
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.
In this tutorial; i will create a simple html markup form for display file/image upload form. Then i will install busboy library to store file/image into node js express app directory.
Node JS Express File Upload Using Busboy
- Step 1 – Create New Node Js Application
- Step 2 – Install Express and Busboy
- Step 3 – Create index.js file and Import Libraries
- Step 4 – Create HTML Markup File Upload
- Step 5 – Run Node js Express File Upload App
Step 1 – Create New Node Js Application
Open your command prompt and execute the following command on it to create a new node js application:
mkdir my-app cd my-app npm init
Step 2 – Install Express and Busboy
Install express and busboy library into your node js express application by executing the following command on command prompt:
npm install express npm install busboy
Step 3 – Create index.js file and Import Libraries
Create index.js and import the above installed libararies. So visit your app root directory and create route for showing image upload and store image into directory, as shown below:
var http = require('http'), express = require('express'), Busboy = require('busboy'), path = require('path'), fs = require('fs'); var app = express(); app.get('/', (req, res) => { res.sendFile(path.join(__dirname, 'file-upload.html')); }); app.post('/file-upload', 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); }); app.listen(3000);
Step 4 – Create HTML Markup File Upload
Create html markup for file upload form; so visit your app root directory and create create file-upload.html file and add the following code into it:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Node JS Express File Upload - Laratutorials.Com</title> <style> body{ padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; } .container{ max-width: 400px; margin: 0 auto; padding: 20px; text-align: center; } [type="file"]{ border: 1px solid #cccccc; background: #f9f9f9; width: 100%; padding: 10px; margin-bottom: 10px; font-size: 18px; border-radius: 2px; } [type="submit"]{ cursor: pointer; font-size: 16px; background: #5d13e7; color: #ffffff; padding: 10px 20px; border: 1px solid rgba(0,0,0,.1); border-radius: 3px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } </style> </head> <body> <div class="container"> <h1>Node.js File Upload</h1> <form action="file-upload" method="POST" enctype="multipart/form-data"> <input type="file" name="filetoupload" required> <input type="submit" value="Upload"> </form> </div> </body> </html>
Step 5 – Run Node js Express File Upload App
Open your command prompt and execute the following command to run node js express file upload application:
//run the below command node index.js
Conclusion
In this tutorial you have learned how to upload file/image in Node.js Express App.