[javascript] DropzoneJS - drag'n'drop file uploads with image previews library

[javascript] DropzoneJS - drag'n'drop file uploads with image previews library

 

http://www.dropzonejs.com/

 

Github : https://github.com/enyo/dropzone

 

 

Installation

Download the standalone dropzone.js and include it like this:

<script src="./path/to/dropzone.js"></script>

Dropzone is now activated and available as window.Dropzone.

Dropzone does not handle your file uploads on the server. You have to implement the code to receive and store the file yourself.

With component

If you use component you can just add dropzone as a dependency:

"enyo/dropzone": "*"

Then include it like this:

var Dropzone = require("dropzone");

so it is activated and scans the document.

The basic CSS markup is also included with component, but if you want it to look the same as on this page, you have to download the CSS (see below).

With RequireJS

Dropzone is also available as an AMD module for RequireJS.

You can find the dropzone-amd-module in the downloads folder.

---

This is all you need to get dropzone up and running. But if you want it to look as cool as my dropzone, you’ll need to download the css/dropzone.css, images/spritemap.png and images/spritemap@2x.png as well from the downloads folder.

If you change the folder names make sure you adjust the paths in the css.

The @2x.png spritemap is to support high density (retina) displays.

Usage

The typical way of using dropzone is by creating a form element with the class dropzone:

<form action="/file-upload"
      class="dropzone"
      id="my-awesome-dropzone"></form>

That’s it. Dropzone will find all form elements with the class dropzone, automatically attach itself to it, and upload files dropped into it to the specified action attribute. The uploaded files can be handled just as if there would have been a html input like this:

<input type="file" name="file" />

If you want another name than file you can configure dropzone with the option paramName.

If you’re using component don’t forget to require("dropzone"); otherwise it won’t be activated.

If you want your file uploads to work even without JavaScript, you can include an element with the class fallback that dropzone will remove if the browser is supported. If the browser isn’t supported, Dropzone will not create fallback elements if there is a fallback element already provided. (Obviously, if the browser doesn’t support JavaScript, the form will stay as is)

Typically this will look like this:

<form action="/file-upload" class="dropzone">
  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>
</form>