Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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!

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading