Getting started with dropzone.js

Remarks#

dropzone.js is a lightweight script that allows you to provide users with a simple interface to upload files to your server. Note that dropzone.js requires you to have set up server side processing, as mentioned on their official website. The files are uploaded via AJAX.

It does not require any external libraries such as jQuery. dropzone.js has features such as thumbnail previews, progress bars, themining support and the ability to upload large files.

Versions#

Version	Release Date
4.3.0	2016-02-14
4.2.0	2015-10-11
4.1.1	2015-10-11
4.1.0	2015-10-11
4.0.1	2015-02-09
4.0.0	2015-01-25
3.0.0	2013-05-11
2.0.0	2013-03-12
1.0.0	2012-08-13

Hello, World!

Important: Be sure to set up the server-side implementation as per the instructions here, otherwise uploads will not work.

To get started, create a new HTML document. Download the script as per the “Installation” example, and include it in your head tag like so (remebering to replace the example path with the real path!):

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

Include a <form> in your <body>:

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

That’s it! Here is a complete example:

<html>
    <head>
        <title>My Awesome Website!</title>
        <script src="/path/to/dropzone.js"></script>
    </head>
    <body>
        <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
    </body>
</html>

For more complicated and specific setup, refer to the usage docs on the official website.