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 middleware that can be used like multer, connect, body-parser etc.
Let's take an example to demonstrate file upload in Node.js. Here, we are using the middleware 'multer'.
Create a folder "jtp file upload" having the following files:
uploads: It is an empty folder i.e. created to store the uploaded images.
package: It is JSON file, having the following data:
File: package.json
{ "name": "file_upload", "version": "0.0.1", "dependencies": { "express": "4.13.3", "multer": "1.1.0" }, "devDependencies": { "should": "~7.1.0", "mocha": "~2.3.3", "supertest": "~1.1.0" } }
File: index.html
File upload in Node.js by rookienerd Express.js File Upload: by rookienerd
File: server.js
var express = require("express"); var multer = require('multer'); var app = express(); var storage = multer.diskStorage({ destination: function (req, file, callback) { callback(null, './uploads'); }, filename: function (req, file, callback) { callback(null, file.originalname); } }); var upload = multer({ storage : storage}).single('myfile'); app.get('/',function(req,res){ res.sendFile(__dirname + "/index.html"); }); app.post('/uploadrookienerd',function(req,res){ upload(req,res,function(err) { if(err) { return res.end("Error uploading file."); } res.end("File is uploaded successfully!"); }); }); app.listen(2000,function(){ console.log("Server is running on port 2000"); });
To install the package.json, execute the following code:
npm install
It will create a new folder "node_modules" inside the "jtp file upload" folder.
Dependencies are installed. Now, run the server:
node server.js
Open the local page http://127.0.0.1:2000/ to upload the images.
Select an image to upload and click on "Upload Image" button.
Here, you see that file is uploaded successfully. You can see the uploaded file in the "Uploads" folder.