1 files changed, 15 insertions, 1 deletions

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)
       }
     )