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.

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

http://www.ioncannon.net/programming/1539/direct-browser-uploading-amazon-s3-cors-fileapi-xhr2-and-signed-puts/

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?

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.

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

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.

Thanks!

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...

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.

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.

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>

<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>
<div class="dropzone-previews"></div> 
</form>
 <div><button id="submit-all" form="my-awesome-dropzone" type="submit" class="btn btn- default">Submit</button></div>
    <script>
        Dropzone.options.myAwesomeDropzone = {        
       // url: "upload.php" ,
    paramName: "upload",
    autoProcessQueue: false,
        uploadMultiple: true, //if you want more than a file to be   uploaded
        addRemoveLinks:true,
        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
  });
  }
}
</script>`

Hi,

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

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?

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

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.

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

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())
        {
            this.removeFile(file);
        }
    }
}

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,
}

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>
    <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>
    </div>
</form>

 let myDropzone = new Dropzone("#profile-picture-dropzone", {
        url: "upLoadFile",
        headers: {
            "user_mail": data.mail
        },
	uploadMultiple:"false",
	resizeWidth:"250",
	resizeHeight:"250",
    });

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

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.

(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).