Allow antd upload component to show progress bar then remove item after upload

Question

I'm using the ant design uploader component. This all works, however if the file fails to upload for any reason it shows the upload file in red underneath.

What I want to achieve is the file should show while it is uploading (as the progress is shown) then once it has finished, regardles of the outcome (success or fail) it should then not show the file.

I have tried to manipulate the filelist, however when this is set on the component I no longer get the file progress.

Answer 1

I managed to work this one out, you have to manipulate the fileList yourself and also handle the upload progress. This is what I came up with...

<Dragger 
    name='CertificateFile' 
    multiple={false} 
    onChange={SingleFileUploadOnChange} 
    customRequest={SingleCertificateFileUploadProcessFile}
    showUploadList={FormState.SingleCertFileUploading}
    fileList={fileList}
>

const [FormState, SetFormState] = useState({
    FormSubmitting: false,
    SingleCertFileUploading: false,
});
     
const [fileList, setFileList] = useState([]);

const SingleFileUploadOnChange = (info) => {
    const FileFound = fileList.some(el => el.name === info.file.name);
    if (!FileFound){
        let NewFileItem = {
            uid: info.file.uid,
            name: info.file.name,
            status: info.file.status,
            percent: 0,
            url: ""
        };
        setFileList(prevState => ([...prevState, NewFileItem]));
    } else {
        // update progress
        const UpdatedFileList = fileList.map(obj => {
            if (obj.name === info.file.name){
                return {...obj, percent: info.file.percent}
            }
        })
        setFileList(UpdatedFileList);
    }

    SetFormState({...FormState, SingleCertFileUploading: true});

    if (['done','error'].includes(info.file.status)){
        var filtered = fileList.filter((el) => { return el.name != info.file.name; }); 
        setFileList(filtered);
    }
}