File upload in node.js seems tedious due to its async nature and network programming approach. However, it is one of the easiest file upload mechanisms I have seen yet.
How to perform file upload?
I am going to use express framework and middleware called “multer”. This middleware is designed for handling the multipart/form-data.
In front-end script, we will set the “target” parameter of FORM to our router. for.eg /upload/picture and in app.get(‘/upload/picture’, …) we will be able to handle our file. Let’s see how.
Our project:
This project is simple. We will have a simple express web server that does the task of routing and other stuff. Multer will take care of the file handling and HTML for handling form input.
#2: Upgrading to multer v 1.1.0.
"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"
}
}
Installing dependency:
Save the package.json in folder and type
to install the required stuff.
This code is updated with the latest version of Multer.
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.fieldname + '-' + Date.now());
}
});
var upload = multer({ storage : storage}).single('userPhoto');
app.get('/',function(req,res){
res.sendFile(__dirname + "/index.html");
});
app.post('/api/photo',function(req,res){
upload(req,res,function(err) {
if(err) {
return res.end("Error uploading file.");
}
res.end("File is uploaded");
});
});
app.listen(3000,function(){
console.log("Working on port 3000");
});
Running project:
Copy code and save them in folder. Type
to run the project. Visit localhost:3000 to view the app. Select the file and check the uploads folder. Your file must be present there!
Explanation :
In our Server.js file, we have configured multer. We have made custom middle-ware function to choose the storage engine which is Disk because we want files to store in disk and appending the file name with current date just to keep the uniqueness of files.
After completing upload , req.files variable holds following array of information.
userPhoto:
{
fieldname: 'userPhoto',
originalname: 'banner.png',
name: 'banner1415699779303.png',
encoding: '7bit',
mimetype: 'image/png',
path: 'uploads\banner1415699779303.png',
extension: 'png',
size: 11800,
truncated: false,
buffer: null
}
}
We are initializing the multer in our /api/photo/ router and in callback we are receiving the error. If there is no error that means file is uploaded.
if(err) {
return res.end("Error uploading file.");
}
res.end("File is uploaded");
});
In HTML form you must mention enctype=”multipart/form-data” else multer will not work.
Performing file validation:
To perform validation on Server end, multer provides limits array parameter which have following parameters. ( Reference: Github official page. )
- fieldNameSize – integer – Max field name size (Default: 100 bytes)
- fieldSize – integer – Max field value size (Default: 1MB)
- fields – integer – Max number of non-file fields (Default: Infinity)
- fileSize – integer – For multipart forms, the max file size (in bytes) (Default: Infinity)
- files – integer – For multipart forms, the max number of file fields (Default: Infinity)
- parts – integer – For multipart forms, the max number of parts (fields + files) (Default: Infinity)
- headerPairs – integer – For multipart forms, the max number of header key=>value pairs to parse Default: 2000 (same as node’s http).
You can define it like this
fieldNameSize: 100,
files: 2,
fields: 5
}
In our code.
Conclusion:
Multer is a very useful middleware created by the Express community. It really helps us to quickly develop critical code like File uploads in Node.js easily. I hope you find this tutorial helpful.
