dropzone.js Getting started with dropzone.js

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

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.



Got any dropzone.js Question?