Single ant upload list item only

Question

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?

Answer 1

The multiple prop you are specifying is concerning if we allow selecting multiple files in the file select popup, so it doesn't help you here.

There is no immediate way to show only the last upload, but using the fileList property you can implement your own display to accomplish that. See https://ant.design/components/upload/#components-upload-demo-fileList

Answer 2

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])