files array passed to onStatusChange is updated after handler is fired for 'removed'

[fridaystreet]

Thanks for the great library. Just been trying to put an overlay type dropzone together that appears over the top of a form on drag. In order to do this I needed to control the display of the dropzone component with some state change. All good there so far.

I'm listening to the drag enter, drag leave events on the form so as to swicth dropzone on and off. That all works fine if I haven't dropped any files in the zone. Once I do this, the drag leave is never fired (to be expected).

What I wanted to do was listen to the 'removed' event and if there are no files left, then I'll trigger my state change to hide the dropzone and display the form again.

The trouble is that when onStateChanged is fired for the remove event, it is done, before the file is removed from the files array. Sort of feels like if the event is 'removed' then the files array passed to onStatusChange should reflect the files without the last removed element.

see here this.files.splice(index, 1) is called after this.handleChangeStatus(fileWithMeta).

  handleRemove = (fileWithMeta: IFileWithMeta) => {
    const index = this.files.findIndex(f => f === fileWithMeta)
    if (index !== -1) {
      URL.revokeObjectURL(fileWithMeta.meta.previewUrl || '')
      fileWithMeta.meta.status = 'removed'
      this.handleChangeStatus(fileWithMeta)
      this.files.splice(index, 1)
      this.forceUpdate()
    }
  }

Is there a particular design reason why it's not removed first? If not I'm happy to submit a PR if you are happy to take one?

Cheers Paul