a blog for those who code

Tuesday, 16 February 2016

File Upload in Nodejs using Dropzone.js

In this post we will be discussing about file upload in Node.js using Dropzone.js. Dropzone.js will make your file upload control look better. cleaner and more user-friendly. It is an open source library that provides drag'n'drop file uploads with image previews. In our previous post we have discussed about Single File Upload in Node.js and Multiple File Upload in Node.js.

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