Max number of files when dropzone has multiple prop

Do you want to request a feature or report a bug?

• I found a bug
• I want to propose a feature

What is the current behavior?

When the multiple prop is on the dropzone, there is no limitation to the number of files a user can drop.

If this is a feature request, what is motivation or use case for changing the behavior?

I had to make a few tricks to limit the number of files the dropzone takes when it has a multiple prop. How about adding a prop to the dropzone like ‘maxNumberFiles’ that would make the dropzone reject all the files or the exceeding ones ? Maybe it would be more convenient directly in the multiple prop likeso : multiple={3} and that would not have any limit if left empty

I had to do it on top of the dropzone in my component which is a bit messy even though it works fine 😅

[heshamelmasry77]

this is how you guys do it

onDrop={acceptedFiles => {
                    // do nothing if no files
                    let handleDropImages;
                    if (acceptedFiles.length === 0) {
                      return;
                    } else if(acceptedFiles.length > 5){ // here i am checking on the number of files
                      return notify('maxImages'); // here i am using react toaster to get some notifications. don't need to use it 
                    }else {
                      // do what ever you want 
                    }

                  }}

[RaphaelRegnier]

Hello @okonet and sorry for taking so long. Here is a video sample of what I built using dropzones : https://www.useloom.com/share/8ad3082bec7c4d7abe0d5ef8cc561db7

In this demo you can see :

1. I’m adding one file in the first dropzone, then 2 others but the limit is set to 2 so you get an error.
2. I’m dragging a file on the second dropzone by dropping it.
3. I’m adding 2 files to the third dropzone, with a max number of files that is set to 4

You can click on the trash icon to delete your item, once you click on the form submit button, it disables the dropzones while uploading the files. If you reload the page, we disable the dropzones and display a message saying we got all your files already.

Here’s a gist of these custom dropzones, it could be refacto but eh, it has been working fine for a while 😃

https://gist.github.com/RaphaelRegnier/797015e23a64e8959182528646b46954