Bunlong / react-papaparse

react-papaparse is the fastest in-browser CSV (or delimited text) parser for React. It is full of useful features such as CSVReader, CSVDownloader, readString, jsonToCSV, readRemoteFile, ... etc.
https://react-papaparse.js.org
MIT License
363 stars 60 forks source link

Feature request: onRemovedFile (or something similar) #116

Open jadenmazzone opened 2 years ago

jadenmazzone commented 2 years ago

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 commented 2 years ago

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

DanKellyRedcat commented 2 years ago

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 commented 2 years ago

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

rishipisipati commented 2 years ago

@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 commented 2 years ago

In @rishipisipati 's code, replacing

getRemoveFileProps.onClick(event); with

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