Eliminate invalid callbacks to onChange prop

[donalmurtagh]

In this example usage, I upload 2 files, one of which is 2.7MB and the other is 4.2MB. Notice that the onChange prop is called back multiple times. The first time it is called back, only the first uploaded file is provided in the arguments, the second time it is called back, both files are provided in the arguments, etc.

You can see evidence of this in the console output of the example above

onChange called back with files: [File(2744170)]
onChange called back with files: (2) [File(2744170), File(4199232)]

Similarly, if 3 files are uploaded, onChange is called back 3 times with 1, 2, and 3 files respectively.

We should instead callback to onChange only once, providing all successfully processed files in the arguments.

I'm pretty sure that this bug was introduced recently, probably during the last month or two. The performance on the demo website is much better. My guess is that the demo site is using an older version of the component that does not include this bug.

[vovkind]

Facing the same issue.

[donalmurtagh]

@vovkind I've submitted a PR #54 that fixes this

[vovkind]

@donalmurtagh Do you know when fix will be released?

[donalmurtagh]

@vovkind I don't have permission to do releases, you'll have to ask @JakeHartnell. While you're waiting for a release, you can copy

• index.css
• index.js
• UploadIcon.svg

from my PR branch into your project and use those instead of the files in node_modules/react-images-upload.

[vovkind]

Guys, I'm still facing the issue with v1.2.0

My code is the same code as in the example. Can you please check again?

[donalmurtagh]

@vovkind check what? If you have a problem, please open an issue with an example that reproduces it.

[vovkind]

@donalmurtagh

There is my code:

Definition of ImageUploader component (that's actually react-images-upload)

Definition of onDrop function in constructor

Call to _onDrop method. I added a logger to see how much this callback is being triggered

Here we can see that for ONE loaded image the handler method is being called twice

Currently, I'm using version "react-images-upload": "1.2.0"

I'm ready to provide additional information if needed. Thank you very much for your help.

[donalmurtagh]

@vovkind could you create a Plunker/JSFiddle (or similar) demo that reproduces the issue with version 1.2.0?