react drag drop files re-upload issue in chrome

Question

handleChange function doesn't trigger when the uploaded file is uploaded again . It working fine in firefox. and there is no issue in same file droping.

import React, { useState } from "react";
import { FileUploader } from "react-drag-drop-files";

const fileTypes = ["JPG", "PNG", "GIF"];

function DragDrop() {
  const [file, setFile] = useState(null);
  const handleChange = (file) => {
    setFile(file);
  };
  return (
    <FileUploader handleChange={handleChange} name="file" types={fileTypes} />
  );
}

export default DragDrop;

Answer 1

I have managed to fix this by adding the property fileOrFiles as given below

const [fileAdded, setFileAdded] = useState(null);

<FileUploader 
fileOrFiles={fileAdded}
handleChange={ async (file)=>{
    // Process file like upload to server or make inner html

    setFileAdded(null);  // Resetting file this will allow to add same file

}}
/>

Answer 2

I am facing the same issue. Even fileorFiles is not making any changes. If the File is uploaded again. the handleChange function is not getting triggered. Also in the above example we are not changing the fileAdded value it is always null.

<FileUploader handleChange={handleChange} name="file" types={fileTypes}  fileOrFiles={fileAdded}>
   </FileUploader>

Answer 3

I was facing the same issue, with the below solution it is fixed for me:

const [fileAdded, setFileAdded] = useState(null);
const handleChange=(file)=>{
 setFileAdded(null);
}
<FileUploader handleChange={(e) => {
setTimeout(() => {
 handleChange(e)
}} 
name="file" types={fileTypes} maxSize={251} fileOrFiles={fileAdded}>
</FileUploader>