Skip to content

Instantly share code, notes, and snippets.

@rijkerd
Last active August 24, 2021 20:31
Show Gist options
  • Save rijkerd/ddcff3b5e3c3357ec9ddbadf4867dccd to your computer and use it in GitHub Desktop.
Save rijkerd/ddcff3b5e3c3357ec9ddbadf4867dccd to your computer and use it in GitHub Desktop.
Implement of file upload with customrequest using antd and firebase storage
<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>
@rijkerd
Copy link
Author

rijkerd commented Aug 24, 2021

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

@jmndao
Copy link

jmndao commented Aug 24, 2021

Welcome !! Happy to join your twitter.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment