How to cancel a POST call while file upload in Angular 14-CodePudding

I'm creating a custom file up-loader for my project. I want to add "cancel file upload feature" also. Assume that I've already dragged and dropped some 4 or 5 file into the component. this files are stored in file variable. When I click on "Upload" button from the UI following method will be called:

uploadFiles() {
    const formData = new FormData();
    formData.append('excel', this.file);
    const headers = new HttpHeaders({
      'x-request-id': 'file_upload_'   new Date().getTime(),
    });
    this.http
      .post('http://localhost:8090/service/fileprocess/upload', formData, {
        headers: headers,
        responseType: 'json',
      })
      .pipe(catchError((err) => this.handleError(err)))
      .subscribe((res: any) => {
         // show success message to the user
      });
}

Let's say I pressed the upload button but there is one file which is taking longer than expected. Then the user should be able to cancel that particular upload by clicking on its respective ban icon. This is my template:

<div  *ngFor="let item of files; let indexOfelement=index;">
  <div >
    <p-progressSpinner *ngIf="fileUploading"></p-progressSpinner>
  </div>
  <div >
    {{ item.relativePath }}
  </div>
  <div >
    <p-progressBar *ngIf="fileFound" [value]="variable"></p-progressBar>
  </div>
  <div >
    <i  *ngIf="fileUploading" (click)="stopThisUpload(indexOfelement)"></i>
  </div>
</div>

The UI looks like this:

Can someone please guide me on this.

CodePudding user response：

If your request included all files to upload in one request, it is not possible to just remove one single file from the request "on the fly".

But let's assume that your files will be uploaded sequentially (which is not clear from your question), you can just unsubscribe from your request, which will result in angular cancelling the ongoing request:

sub = this.http
  .post('http://localhost:8090/service/fileprocess/upload', formData, {
    headers: headers,
    responseType: 'json',
  })
  .pipe(catchError((err) => this.handleError(err)))
  .subscribe((res: any) => {
    // show success message to the user
  });

....

// in click handler
sub.unsubscribe();

Of course you can also define a Subject, which will have the same effect (unsubscribing if a value is emitted):

unsubscribCurrentFile = new Subject<void>();
...
sub = this.http
  .post('http://localhost:8090/service/fileprocess/upload', formData, {
    headers: headers,
    responseType: 'json',
  })
  .pipe(takeUntil(this.unsubscribeCurrentFile), catchError((err) => this.handleError(err)))
  .subscribe((res: any) => {
    // show success message to the user
  });

....

// in click handler
this.unsubscribCurrentFile.next();

CodePudding user response：

it's a good case for using the AbortController from Fetch api.

For example:

const controller = new AbortController();
const signal = controller.signal;

function abortRequest() {
  controller.abort();
  console.log("aborted");
}

function fetchVideo() {
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    }).catch((err) => console.error(err.message));
}

references:

https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort