FileUpload Selected Files Clear Issue

[kasiviswanath]

We are using customhandler for uploading files. After successful upload want to remove the selected files from the list of files showing on UI.
Currently I dont find any option to remove these files from custom handler function. Please help

[gabrielborgesc]

I had the same problem. The Filepload documentation mentions that there is a clear method, but I was unable to use it.

So my solution was to create my own FileUpload that I named "FileUploadCard", but still using primereact components and other pure html elements. The idea is to use a not displayed html input with type "file" and trigger it by a button.

Here's my code:

import React from 'react'
import { Button } from 'primereact/button'
import { DataTable } from 'primereact/datatable'
import { Column } from 'primereact/column'


class FileUploadCard extends React.Component{

constructor() {
super();
this.hiddenFileInput = React.createRef();
}

state = {
files: [],
selectedFiles: null,
}

handleClick = () => {
this.hiddenFileInput.current.click()
}

onFileChange = async event => {
var array = this.state.files
array.push(...event.target.files)
await this.setState({files: array})
event.target.value = null
}

delete = async () => {
var array = this.state.files
Array.from(this.state.selectedFiles).forEach(element => {
const index = this.state.files.indexOf(element)
array.splice(index, 1)
});
await this.setState({files: array})
this.setState({selectedFiles: null})
}


upload = () => {
//your code to send the files in (this.state.files) to an api
}

render() {

return (
<div className = "card mb-3">
<div className = "card-header">
<Button
label="Escolher arquivos"
icon="pi pi-plus"
onClick={this.handleClick}
style={ {maxHeight: '35px'} }
disabled={this.state.uploadInProgress}
/>
<Button
label="Upload"
icon="pi pi-upload"
style = { {maxHeight: '35px', marginLeft: '8px'} }
onClick={this.upload}
disabled={!this.state.files.length || this.state.uploadInProgress}
/>
<Button
label="Deletar"
icon="pi pi-trash"
className="p-button-danger"
style = { {maxHeight: '35px', marginLeft: '8px'} }
onClick={this.delete}
disabled={!this.state.files.length || this.state.uploadInProgress}
/>

<input type="file"
name="file"
accept=".zip"
ref={this.hiddenFileInput}
onChange={this.onFileChange}
multiple
style={{display:'none'}}/>
</div>
<div className="card-body">
<div className="row">
<div className="col-lg-12">
<div className="bs-component">
<DataTable value={this.state.files}
selection={this.state.selectedFiles}
onSelectionChange={(e) => this.setState({selectedFiles: e.value})}
scrollable
scrollHeight="400px"
dataKey="name" paginator rows={10} rowsPerPageOptions={[5, 10, 25]}
ginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
>
<Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
<Column field="name" header="Nome do arquivo" sortable></Column>
</DataTable>

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

export default FileUploadCard

The difference is that using html input to file, it is just need do event.target.value=null to clear the selected files.

Since this pure html input is ugly, I blocked its display e trigger its function by "hiddenFileInput" in code.

obs: In this example, I accepted only zip files

[mert.sincan]

Hi all,
Interesting! You can use "clear" method for this. Exp;

Code: Select all

<FileUpload ref={(el) => this.upload = el} ... />

this.upload.clear();

If the problem persists, could you please attach a codesandbox link for us?

Best Regards,