search

KarimMokhtar / react-drag-drop-files

Light and simple Reactjs drag and drop files library to use with very flexible options to change, so you put whatever the design you want for your drop-area. Users can drag and drop or even select the file anywhere in the window.
MIT License
245 stars 86 forks source link

How to reinitialize Fileuploader component? #91

Closed ajithv11 closed 1 year ago

ajithv11 commented 1 year ago

Hi,

I am facing an issue when I tried to upload same image two time, Could you please let me know if there is a reinitilization of exist here, My code is given below

<div className="imagedragdrop">
<FileUploader 
    classes={"draggableInput"}
    onSelect={ async (file)=>{
        console.log(file)
    }}
    handleChange={ async (file)=>{
        console.log(file); // This is not working if same image is upload multiple times
    }} 
    name="testImg" 
    types={imgTypes} 
/> 
</div>

Thanks in advance

ajithv11 commented 1 year ago

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

}}
/>