Search code examples
javascriptreactjsantd

Ant Design/Reactjs uploader (dragger) stop upload list loading

I'm using Ant-Design uploader/dragger in my reactjs project, I want to upload files after push the button, so I used customRequest, everything works good but I have small problem, it's more bad ux for user; if you pick a file, list shown but it display small loading, I want to show clipper icon instead of loading icon, because it tell user to wait for upload! but I don't want upload on select, it should press button for upload.

So here is my code:

<Dragger
                    {...uploadProps}
                >
                    <p className="ant-upload-drag-icon">
                        <InboxOutlined />
                    </p>
                    <p className="ant-upload-text">Click or drag file to this area to upload</p>
                    <p className="ant-upload-hint">
                        Support for a single or bulk upload. Strictly prohibited from uploading company data or other
                        banned files.
                    </p>
                </Dragger>

const uploadProps = {
        name: 'file',
        multiple: true,

        customRequest(file){
            attacheFile(file) // this is my custom request
        }
    }

enter image description here

How can I stop this loading?

And show this instead:

enter image description here

Solution

  • There is no native way to stop upload list loading, but you can do a tricky way to stop it.

    Add this to your uploadProps to change upload list status to done:

    onChange(file) {
  file.fileList.filter((x)=>x.status = "done")
}

    That's it!