react-dropzone: `acceptedFiles` / `rejectedFiles` arrays are not updated when used as function as a child

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? Uploading files doesn’t update the acceptedFiles / rejectedFiles arrays when used as function-as-a-child – they stay as empty arrays. This bug can be seen in the docs: Updating styles and contents based on user input

If the current behavior is a bug, please provide the steps to reproduce.

<Dropzone
  accept="image/png"
>
  {({ acceptedFiles, rejectedFiles }) => {
    return acceptedFiles.length || rejectedFiles.length
      ? `Accepted ${acceptedFiles.length}, rejected ${rejectedFiles.length} files`
      : "Try dropping some cool files.";
  }}
</Dropzone>

Verify that dropping / uploading a file does not show the number of accepted or rejected files

What is the expected behavior? acceptedFiles / rejectedFiles arrays should be populated with files accordingly.

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

Please mention other relevant information such as the browser version, Operating System and react-dropzone version. 5.0.1

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 8
Comments: 15 (6 by maintainers)

Most upvoted comments

🎉 This issue has been resolved in version 5.1.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

okonet on Sep 26, 2018

@nfantone Cool. I haven’t had a chance to look into the issue, but if your patch fixes it I’m sure the maintainers would love a PR.

kristofferh on Sep 24, 2018

@Emidomenge There is. You can either use isDragAccept instead of isDragActive or you can just re-arrange the order in which the conditionals are written. Or both, to make it cleaner.

<Dropzone
  accept="image/png"
>
  {({ isDragAccept, isDragReject, acceptedFiles, rejectedFiles }) => {
    if (acceptedFiles.length || rejectedFiles.length) {
      return `Accepted ${acceptedFiles.length}, rejected ${rejectedFiles.length} files`;
    }
    if (isDragAccept) {
      return "This file is authorized";
    }
    if (isDragReject) {
      return "This file is not authorized";
    }
    return "Try dropping some files.";
  }}
</Dropzone>

nfantone on Sep 24, 2018

After taking a look at the source code, the problem turned out to be fairly simple to spot: renderChildren is calling the render function passing in a shallow copy of its inner this.state; however, while initialized as empty arrays ([]), neither acceptedFiles nor rejectedFiles are ever updated in the state.

This here is the faulty commit, which landed in v4.3.0.

nfantone on Sep 24, 2018