Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars.



Test and Release

Dropzone is a JavaScript library that turns any HTML element into a dropzone. This means that a user can drag and drop a file onto it, and Dropzone will display file previews and upload progress, and handle the upload for you via XHR.

It's fully configurable and can be styled according to your needs.



Dropzone Screenshot



If you need support please use the discussions section or stackoverflow with the dropzone.js tag and not the GitHub issues tracker. Only post an issue here if you think you discovered a bug.

If you have a feature request or want to discuss something, please use the discussions as well.

⚠️ Please read the contributing guidelines before you start working on Dropzone!

Main features

  • Beautiful by default
  • Image thumbnail previews. Simply register the callback thumbnail(file, data) and display the image wherever you like
  • Retina enabled
  • Multiple files and synchronous uploads
  • Progress updates
  • Support for large files
  • Complete theming. The look and feel of Dropzone is just the default theme. You can define everything yourself by overwriting the default event listeners.
  • Browser image resizing (resize the images before you upload them to your server)
  • Well tested

MIT License

See LICENSE file

  • Client side resize

    Client side resize

    Dropzone looks great. One of the reasons we use plupload is that it allows us to specify max dimensions on the client side. This ability would be a nice plugin to have.

    opened by mschipperheyn 98
  • Implementing upload to S3

    Implementing upload to S3

    I'm trying to get Dropzone to upload directly to Amazon S3 using CORS:


    For each upload, I need to be able to customize the url it uploads to and provide additional form data. Any tips on where would be best to do that?

    opened by lox 63
  • "Add More Button " or a "+" icon when there are already some images in dropzone

    I think Dropzone should have an option to show "Add More Button " or a "+" icon when there are already some images in dropzone so that user can understand that he is still able to add more files by clicking here or droping files here. As a developer We know that you are still able to add files, but not all the users are aware of this. This button should only appear when there are some files in dropzone.

    opened by prabhs226 42
  • Dropzone not working in IE 11 but works in Chrome,Safari n firefox Need Help

    Dropzone not working in IE 11 but works in Chrome,Safari n firefox Need Help

    drag n drop I have installed dropzone in on my website as a drupal module I dont know the problem it work in other browsers but does not work in IE 10 or 11 . When i uploaded the file by drag n drop or browse the file/photo shows up on the screen but the status bar stays white n does not turn green. Is their special code that is needed in order for it run on IE. When i checked the demo version on the dropzone website it worked but does not work on my site Any help would be greaty appreciated

    bug critical bug unverified 
    opened by iamlegend9910 39
  • Doesn't work on mobile Chrome

    Doesn't work on mobile Chrome

    I've tried the current Chrome (on Android 4.4 and 4.3), and even with Dropzonejs.com's own sample, I get "failed to open selected file" on any selected file.

    Attaching a web-dev session via USB shows nothing in the console; no logs, no warnings, etc.


    bug priority next release 
    opened by mfeif 35
  • Chunks?


    Hi, I just want to ask if it is planned to implement chunk uploads to avoid server limits?

    Maybe I'm wrong but currently each file is transferred to the server in a single request and large files will run into a server timeout if the max post size is lower than the file size.

    HTML5's blob.webkitSlice(start, end) or blob.mozSlice(start, end) could be used to split the file.

    Is somebody already working on such a feature? Otherwise I give it a try, although I'm a total noob when it comes to CoffeeScript...

    opened by bschmitt 33
  • wrong values of totaluploadprogress

    wrong values of totaluploadprogress

    I have an issue with the big files uploading. I have used these settings: uploadMultiple = false parallelUploads = 1

    When I try to upload a several files (each is about 100Mb), my handler of totaluploadprogress got values: 5% => 37% => 93% => 17% => 55% => ...

    Looks like the calculation of the progress percents is wrong.

    opened by m00nk 31
  • Add existing file not triggering events

    Add existing file not triggering events

    I've the following code in the init function

    var mockFile = { name: filePath, size: 12345 };
    myDropzone.emit("addedfile", mockFile);
    myDropzone.emit("thumbnail", mockFile, filePath);                                         
    myDropzone.options.maxFiles = 0;    

    The thumbnail is shown but when i call myDropzone.processQueue(); nothing happens. Only if i remove the image and add a new one it works.

    Any ideas?

    I've already tried https://github.com/enyo/dropzone/issues/279 proposed solutions but it still doesn't work.

    opened by matijagrcic 29
  • combine form doesn t work

    combine form doesn t work

    Hello, I try sending file with dropzone as indicated in the wiki. I get the post but not the files `

    <div class="form-group">
      <label for="sub">Sujet</label>
      <input type="text" class="form-control "  name="sujet" placeholder="Sujet" required/>
      <span class="icon fa fa-pencil fa-lg"></span>
    <div class="form-group">
     <textarea rows="5" cols="30"  name="msg" placeholder="Bonjour, insérer votre Message" style="width:100%"></textarea>
      <span class="icon-textarea fa fa-paper-plane fa-lg "></span>
    <div class="dropzone-previews"></div> 
     <div><button id="submit-all" form="my-awesome-dropzone" type="submit" class="btn btn- default">Submit</button></div>
            Dropzone.options.myAwesomeDropzone = {        
           // url: "upload.php" ,
        paramName: "upload",
        autoProcessQueue: false,
            uploadMultiple: true, //if you want more than a file to be   uploaded
            parallelUploads: 100,
        maxFiles: 100,
            acceptedFiles:".jpeg, .jpg, .jpe, .bmp, .png, .gif, .ico, .tiff, .tif, .svg, .svgz, \n\
                         .doc,.docx,.txt, .pdf,.rtf,.xlsx,.xls,.csv, .ppt,\n\
                        .zip,.zipx,.tar,.gz,.z,.rar", // files you accepting
        init: function () {
        var submitButton = document.querySelector("#submit-all") 
        var myDropzone = this;
         // First change the button to actually tell Dropzone to process the queue.
        submitButton.addEventListener("click", function() {
        myDropzone.processQueue(); // Tell Dropzone to process all queued files.
       // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
       // of the sending event because uploadMultiple is set to true.
      this.on("sendingmultiple", function() {
      // Gets triggered when the form is actually being sent.
      // Hide the success button or the complete form.
      this.on("successmultiple", function(files, response) {
      // Gets triggered when the files have successfully been sent.
      // Redirect user or notify of success.
     this.on("errormultiple", function(files, response) {
      // Gets triggered when there was an error sending the files.
      // Maybe show form again, and notify user of error

    Merry Christmas thank for your help

    opened by tycoons 28
  • DropZone with normal Form

    DropZone with normal Form


    I have an issue with my form and DropZone, I would like to have an area where the user is abled to drag and drop his pictures to upload them combined with contactdatas. If the user clicks on a submit button I want to insert all the Picture-Data and the Formdata into a database. The problem is, that if I'm trying to solve the tutorial of dropzone ( https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone ) nothing works. :(

    I don't even have a dropzone. I've put the action- and the method-attribute into the form, so I've got a dropzone but after I added these attributes, DropzoneJS does not put the pictures into the DIV

    Is propably anyone abled to help me? :) Thank you very much

    opened by uelmuel1 28
  • Dropzone.js drag-and-drop re-ordering of queue

    Dropzone.js drag-and-drop re-ordering of queue

    I'm using dropzone with autoProcessQueue: false to give the user a chance to remove files/etc.

    Ideally, what I would like to allow is drag-n-drop reordering of the queue...so that if a user selects 10 images and drags them into the dropzone, they can then be ordered with the mouse.

    Any ideas?

    opened by tiagorz 27
  • Uploading from iOS Safari Photo Library adds duplicates of every other image

    Uploading from iOS Safari Photo Library adds duplicates of every other image

    Describe the bug This can be reproduced on the DropzoneJS Demo on deopzonejs.dev:

    When uploading from iOS Safari selecting images using "From Photo Library" and then locally use the resize option to pass only "Large" versions of multiple Photos, adds not every single selected Photo, but a duplicate of every other Photo.

    To Reproduce Steps to reproduce the behavior:

    1. Go to deopzonejs.dev Demo
    2. Click on the Upload are
    3. Select the "Photo Library" option
    4. (Optionally) Go into an "Album" on the Album Tab - or use Photostream
    5. Select a number of Photos
    6. Change the file size in the bottom of selected photos where it reads "Actual Size", eg use "Large"
    7. Confirm to have Photos being uploaded

    You see a duplicate Photo of like every 2nd Photo has been added - whereas every actual 2nd Photo is missing (overwritten by the Duplicate).

    Expected behavior All selected Photos should have been added.

    Screenshots image

    Browser / OS:

    • OS & Device: iOS 16.2 on iPhone 13
    • Browser Mobile Safari

    Additional Info This ~~seems NOT to~~ happens for Photos from the Photo Library-Photostream; ~~only~~ and from Album Photos.

    opened by oliveratgithub 0
  • Possible error in docs for max file size

    Possible error in docs for max file size

    Describe the bug The docs state to use bytes for maxFilesize, but the code appears to want mb

    To Reproduce My config is;

    const config: DropzoneOptions = {
        url: '/target-url',
        parallelUploads: 20,
        previewTemplate: previewTemplate,
        previewsContainer: `#${previewId.value}`,
        clickable: `#${id.value} .select-files`,
        maxFilesize: maxFileSize.value * 1024 * 1024, // (maxFileSize.value = 1mb)

    Expected behavior EIther docs should state mb, or the code should be updated to use bytes

    Browser / OS:

    • OS & Device: OS X 10.15.7
    • Browser Chrome
    • Version 108
    opened by nzmattman 1
  • Adding support for duplicate files

    Adding support for duplicate files

    Hi team.

    I want to get support for duplicate files.

    I know there is a closed issue (https://github.com/dropzone/dropzone/issues/639) which shows a few solutions to how to get around this, but it seems like something that should be part of the core.

    I am also having issues with some of the 'fixes' for how this works.

    The solution of

    myDropzone.on("addedfile", function(file) {
    if (this.files.length) {
        var _i, _len;
        for (_i = 0, _len = this.files.length; _i < _len - 1; _i++) // -1 to exclude current file
            if(this.files[_i].name === file.name && this.files[_i].size === file.size && this.files[_i].lastModifiedDate.toString() === file.lastModifiedDate.toString())

    removes all instances of the file from the queue, but not the preview, which causes visual issues when you try and add the file in again.

    My suggestion would be to add a check for duplicate files before it's even added. I have a fork here (https://github.com/dropzone/dropzone/compare/main...nzmattman:dropzone:main) that I can create a pull request if this is acceptable.

    This will then allow us to pass in

    new Dropzone('elemen', {
      denyDuplicates: true,
    opened by nzmattman 0
  • Cropped image gets rotated

    Cropped image gets rotated

    Hello When I upload an image and the resize it with it sometimes gets rotated.

    I use the following definition:

    <form id="profile-picture-dropzone" class="dropzone" action="upLoadFile" method="post" data-plugin="dropzone">
        <div class="fallback">
            <input name="file" multiple type="file"></input>
        <div class="dz-message needsclick">
            <i class="h1 text-muted dripicons-cloud-upload"></i>
            <h3>Drop image file here or click to upload.</h3>
            <span class="text-muted font-13">modify the accounts user image</span>
     let myDropzone = new Dropzone("#profile-picture-dropzone", {
            url: "upLoadFile",
            headers: {
                "user_mail": data.mail

    Expected behavior Most of the time the image gets cropped correctly without rotating it, but some images however are getting rotated 90 degrees or 180 degrees.

    Screenshots See enclosed screenshot

    Browser / OS:

    • OS & Device: [Mac OS Ventura]
    • Browser [Chrome]
    • Version [Version 107.0.5304.110 (Official Build) (x86_64)]

    Additional context

    opened by MaartenMostert 0
  • Intermittent

    Intermittent "400 Bad Request" - no request payload sent

    I have a Dropzone component that is set up on one of my pages (Ruby on Rails app) - and it fails intermittently. The users tend to upload 20-30 files at a time, generally around 100-200Mb per file - and most of the time it's absolutely fine. In my testing I've used files from 177Kb to 3.8Mb and still get the error.

    For each set of files dropped, most upload OK. But some fail and checking the error shows a "400 Bad Request". Looking at the XHR POSTs on the network tab show that the headers look OK, but I see "No payload for this request" when looking at the request itself. This only seems to happen for two or three out of the thirty files to be uploaded.

    I'm using Dropzone 5.9.3, installed via yarn - configuration is:

          this.dropzone = new Dropzone(this.element, {
            uploadMultiple: false,
            chunking: false,
            parallelUploads: 2,
            autoQueue: true,
            autoProcessQueue: true,
            maxFilesize: 512,
            createImageThumbnails: false,
            timeout: 0,

    To reproduce:

    • go to the dropzone component
    • drop 20+ files on it
    • get errors on two or three of them
    • check network tab on the inspector - the failing files have no request payload

    I would expect all files to be XHR'ed correctly to the server.

    This is my most recent test. The first screenshot shows the payload from a correct XHR call, the second one the payload on a failed call - both in the same batch of files.

    Screenshot 2022-11-17 at 11 48 18 am Screenshot 2022-11-17 at 11 48 31 am

    (the POST is to "files", the calls to "error_logs" is an error handler that I've added to I can see the error in my server logs)

    Most of my users are using Chrome on Windows, but I've been getting the same issues with Firefox, Chrome and Safari on Mac as well (all latest released versions).

    opened by rahoulb 0
Moxiecode 5.6k Jan 1, 2023
Multi Upload with Progress Bar in Vanilla JS

js-progress-bar-multi-upload Multi Upload with Progress Bar in Vanilla JS Youtube dersinde birlikte hazırladığımız çoklu progress barlı javascript upl

Tayfun Erbilen 11 Jun 10, 2022
A simple React App that plays Public Domain TV shows and integrates with Twitch Chat for the controls.

Public Domain Television for Twitch This application plays movies from Public Domain Movies The current version is only used to play Cartoons, but can

Ravavyr 8 Mar 29, 2022
A JavaScript library providing multiple simultaneous, stable, fault-tolerant and resumable/restartable file uploads via the HTML5 File API.

Flow.js Flow.js is a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API. (Demo) The library is de

HTML5 File upload 2.9k Dec 18, 2022
🌊 A flexible and fun JavaScript file upload library

A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user

pqina 13.2k Jan 3, 2023
FileAPI — a set of javascript tools for working with files. Multiupload, drag'n'drop and chunked file upload. Images: crop, resize and auto orientation by EXIF.

FileAPI A set of JavaScript tools for working with files. Get started Download the files from the dist directory, and then: <div> <!-- "js-fileapi-

Free and open source software developed at Mail.Ru 3.6k Jan 3, 2023
runk is a simple file and folder sharer.

runk It is a simple file and folder sharer. It uses hyperswarm for sharing over network. Installation: Prerequisite: Node.js To mount, configured fuse

Amansinh Parmar 8 Mar 11, 2022
Multiple file upload plugin with image previews, drag and drop, progress bars. S3 and Azure support, image scaling, form support, chunking, resume, pause, and tons of other features.

Fine Uploader is no longer maintained and the project has been effectively shut down. For more info, see https://github.com/FineUploader/fine-uploader

Fine Uploader 8.2k Jan 2, 2023
A simple lightweight file dropzone component based on jQuery. You can easily make any existing element become a dropzone that holds files.

file-dropzone A simple lightweight file dropzone component based on jQuery. You can easily make any existing element become a dropzone that holds file

Anton Bardov 1 May 31, 2021
Slim progress bars for anywhere you want to use

qier-progress is a progress bar. It can be used for some watting time like jump links, request data, and load or upload files and images to give us feedback and reduce our anxiety. Also if you have used nprogress, then you must know what I am talking about ~

chen xin 370 Nov 5, 2022
Responsive and slick progress bars

ProgressBar.js Responsive and slick progress bars with animated SVG paths. Use built-in shapes or create your own paths. Customize the animations as y

Kimmo Brunfeldt 7.7k Jan 8, 2023
Very lightweight progress bars. No jQuery

Very lightweight progress bars (~699 bytes gzipped). Compatibility: iE7+ and the rest of the world Demo See nanobar.jacoborus.codes Installation Downl

Jacobo Tabernero 2.9k Dec 19, 2022
A refined tool for exploring open-source projects on GitHub with a file tree, rich Markdown and image previews, multi-pane multi-tab layouts and first-class support for Ink syntax highlighting.

Ink codebase browser, "Kin" ?? The Ink codebase browser is a tool to explore open-source code on GitHub, especially my side projects written in the In

Linus Lee 20 Oct 30, 2022
Material Progress —Google Material Design Progress linear bar. By using CSS3 and vanilla JavaScript.

MProgress.js Google Material Design Progress Linear bar. It uses CSS3 and vanilla JavaScript which doesn't depend on any other libraries. Types and pr

gc 1.5k Nov 30, 2022
A set of flat and 3D progress button styles where the button itself serves as a progress indicator

A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.

Codrops 608 Oct 19, 2022
📈 A small, fast chart for time series, lines, areas, ohlc & bars

?? μPlot A small (~35 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed) Introduction μPlot is a fast, memory-efficient Can

Leon Sorokin 7.5k Jan 7, 2023
In this project we made a Tv shows webpage where you can like or comment the different shows.

JS Capstone Project In this project we made a Tv shows webpage where you can like or comment the differents shows. Built With HTML CSS JavaScript Lint

Lucas Bonnefon 4 Mar 16, 2022