[Bug] onupdatefiles cannot get updated state while onaddfile can

[tiantud]

Is there an existing issue for this?

• I have searched the existing issues

Have you updated FilePond and its plugins?

• I have updated FilePond and its plugins

Describe the bug

Im using a select to control a state "mode" in react. Each time you update the select, the value in "mode" will be changed.

Im want to get the current state when the files are updated (added and deleted). For that I tried two events: onupdatefiles and onaddfile.

Expected: Both event can get the current state. Or at least, both of them get the same value.

Actuall: onaddfile got the updated value, onupdatefiles got always init value.

Reproduction

Codesandbox

1. Open debug tool
2. Swich the select, you should see something like "Previous mode: test2, setting mode: test1". Which means the state is actually updated.
3. Upload any file. You should see three lines in logger:

onupdatefile got mode:
onaddfile got mode: test1
onupdatefile got mode:

which means:

• the onupdatefile event got a empty state "mode", and its exactlly the init state
• the onaddfile event got the updated state "mode"

Environment

- Device: PC
- OS: Windows 10
- Browser: Chrome 98, Firefox 96, Edge 98

[tiantud]

I tried to find another way to use the event onupdatefiles, because its the only one event which supports sync-uploading.

First try, but failed

Reproduction

In this sandbox, I am using the conditional rendering to render different FilePond for different state. But it turns out, that even the FilePond component is changed, the registed event function stays the same.

codesandbox

1. Open debug tool
2. Swich the select, you should see something like "Previous mode: test2, setting mode: test1". Which means the state is actually updated.
3. Swich to "test1", you can see "this is test1". That is the FilePond label.
4. Upload any file. You should see three lines in logger:

onupdatefile got mode: test1
onaddfile got mode: test1
onupdatefile got mode: test1

5. Swich to "test2", you can see "this is test2". Means the Component is re-rendered.
6. Upload any file. You should see three lines in logger:

onupdatefile got mode: test1
onaddfile got mode: test2
onupdatefile got mode: test1

which means: The event function of onupdatefile is not updated, but the one of onaddfile is updated.

Second try, succeed

Reproduction

Now the two FilePonds are rendered in two seperated condition-section.

codesandbox

1. Open debug tool
2. Swich the select, you should see something like "Previous mode: test2, setting mode: test1". Which means the state is actually updated.
3. Swich to "test1".
4. Upload any file. You should see three lines in logger:

onupdatefile got mode: test1
onaddfile got mode: test1
onupdatefile got mode: test1

5. Swich to "test2".
6. Upload any file. You should see three lines in logger:

onupdatefile got mode: test2
onaddfile got mode: test2
onupdatefile got mode: test2

[diva-D]

+1, I'm also getting this issue.

Using onupdatefiles always returns the intial state, whereas onaddfile returns the updated state values.