onChange is called even when there are errors

[AlvaDamian]

As the title says, even when there are errors, the method onChange is called. I've found 2 scenarios that can trigger this:

Scenario 1:

• Set the accepts prop to something like: ['image/jpg', 'image/jpeg', 'image/png']
• Select a PDF from the select files dialog

In my case, I can change the type filter in the dialog box to "All file types (*)". With this option, PDFs are visible and I can select them. After selecting a PDF or another file that it is not in the accepts prop, the onError method is called as the onChange method is called with an empty array.

This can be sorted checking that the array has elements.

Scenario 2:

• Set the accepts prop to something like: ['image/jpg', 'image/jpeg', 'image/png']
• Set the multiple prop to true
• Select more than one file where one of those has an invalid extension

Again, the type filter in the select files dialog box can be changed to "All file types (*)". In this case, the onError method is called with the first file that is invalid, the onChange method is called with the files that were processed before the invalid file was encountered. Files that come after the invalid one are not processed.

Where is the issue
It is in the handleDrop method inside the index.js file. Changes to be made to this file depend on how errors are going to be handled:

• You can stop when the first error is found and do not call onChange.
• You can call onError for every invalid file or send an array of errors, and call onChange if there is any valid file.

In any case, calling onChange with an empty array can be misleading for the users of the library.

[asabhaney]

Thanks for filing an issue. I'm unable to reproduce this bug though - when I drop a file type not allowed in accepts, only onError is called, not onChange. There is already code in handleDrop which exits early if an error is encountered (so that onChange is not called).

Could you provide some sample code that recreates the issue, as well as mention which browser and OS you are using, as well as which version of this library?

[AlvaDamian]

Sorry for the delay.

Do not use the Drop feature. Select the files using the dialog box that gets opened after clicking the component. You can use this minimum example for testing:

playcode.io issue 45

Setup your images for testing in the same folder in your computer:

• Save a PNG image as 1.png
• Save a JPG image as 2.jpg
• Save a PNG image as 3.png

The name of the files are important for scenario 2. The component will receive the images ordered by name and only process 1.png and 2.png.

In both scenarios, you have to change the filter in the dialog box from PNG image to All files.

For scenario 1, try to upload a JPG file and check that the handleAdd method is called with an empty array.

For scenario 2, try to upload all images. handleAdd is going to be called only with image 1.png in the array and handleError is going to be called with 2.jpg.

[AlvaDamian]

I didn't tested these scenarios with the Drop feature.