Install DropzoneJS - The simplest way to install DropzoneJS is using bower as shown below :
bower install dropzone
Usage : Basic usage is to attach the plugin to a form. To initiate the dropzone you just need to add dropzone class as shown in our index.html file. We need to do some basic configuration as shown below where paramName is used to set the name of the parameter of the uploaded file, maxFilesize property defined the maximum file size in megabytes. The url option defines the target for the uploaded form and is also the required parameter.
Index.html
<link rel="stylesheet" href="basic.css" />
<link rel="stylesheet" href="dropzone.css" />
<script type="text/javascript" src="dropzone.js"></script>
<form id="my" enctype="multipart/form-data" action="/upload" method="post" class="dropzone">
<div class="fallback">
<input name="file" type="file" />
</div>
<script type="text/javascript">
Dropzone.options.my = {
paramName: "photo", // The name that will be used to transfer the file
maxFilesize: 1024, // MB
url: "/upload"
};
</script>
</form>
Server.js : A simple server-side upload handler with Node.js and Express. We will be using Multer which is a Node.js middleware for handling 'multipart/form-data'. It does not process any form which is not multipart. According to Multer, it adds a body object and a file or files object to the request object. The body object contains the values of the text fields of the form, the file or files object contains the files uploaded via the form.
var express = require('express'), multer = require('multer'), app = express(), port = 5000;
app.set('port', port);
var storage = multer.diskStorage({
destination: function (request, file, callback) {
callback(null, '/expressTutorial/uploads/');
},
filename: function (request, file, callback) {
console.log(file);
callback(null, file.originalname)
}
});
app.use(express.static(__dirname + '/bower_components/dropzone/dist/' ) );
var upload = multer({storage: storage}).array('photo', 5);
app.get('/', function(resuest, response) {
response.sendFile('/expressTutorial/index.html');
});
app.post('/upload', function(request, response) {
upload(request, response, function(err) {
if(err) {
console.log('Error Occured' + err);
return;
}
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)
});
Using this you can upload more than one image and after upload you will be able to see image preview as shown below:
Please Like and Share the CodingDefined.com Blog, if you find it interesting and helpful.
No comments:
Post a Comment