I am using ant design to upload csv with this form input:
ce(Form.Item, { className: 'form_input' },
ce(Upload, { onChange: handleFileChange, className:'csv', multiple: false },
ce(Button, { type: 'ghost' },
ce(Icon, { type: 'upload' }), ' Choose File',
)
),
)
The form allows multiple uploads and the new uploads get appended to "ant-upload-list-item". How can I prevent the append and only keep the latest item in there?
I tried with below code which worked fine for me for uploading single file and update uploaded file name.
const props = {
name: 'file',
multiple: false,
showUploadList: {
showDownloadIcon: false,
},
onRemove: file => {
this.setState(state => {
return {
fileList: []
};
});
},
beforeUpload: file => {
this.setState(state => ({
fileList: [file]
}))
return false;
},
fileList
}
Can work for both Upload and Dragger
<Dragger {...props} >
<p className="ant-upload-drag-icon">
<Icon type="cloud-upload" />
</p>
<p className="ant-upload-text">Click or drag file to this area to upload</p>
</Dragger>
<Upload {...props} accept=".asc,.pem,.pub" style={{ width: '100%' }} tabIndex={3}>
<Button disabled={is_view} style={{ width: '100%' }}>
<Icon type="upload" />
{this.state.fileList && this.state.fileList[0] && this.state.fileList[0].name ? this.state.fileList[0].name : 'Click to Upload'}
</Button>
</Upload>
On Submit-
const formData = new FormData()
formData.append('file', this.state.fileList[0])
Set the maxCount property to 1. It will replace the previous upload with the new file.
You can check the documentation here -> https://ant.design/components/upload/#components-upload-demo-fileList