Issue #196 : Allow to cancel an upload (#221)

* issue #196

* fixed missattribution of var

* fix styling issue

* renamed videoUpload to videoUploadObservable

* added created path to gitignore

* changed uploadCancel method name to cancelUpload

2 files changed, 23 insertions, 4 deletions

diff --git a/client/src/app/videos/+video-edit/video-add.component.html b/client/src/app/videos/+video-edit/video-add.component.html
index 34291c6c6..4e9b78cf2 100644
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/client/src/app/videos/+video-edit/video-add.component.html
@@ -32,10 +32,15 @@
     </div>
   </div>
 
-  <p-progressBar
-      *ngIf="isUploadingVideo" [value]="videoUploadPercents"
+  <div
+    *ngIf="isUploadingVideo"
+  >
+    <p-progressBar
+      [value]="videoUploadPercents"
       [ngClass]="{ processing: videoUploadPercents === 100 && videoUploaded === false }"
-  ></p-progressBar>
+    ></p-progressBar>
+    <input type="button" value="Cancel" (click)="cancelUpload()" />
+  </div>
 
   <!-- Hidden because we need to load the component -->
   <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form">
diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts
index d0d17fa86..6e0830ab7 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -27,6 +27,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
 
   isUploadingVideo = false
   videoUploaded = false
+  videoUploadObservable = null
   videoUploadPercents = 0
   videoUploadedIds = {
     id: 0,
@@ -93,6 +94,16 @@ export class VideoAddComponent extends FormReactive implements OnInit {
     return this.form.valid
   }
 
+  cancelUpload () {
+    if (this.videoUploadObservable !== null) {
+      this.videoUploadObservable.unsubscribe()
+      this.isUploadingVideo = false
+      this.videoUploadPercents = 0
+      this.notificationsService.error('Error', 'Upload cancelled')
+      this.videoUploadObservable = null
+    }
+  }
+
   uploadFirstStep () {
     const videofile = this.videofileInput.nativeElement.files[0]
     if (!videofile) return
@@ -132,7 +143,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
       channelId
     })
 
-    this.videoService.uploadVideo(formData).subscribe(
+    this.videoUploadObservable = this.videoService.uploadVideo(formData).subscribe(
       event => {
         if (event.type === HttpEventType.UploadProgress) {
           this.videoUploadPercents = Math.round(100 * event.loaded / event.total)
@@ -142,6 +153,8 @@ export class VideoAddComponent extends FormReactive implements OnInit {
           this.videoUploaded = true
 
           this.videoUploadedIds = event.body.video
+
+          this.videoUploadObservable = null
         }
       },
 
@@ -149,6 +162,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
         // Reset progress
         this.isUploadingVideo = false
         this.videoUploadPercents = 0
+        this.videoUploadObservable = null
         this.notificationsService.error('Error', err.message)
       }
     )