Implement of file upload with customrequest using antd and firebase storage

uploadfirebase.js

<Upload
                name="file"
                // eslint-disable-next-line no-undef
                customRequest={data => {
                  const { firebase } = this.props;

                  const ref = firebase
                    .storage()
                    .ref('music')
                    .child(`${new Date().getTime()}`);

                  const task = ref.put(data.file);
                  task.on(
                    firebase.storage.TaskEvent.STATE_CHANGED,
                    snapshot => {
                      const progress = Math.round(
                        (100 * snapshot.bytesTransferred) / snapshot.totalBytes
                      );
                      this.setState({
                        onUploadStart: true,
                        uploadProgress: progress,
                      });
                    },
                    error => {
                      // Handle error during the upload
                      this.setState({
                        onUploadError: error,
                        onUploadSuccess: false,
                      });
                    },
                    () => {
                      task.snapshot.ref
                        .getDownloadURL()
                        .then(downloadURL =>
                          this.setState({ songUrl: downloadURL })
                        );
                      this.setState({
                        onUploadSuccess: true,
                        onUploadStart: false,
                      });
                    }
                  );
                }}
              >
                <Button>
                  <Icon type="upload" /> Click to Upload
                </Button>
                {this.state.onUploadStart && (
                  <Progress type="line" percent={this.state.uploadProgress} />
                )}
                {this.state.onUploadError && message.error('an error occured')}
              </Upload>

Hi, just checked that few days ago but I couldn't get a way out however it served a lot then I got it worked like that here

@jmndao Well noted! Appreciated and also the solution you implemented is way better. Thank you!!

Welcome !! Happy to join your twitter.