javascript - How do I tell the custom onSuccess function to stop the upload spinner in Ant Design Upload component? - Stack Over

admin管理员组

文章数量:1313156

I have this code:

render() {
    const props = {
      onChange: this.handleChange,
      multiple: true,
      name: 'datafiles[]',
      defaultFileList: this.initialState.fileList,
      listType: "text",
      onSuccess: (resp, file, xhr) => {
        file.status = 'done';
        const newDatafile = {
          filename: file.name,
          s3ObjectKey: `${this.props.userId}/${this.props.datasetId}`,
          filesizeBytes: file.size
        }
        this.props.saveNewDatafile(newDatafile, (saveError, savedJob) => {
            //Yadda yadda
        })
      },
      showUploadList: {
        showPreviewIcon: true,
        showRemoveIcon: true
      },
      customRequest: customRequest
    };

As you can see, I am using the customRequest. If I don't pass the onSuccess function, then the ponent works properly on success. But when I pass it, the progress bar reaches the end, but it still shows the spinner as if it was still uploading.

Pesky spinner before the filename

How do I tell the Upload ponent that the upload finished? I tried with the file.status = 'done' in a sad attempt to fix it, but no luck. I need the custom onSuccess function so I can call the saveNewDatafile function.

I have this code:

render() {
    const props = {
      onChange: this.handleChange,
      multiple: true,
      name: 'datafiles[]',
      defaultFileList: this.initialState.fileList,
      listType: "text",
      onSuccess: (resp, file, xhr) => {
        file.status = 'done';
        const newDatafile = {
          filename: file.name,
          s3ObjectKey: `${this.props.userId}/${this.props.datasetId}`,
          filesizeBytes: file.size
        }
        this.props.saveNewDatafile(newDatafile, (saveError, savedJob) => {
            //Yadda yadda
        })
      },
      showUploadList: {
        showPreviewIcon: true,
        showRemoveIcon: true
      },
      customRequest: customRequest
    };

As you can see, I am using the customRequest. If I don't pass the onSuccess function, then the ponent works properly on success. But when I pass it, the progress bar reaches the end, but it still shows the spinner as if it was still uploading.

Pesky spinner before the filename

How do I tell the Upload ponent that the upload finished? I tried with the file.status = 'done' in a sad attempt to fix it, but no luck. I need the custom onSuccess function so I can call the saveNewDatafile function.

• javascript
• reactjs
• antd

Share Improve this question Follow asked Nov 6, 2017 at 17:15 TyrannogynaTyrannogyna 63111 gold badge77 silver badges2929 bronze badges 10

• I didn't see an onSuccess prop in the docs ? – Dane Commented Nov 6, 2017 at 17:30
• Seems like the property is spinning @ ant.design/ponents/spin/… – Thirueswaran Rajagopalan Commented Nov 6, 2017 at 17:34
• 1 @Dane, In the docs, if you go to the customRequest docs (github./react-ponent/upload#customrequest) you can see that you can pass a onSuccess function there, which works and it is called here github./react-ponent/upload/blob/master/src/… line 134 – Tyrannogyna Commented Nov 6, 2017 at 17:53
• @ThirueswaranRajagopalan This does not relate at all with my question, it's a different ponent and the normal behaviour in the Upload ponent is that the spinner disappears along the progress bar, not that it stops spinning. – Tyrannogyna Commented Nov 6, 2017 at 17:55
• 1 Yeah, been there, hahaha! Congrats on figuring it out. – Tyrannogyna Commented Feb 21, 2018 at 12:07

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 2

I fixed it by using the onChange function instead of the onSuccess function, and adding a conditional if (file.status === 'done')

After digging into src of upload ponent, I think it's impossible to use customRequest to control upload status, we have on way to set status in callback onSuccess.

https://github./ant-design/ant-design/blob/d89ffcc5b22cd7a722e1d9740f2f6f04c014f09b/ponents/upload/Upload.tsx#L77-L97

That said, I found an example in the repo of antd to upload manually.

It seems antd prefer callback onChange instead of onSuccess/onError directly.

const preventRequest = () => false;

<Upload beforeUpload={preventRequest}>
  <Button>
    <Icon type="upload" /> upload
  </Button>
</Upload>

本文标签：