React Dropzone cancel file upload on a button click - reactjs

Question

I'm using react-dropzone to upload files to my server in my react app. Everything is working great but I want to add a feature where if a file is taking too long to upload due to its size, the user can cancel the process with the click of a button.
<Dropzone
multiple={ false }
accept={ allowedMimeTypes }
onDrop={ this.onDrop }
onDragEnter={ this.onDragEnter }
onDragLeave={ this.onDragLeave }
className={ classes.dropzone }
maxSize={ MAX_UPLOAD_BYTES }
>
</Dropzone>
<button onClick={ this.onCancelUpload }>Cancel</button>
Please advise, if It is possible using react-dropzone. I can't think of a way to stop the event that is already triggered and is uploading the file.

Answer 1

I was able to solve the above problem using the Axios Cancel Token.
Use Axios to handle the upload as a promise.
Create a source at the start of your code.
const CancelToken = axios.CancelToken;
let source = CancelToken.source();
Pass on the source to the request in config.
const {
acceptedFiles
} = this.state;
const uploaders = acceptedFiles.map((file) => {
const formData = new FormData();
// data must be set BEFORE sending file
formData.append('document', file);
const uploadConfig = {
onUploadProgress: (progressEvent) => {
const progressUpload = (progressEvent.loaded * 100) / progressEvent.total;
this.setState({
progressUpload
});
},
cancelToken: source.token,
};
return inkerzApi.post('/uploads/file', formData, uploadConfig)
.then(response => response.data)
.catch(() => console.log('Upload canceled'));
});
Promise.all(uploaders).then((filesMetadata) => {
filesMetadata.forEach((metadata) => {
if (metadata && metadata.mediaLink && metadata.totalPages) {
this.onNewFileUploaded(metadata);
// show success message here
} else if (this.state.uploadCanceled) {
// show cancelation notification here
this.setState({
uploadCanceled: false
});
}
});
this.setState({
acceptedFiles: [],
progressUpload: 0,
});
});
On Cancel Button Click
onCancelUpload = () => {
source.cancel('Operation canceled by the user.');
source = CancelToken.source();
this.setState({ uploadCanceled: true });
}
This worked out for me. Hope this helps others as well.