Callback when multiple files added widget in react

[aquaductape]

Question

Similar to this https://github.com/uploadcare/react-widget/issues/290, but on onFileSelect only fires after you close dialog. Is there an callback that fires as soon as each file finishes downloading and you can access updated fileInfo?

[aquaductape]

So it seems like this is the way

onDialogOpen={(dialog) => {
  dialog.fileColl.anyDoneList.add((_, item) => {
    console.log(item); // {uuid, name, size, isStored, isImage, …}
  });
}}

[optlsnd]

@aquaductape yes, anyDoneList will do the trick. You can also use the onAdd and onRemove to handle add/remove events separately

onDialogOpen={(dialog) => {
  dialog.fileColl.onAdd.add((file) => {
    console.log("File added: ", file);
  });
  dialog.fileColl.onRemove.add((file) => {
    console.log("File removed: ", file);
  });
}}

https://codesandbox.io/s/react-widget-react18-onadd-onremove-events-guxf3c?file=/src/index.js:293-554

[aquaductape]

The onAdd and onRemove code is not true, it doesn't return a file, but instead a different object with a lot of methods.

always: ƒ ()
cancel: ƒ ()
catch: ƒ ( fn )
done: ƒ ()
fail: ƒ ()
pipe: ƒ ()
progress: ƒ ()
promise: ƒ ( obj )
state: ƒ ()
then: ƒ ()

I can't find the file on that object, the closest thing i can find relating to the file is the second parameter that's passed but is a number which is the index of the file.

  dialog.fileColl.onAdd.add((obj, fileIndex) => {
    console.log("File added: ", fileIndex);
  });
  dialog.fileColl.onRemove.add((obj, fileIndex) => {
    console.log("File removed: ", fileIndex);
  });

[aquaductape]

Ok you have to call the promise method

onDialogOpen={(dialog) => {
  dialog.fileColl.onAdd.add(async (state) => {
    const file = await state.promise()
    console.log("File added: ", file);
  });
  dialog.fileColl.onRemove.add(async (state) => {
    const file = await state.promise()
    console.log("File removed: ", file);
  });
}}