In this post we will be discussing about multiple file upload in Node.js. We will be using Multer which is a Node.js middleware for handling 'multipart/form-data'. In our previous post we have discussed about Single File Upload in Node.js.
Multiple File Upload in Node.js Code :
Server.js
var express = require('express');
var multer = require('multer');
var app = express();
var port = 5000;
app.set('port', port);
var storage = multer.diskStorage({
destination: function (request, file, callback) {
callback(null, '/example/uploads');
},
filename: function (request, file, callback) {
console.log(file);
callback(null, file.originalname)
}
});
/* In the below line you will have an array of photos files. request.files is an object where fieldname is the key and value is the array of files */
var upload = multer({storage: storage}).array('photo', 5);
app.get('/', function(resuest, response) {
response.sendFile('/example/index.html');
});
app.post('/upload', function(request, response) {
upload(request, response, function(err) {
if(err) {
console.log('Error Occured');
return;
}
// request.files is an object where fieldname is the key and value is the array of files
console.log(request.files);
response.end('Your Files Uploaded');
console.log('Photo Uploaded');
})
});
var server = app.listen(port, function () {
console.log('Listening on port ' + server.address().port)
});
Index.html
<form enctype="multipart/form-data" action="/upload" method="post">
<input type="file" name="photo" multiple />
<input type="submit" value="Upload Image" name="submit" />
</form>
If you run the above code and upload more than one images, your images will be uploaded in Uploads folder. You will get an output as shown below.
Please Like and Share the CodingDefined.com Blog, if you find it interesting and helpful.
Server.js
var express = require('express');
var multer = require('multer');
var app = express();
var port = 5000;
app.set('port', port);
var storage = multer.diskStorage({
destination: function (request, file, callback) {
callback(null, '/example/uploads');
},
filename: function (request, file, callback) {
console.log(file);
callback(null, file.originalname)
}
});
/* In the below line you will have an array of photos files. request.files is an object where fieldname is the key and value is the array of files */
var upload = multer({storage: storage}).array('photo', 5);
app.get('/', function(resuest, response) {
response.sendFile('/example/index.html');
});
app.post('/upload', function(request, response) {
upload(request, response, function(err) {
if(err) {
console.log('Error Occured');
return;
}
// request.files is an object where fieldname is the key and value is the array of files
console.log(request.files);
response.end('Your Files Uploaded');
console.log('Photo Uploaded');
})
});
var server = app.listen(port, function () {
console.log('Listening on port ' + server.address().port)
});
Index.html
<form enctype="multipart/form-data" action="/upload" method="post">
<input type="file" name="photo" multiple />
<input type="submit" value="Upload Image" name="submit" />
</form>
If you run the above code and upload more than one images, your images will be uploaded in Uploads folder. You will get an output as shown below.
Please Like and Share the CodingDefined.com Blog, if you find it interesting and helpful.
Just tried it and i get an error.
ReplyDeleteInstalled Node, installed express, set my directory structure as you have it in the code and when i run it i get the following error
"""
[arch@Arch fileuploader]$ ls
example node_modules package.json server.js
[arch@Arch fileuploader]$ ls example/
index.html uploads
[arch@Arch fileuploader]$ sudo node server.js
/home/arch/Projects/js/fileuploader/server.js:35
is the array of files
^^^
SyntaxError: Unexpected identifier
at Object.exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:513:28)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Function.Module.runMain (module.js:575:10)
at startup (node.js:160:18)
at node.js:449:3
"""
req.files is not working it seems
ReplyDeleteif request.files ism't work you add
Deletevar bodyParser = require("body-parser");
your project and check it