dropzone-ui-react icon indicating copy to clipboard operation
dropzone-ui-react copied to clipboard

MaxFiles issue

Open cannontechnology opened this issue 3 years ago • 5 comments

Describe the bug Setting the following 2 props should result in replacing a single file, however it produces an error every other time. Also not crazy about the end-user experience of showing the files over the maxFile limit with errors on each. It should just replace the files up to the maxFiles size. (I have a workaround for both of these issues in the comment below). maxFiles={1} behaviour="replace"

To Reproduce Steps to reproduce the behavior:

  1. Go to https://codesandbox.io/s/dropzone-ui-complete-forked-4wempi
  2. Drop a single image multiple times. Every other drop will produce a max files error

Expected behavior No error should happen for a single file dropped multiple times.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context Add any other context about the problem here.

cannontechnology avatar Sep 01 '22 21:09 cannontechnology

Here is a workaround that I came up with that solves this issue and also will only set as many files that are set in the maxFiles prop.

const handleDrop = (incommingFiles) => { //TODO: remove workaround once issue is fixed in dropzone-ui/react //This will set the incoming files to the last X files (X = maxFiles prop) if (incommingFiles.length > props.maxFiles) { incommingFiles.splice(0,(incommingFiles.length-props.maxFiles)); } //TODO: remove workaround once issue is fixed in dropzone-ui/react //This will remove the bogus "Max amount" errors in the remaining files error array incommingFiles.map((file)=>{ file.errors = file.errors.filter((x) => ! x.startsWith("Max amount of files (")); file.valid = file.errors.length == 0; }) setFiles(incommingFiles); };

cannontechnology avatar Sep 01 '22 22:09 cannontechnology

Hey there @cannontechnology . Thanks for notifying us about this issue.

We've just solved the problem in a new version of 🚀 @dropzone-ui/react (V.6.7.10). Please give it a try and let us know if there is something missing in order to fix the issue.

Thanks in advance.

JinSSJ3 avatar Sep 03 '22 06:09 JinSSJ3

Hi @JinSSJ3 - Thanks for the quick reply but the issue is showing files over the max. See the attached images. image

cannontechnology avatar Sep 07 '22 19:09 cannontechnology

Hey @cannontechnology !

Thanks for the capture. At this moment that is the expected behaviour, all files are shown to the user and they can remove then individually or all together by clicking the "clean" icon next to the "delete" icon on the right part of dropzone header. It is true that it would be better if <Dropzone/> component automatically removed all "non valid" files . Sorry for the inconveninence, but checking our backlog we realized that this feature was already planned to implement. Once we 🚀 add it, we will notify you! ✉️

Thanks in advance.

JinSSJ3 avatar Sep 07 '22 21:09 JinSSJ3

Thanks again @JinSSJ3. Understood regarding the backlog and appreciate the update. One other thing with the current functionality. If you really wanted that 6th file in my sample above and go to remove the 1st valid file. The 6th (now 5th of 5) file will still have the max files error.

cannontechnology avatar Sep 10 '22 13:09 cannontechnology