Feature request: onRemovedFile (or something similar)

[jadenmazzone]

I can't find a way to know when a file has been removed after it has been uploaded. Here is my code below (very similar to your example). For the remove file button, I tried adding an onClick so that I could capture when the user removed the file - but this just overwrites the getRemoveFileProps. So wondering if there is currently a way to know if a file has been removed and if not maybe it could work in a similar way to "onUploadAccepted", but obviously gets called when the file is removed.

const { CSVReader } = useCSVReader();

<CSVReader
 

  onUploadAccepted={(results: any) => {
    console.log('---------------------------');
    console.log(results);
    console.log('---------------------------');
    setCsvData(results.data)
    setZoneHover(false);
  }}
  onDragOver={(event: DragEvent) => {
    event.preventDefault();
    setZoneHover(true);
  }}
  onDragLeave={(event: DragEvent) => {
    event.preventDefault();
    setZoneHover(false);
  }}
  
>
  {({
    getRootProps,
    acceptedFile,
    ProgressBar,
    getRemoveFileProps,
    Remove,
  }: any) => (
    <>
      <div
        {...getRootProps()}
        style={Object.assign(
          {},
          styles.zone,
          zoneHover && styles.zoneHover
        )}
      >
        {acceptedFile ? (
          <>
            <div style={styles.file}>
              <div style={styles.info}>
                <span style={styles.size}>
                  {formatFileSize(acceptedFile.size)}
                </span>
                <span style={styles.name}>{acceptedFile.name}</span>
              </div>
              <div style={styles.progressBar}>
                <ProgressBar />
              </div>
              <button
              
              
              {...getRemoveFileProps()}
                style={styles.remove}
                onMouseOver={(event: Event) => {
                  event.preventDefault();
                  setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                }}
                onMouseOut={(event: Event) => {
                  event.preventDefault();
                  setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                }}
                
              >
                <Remove color={removeHoverColor} />
              </button>
            </div>
          </>
        ) : (
          'Drop CSV file here or click to upload'

        )}
      </div>
    </>
  )}
</CSVReader>

Version 4.0.0

[Angelfire]

I updated yesterday and ran into the same problem... c.c. @Bunlong

[DanKellyRedcat]

We ran into the same issue, our solution was to revert back to v3 where you can use handleRemoveFile.

Would be good to have this in v4 or at least a workaround in the changelog

[rishipisipati]

Running into the same issue. It would be really nice if we could get a handleRemoveFile method to override.

[rishipisipati]

@Angelfire @DanKellyRedcat @jadenmazzone Not sure if you still need assistance, but this is what worked for me to preserve both the onClick method from removeFileProps and calling in my own code.

              {...getRemoveFileProps()}
                style={styles.remove}
                onMouseOver={(event: Event) => {
                  event.preventDefault();
                  setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                }}
                onMouseOut={(event: Event) => {
                  event.preventDefault();
                  setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                }}
               onClick={(event: Event) => {
                 getRemoveFileProps.onClick(event);
                 // Your code here
               }}

[Prabashi]

In @rishipisipati 's code, replacing

getRemoveFileProps.onClick(event); with

getRemoveFileProps().onClick(event); worked for me. Otherwise it gives an error.