Getting started with dropzone.js

Download dropzone.js eBook

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

VersionRelease Date
4.3.02016-02-14
4.2.02015-10-11
4.1.12015-10-11
4.1.02015-10-11
4.0.12015-02-09
4.0.02015-01-25
3.0.02013-05-11
2.0.02013-03-12
1.0.02012-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.

Stats

612 Contributors: 4
Sunday, March 12, 2017
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial: info@zzzprojects.com

Download eBook