Trigger DeleteHandler To Remove File From Dropzone Area about material-ui-dropzone

[alirezakay]

I Found It 💯

Well, there is a function in DropzoneArea class, named: handleRemove()

---

To access this method from parent components, you must consider that, this module, uses material-ui and the default export is like:

export default withStyles(styles)(DropzoneArea)

So, you'll need to access a child react node to access DropzoneArea class

I've found this approach:

• First: create a reference to the DropzoneArea component in your class

.
.
dropzoneRef = react.createRef();
.
.
<DropzoneArea ref={this.dropzoneRef }>. . .</DropzoneArea>

• Second: call the handleRemove function of the referenced DropzoneArea component:

deleteHanlder = (idx) => {
  // idx is the index of the file you wanna be removed from dropzone area 
  const e = {};
  e.stopPropagation = () => {}
  this.dropzoneRef.current._reactInternalFiber.child.stateNode.handleRemove(idx)(e);
}

Notice

As I searched in the src files of this module, the handleRemove function, has a parameter that is the index of the file you want to be removed,
And the returned result is another function that gets an event as a parameter.
In the first line of the function, stopPropagation function of the event is called!

Because I had no event object on my own code, I created a fake event like e.
Then I added a fake function named: stopPropagation
This is just for bypassing the errors

[finalevil]

@alirezakay
very useful~
thank you very much

[pouannes]

07/2020 update: I had to change the code above a bit (my code is for a functional component but you can adapt it):

.
.
dropzoneRef = useRef(null);

const deleteHandler = (idx) => {
    // idx is the index of the file you wanna be removed from dropzone area
    // file is the fileObject you want to delete
    dropzoneRef.current._reactInternalFiber.stateNode.deleteFile(file, idx);
  };
.
.
<DropzoneArea ref={dropzoneRef }>. . .</DropzoneArea>

[slutske22]

@pouannes , in trying your solution with typescript, I get the error Property 'ref' does not exist on type 'IntrinsicAttributes & Omit<DropzoneAreaBaseProps, "fileObjects" | "onAdd" | "onDelete"> & { clearOnUnmount?: boolean | undefined; initialFiles?: (string | File)[] | undefined; onChange?: ((files: File[]) => void) | undefined; onDelete?: ((file: File) => void) | undefined; } & { ...; }'.

Any ideas for me there?