Question 302052 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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

Tags:

2

Answers


  1. 0

    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!

    Login or Signup to reply.
  2. 0

    Based on the callback provided at the CustomRequest prop:
    customRequest callback is passed an object with:

    onProgress: (event: { percent: number }): void
onError: (event: Error, body?: Object): void
onSuccess: (body: Object): void
data: Object
filename: String
file: File
withCredentials: Boolean
action: String
headers: Object

    You can call the onProgress (100%) event or onSuccess as soon as the file as been picked. This will make the Dragger to think that the request has been completed already and it won’t display a Loader

    based on this answer by @blueseal [https://stackoverflow.com/questions/58128062/using-customrequest-in-ant-design-file-upload][1]

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search