How to cancel a file upload to S3 using Angular/Laravel?

I'm building a file upload with Angular and Laravel. I want to be able to cancel a file upload while it's in progress. So far it's working, but I'm not too confident so I want to make sure I'm understanding the logic correctly. If not, find a better solution.

So far, I have an Angular component for the file upload that will make an HTTP POST request to my API to upload the file using the laravel Storage facade and putFileAs().

From my understanding (I'm new to Laravel and Angular), I'm streaming the file to my backend and streaming the upload to S3 using putFileAs(). So if I want to cancel the upload to S3, I just need to unsubscribe from the observable in my angular component.

Is my understanding correct? Any holes in my logic?

Angular functions that handle the upload

uploadFile(file: File){
this.progressBar = true;
this.uploading = this.fileService.uploadFile(file)
.pipe(finalize((res) => {
console.log('Upload success!');
})
.subscribe(res => {
this.progressBar = false;
});
}


cancelUpload(){
if(this.uploading){
this.uploading.unsubscribe();
}
this.progressBar = false;
}



Controller function that handles the upload.

public function uploadFile(Request $request){
$data = $request->input();
$file = $request->file('file');

$res = Storage::disk('s3')->putFileAs('/somePath/', $file, $data['filename']);

if($res){
return response()->json($res, 200);
} else {
return response()->json($res, 422);
}
}

Continue reading...