Unable to cancel HTTP request for file upload process from Angular project #8417

1dataladder created 4 years ago

Hello, dear Support Team,

We use ASP.NET Zero template for ASP.NET Core 2.2 and Angular 8. File upload functionality was implemented to upload large files. POST HTTP request from '@angular/common/http' was used for this purposes. Subscription is stored in a variable and '.unsubscribe(). is used to cancel process. From UI everything looks fine: progress bar disappears and upload process seems to be cancelled. But if inspect network activity in the browser, request has a status 'pending' until the request will be completed.

The next code was used to call request:

let baseUrl = AppConsts.remoteServiceBaseUrl;
let url = baseUrl + "/api/services/app/Data/UploadDataFile";
let fileToUpload: File = this.filesToUpload.values().next().value;

const formData: FormData = new FormData();
formData.append('UploadedFile', fileToUpload, fileToUpload.name);

this.requestSubscription = this._httpClient
    .post<any>(url, formData)
    .pipe(finalize(() => console.log('complete...') ))
    .subscribe(response => { console.log('done.'); });
this.requestSubscription.unsubscribe();

I've created the new sample project with absolutely similar functionality and it works properly. Moreover, if use Angular part from the sample and backend ASP.NET Core part from real application to call Upload WEB method - cancellation works.

Such behavior was tested on Boilerplate project and the new demo ASP.NET Zero project, but cancellation did not work as well.

Could you please assist, what can be the reason of the issue? I can provide additional information if needed.

Best Regards, Pavel Demidov Senior Software Developer, DataLadder LLC

3 Answer(s)