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

Question

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 component 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 component 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.

Answer 1

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