FileUpload component not cleared after successful upload

[njain]

Hello,

I have referred to the following post on Stackoverflow and as well as PrimeReact demo.

https://stackoverflow.com/questions/603 ... -component

I am able to upload the file, but after successful execution, FileUpload component is not cleared. The uploaded file is still listed in the component.

Code
---------
<FileUpload name="doc" chooseLabel="Upload documents" multiple customUpload uploadHandler={this.docUploadHandler} maxFileSize={1000000} />

docUploadHandler = ({files}) => {
for(var x = 0; x < files.length; x++){
var currFile = files[x];
var fileReader = new FileReader();
fileReader.onload = (e) => {
this.uploadInvoice(e.target.result, currFile);
};
fileReader.readAsText(currFile);
}
};

uploadInvoice(invoiceFile, file) {
let formData = new FormData();
formData.append('document', invoiceFile);
formData.append('name', file.name);
formData.append('size', file.size);
formData.append('type', file.type);

// axios call
};

Thanks in advance for any advise.

Best Regards
Nitin

[njain]

Hello,

I have been able to fix this by calling clear() method on the file uploader 'ref'

Code: Select all

<FileUpload ref={ref => { this.fileUploaderRef = ref}} name="doc" chooseLabel="Upload documents" customUpload 
    uploadHandler={this.docUploadHandler} maxFileSize={1000000} emptyTemplate={<p className="p-m-0">Drag and drop files to here to upload.</p>}/>

Code: Select all

docUploadHandler = ({files}) => {
	// read file
	
	this.fileUploaderRef.clear();
}

Should have figured it out earlier.

Best Regards
Nitin