DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It’s lightweight, doesn't depend on any other library (like jQuery) and is highly customizable.

1. Initialize the plugin by referencing the necessary files:

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

2. The typical way of using dropzone is by creating a form element with the class dropzone. 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.

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

3. Alternatively you can create dropzones programmatically (even on non form elements) by instantiating the Dropzone class

                
                    // Dropzone class:
                    var myDropzone = new Dropzone("div#myId", { url: "/file/post"});
                
            

                
                    // jQuery
                    $("div#myId").dropzone({ url: "/file/post" });
                
            

Notes

• If you do not want the default message at all (»Drop files to upload (or click)«), you can put an element inside your dropzone element with the class dz-message and dropzone will not create the message for you.
• Dropzone will submit any hidden fields you have in your dropzone form. So this is an easy way to submit additional data. You can also use the params option.
• Dropzone adds data to the file object you can use when events fire. You can access file.width and file.height if it’s an image, as well as file.upload which is an object containing: progress (0-100), total (the total bytes) and bytesSent.
• If you want to add additional data to the file upload that has to be specific for each file, you can register for the sending event:

                          
                              myDropzone.on("sending", function(file, xhr, formData) {
                                  // Will send the filesize along with the file as POST data.
                                  formData.append("filesize", file.size);
                              });
                          
                      

• To access the preview html of a file, you can access file.previewElement. For example:

                          
                              myDropzone.on("addedfile", function(file) {
                                  file.previewElement.addEventListener("click", function() {
                                      myDropzone.removeFile(file);
                                  });
                              });
                          
                      

• If you want the whole body to be a Dropzone and display the files somewhere else you can simply instantiate a Dropzone object for the body, and define the previewsContainer option. The previewsContainer should have the dropzone-previews or dropzone class to properly display the file previews.

                          
                              new Dropzone(document.body, {
                                  previewsContainer: ".dropzone-previews",
                                  // You probably don't want the whole body
                                  // to be clickable to select files
                                  clickable: false
                              });
                          
                      

• Look at the github wiki for more examples.

Refer following links for usage:

File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.

Initialize the jQuery File Upload widget.

                
                    // Initialize the jQuery File Upload widget:
                    $('#fileupload').fileupload({
                        // Uncomment the following to send cross-domain cookies:
                        //xhrFields: {withCredentials: true},
                        url: '../app-assets/jquery-file-upload/server/php/',
                        // Enable image resizing, except for Android and Opera,
                        // which actually support image resizing, but fail to
                        // send Blob objects via XHR requests:
                        disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
                        autoUpload: false,
                        maxFileSize: 999000,
                        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
                    });

                    // Enable iframe cross-domain access via redirect option:
                    $('#fileupload').fileupload(
                        'option',
                        'redirect',
                        window.location.href.replace(
                            /\/[^\/]*$/,
                            '../app-assets/jquery-file-upload/cors/result.html?%s'
                        )
                    );
                
            

The template to display files available for upload.

                
                    
                    <script id="template-upload" type="text/x-tmpl">
                    {% for (var i=0, file; file=o.files[i]; i++) { %}
                        <tr class="template-upload fade">
                            <td>
                                <span class="preview"></span>
                            </td>
                            <td>
                                <p class="name">{%=file.name%}</p>
                                <strong class="error text-danger"></strong>
                            </td>
                            <td>
                                <p class="size">Processing...</p>
                                <progress class="progress progress-striped progress-success" value="0" max="100"></progress>
                            </td>
                            <td>
                                {% if (!i && !o.options.autoUpload) { %}
                                    <button class="btn btn-primary start" disabled>
                                        <i class="icon-cloud-upload3"></i>
                                        <span>Start</span>
                                    </button>
                                {% } %}
                                {% if (!i) { %}
                                    <button class="btn btn-warning cancel">
                                        <i class="icon-ban2"></i>
                                        <span>Cancel</span>
                                    </button>
                                {% } %}
                            </td>
                        </tr>
                    {% } %}
                    </script>
                
            

The template to display files available for download.

                
                    
                    <script id="template-download" type="text/x-tmpl">
                    {% for (var i=0, file; file=o.files[i]; i++) { %}
                        <tr class="template-download fade">
                            <td>
                                <span class="preview">
                                    {% if (file.thumbnailUrl) { %}
                                        <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                                    {% } %}
                                </span>
                            </td>
                            <td>
                                <p class="name">
                                    {% if (file.url) { %}
                                        <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                                    {% } else { %}
                                        <span>{%=file.name%}</span>
                                    {% } %}
                                </p>
                                {% if (file.error) { %}
                                    <div><span class="tag tag-default tag-danger">Error</span> {%=file.error%}</div>
                                {% } %}
                            </td>
                            <td>
                                <span class="size">{%=o.formatFileSize(file.size)%}</span>
                            </td>
                            <td>
                                {% if (file.deleteUrl) { %}
                                    <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                                        <i class="icon-trash4"></i>
                                        <span>Delete</span>
                                    </button>
                                    <input type="checkbox" name="delete" value="1" class="toggle">
                                {% } else { %}
                                    <button class="btn btn-warning cancel">
                                        <i class="icon-ban2"></i>
                                        <span>Cancel</span>
                                    </button>
                                {% } %}
                            </td>
                        </tr>
                    {% } %}
                    </script>
                
            

• The maximum file size for uploads in this demo is 999 KB (default file size is unlimited).
• Only image files (JPG, GIF, PNG) are allowed in this demo (by default there is no file type restriction).
• Uploaded files will be deleted automatically after 5 minutes or less (demo files are stored in memory).
• You can drag & drop files from your desktop on this webpage (see Browser support).
• Please refer to the project website and documentation for more information.

Refer following links for usage: