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

user_767561 0
Viewed 33

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.

Example of what is happening

antd reactjs
2 Answers

Check the following example

You can set showUploadList to true if it is uploading the file and false if it has uploaded successfully or when file upload fails

import React, { useState } from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { InboxOutlined } from '@ant-design/icons';
import { message, Upload } from 'antd';

const { Dragger } = Upload;

const App = () => {
  const [showupload, setShowupload] = useState(false);

  const props = {
    name: 'file',
    multiple: true,
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    
    onChange(info) {
      setShowupload(true);
      const { status } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
        setShowupload(false);
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
        setShowupload(false);
      }
    },

    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };

  return (
    <Dragger {...props} showUploadList={showupload}>
      <p className="ant-upload-drag-icon">
        <InboxOutlined />
      </p>
      <p className="ant-upload-text">
        Click or drag file to this area to upload
      </p>
    </Dragger>
  );
};

export default App;

Output:

GIF

user_182005800

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);
    }
}
user_7675610
Related