Merge pull request #15668 from kubedan/master

Fixed #15664 - Cancel upload file request

src/app/components/fileupload/fileupload.ts

@@ -525,6 +525,8 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe
 
     public uploadedFiles = [];
 
+    private fileUploadSubcription: Subscription;
+
     constructor(
         @Inject(DOCUMENT) private document: Document,
         @Inject(PLATFORM_ID) private platformId: any,
@@ -746,7 +748,10 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe
                 formData.append(this.name!, this.files[i], this.files[i].name);
             }
 
-            this.http
+            // If the previous upload hasn't been finished, it is aborted.
+            this.cancelUploadRequest();
+
+            this.fileUploadSubcription = this.http
                 .request(<string>this.method, this.url as string, {
                     body: formData,
                     headers: this.headers,
@@ -805,6 +810,7 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe
     clear() {
         this.files = [];
         this.uploadedFileCount = 0;
+        this.cancelUploadRequest();
         this.onClear.emit();
         this.clearInputElement();
         this.cd.markForCheck();
@@ -816,6 +822,7 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe
      * @group Method
      */
     remove(event: Event, index: number) {
+        this.cancelUploadRequest();
         this.clearInputElement();
         this.onRemove.emit({ originalEvent: event, file: this.files[index] });
         this.files.splice(index, 1);
@@ -826,12 +833,22 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe
      * @param {Number} index - Index of the file to be removed.
      * @group Method
      */
-    removeUploadedFile(index) {
+     removeUploadedFile(index) {
         let removedFile = this.uploadedFiles.splice(index, 1)[0];
         this.uploadedFiles = [...this.uploadedFiles];
         this.onRemoveUploadedFile.emit({ file: removedFile, files: this.uploadedFiles });
     }
 
+    /**
+     * Cancel upload file request.
+     * */
+    cancelUploadRequest() {
+        if (this.fileUploadSubcription) {
+            this.fileUploadSubcription.unsubscribe();
+            this.fileUploadSubcription = undefined;
+        }
+    }
+
     isFileLimitExceeded() {
         const isAutoMode = this.auto;
         const totalFileCount = isAutoMode ? this.files.length : this.files.length + this.uploadedFileCount;