more explicit error messages for file uploads

1 files changed, 38 insertions, 19 deletions

diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
index 258f5c7a0..fdd0a56e5 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
@@ -1,9 +1,9 @@
 import { Subscription } from 'rxjs'
-import { HttpEventType, HttpResponse } from '@angular/common/http'
+import { HttpErrorResponse, HttpEventType, HttpResponse } from '@angular/common/http'
 import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService, CanComponentDeactivate, Notifier, ServerService, UserService } from '@app/core'
-import { scrollToTop } from '@app/helpers'
+import { scrollToTop, uploadErrorHandler } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
 import { BytesPipe, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
@@ -41,11 +41,13 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     id: 0,
     uuid: ''
   }
+  formData: FormData
 
   waitTranscodingEnabled = true
   previewfileUpload: File
 
   error: string
+  enableRetryAfterError: boolean
 
   protected readonly DEFAULT_VIDEO_PRIVACY = VideoPrivacy.PUBLIC
 
@@ -118,6 +120,12 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     this.uploadFirstStep()
   }
 
+  retryUpload () {
+    this.enableRetryAfterError = false
+    this.error = ''
+    this.uploadVideo()
+  }
+
   cancelUpload () {
     if (this.videoUploadObservable !== null) {
       this.videoUploadObservable.unsubscribe()
@@ -127,6 +135,8 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
       this.videoUploadObservable = null
 
       this.firstStepError.emit()
+      this.enableRetryAfterError = false
+      this.error = ''
 
       this.notifier.info($localize`Upload cancelled`)
     }
@@ -163,20 +173,20 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
     const downloadEnabled = true
     const channelId = this.firstStepChannelId.toString()
 
-    const formData = new FormData()
-    formData.append('name', name)
+    this.formData = new FormData()
+    this.formData.append('name', name)
     // Put the video "private" -> we are waiting the user validation of the second step
-    formData.append('privacy', VideoPrivacy.PRIVATE.toString())
-    formData.append('nsfw', '' + nsfw)
-    formData.append('commentsEnabled', '' + commentsEnabled)
-    formData.append('downloadEnabled', '' + downloadEnabled)
-    formData.append('waitTranscoding', '' + waitTranscoding)
-    formData.append('channelId', '' + channelId)
-    formData.append('videofile', videofile)
+    this.formData.append('privacy', VideoPrivacy.PRIVATE.toString())
+    this.formData.append('nsfw', '' + nsfw)
+    this.formData.append('commentsEnabled', '' + commentsEnabled)
+    this.formData.append('downloadEnabled', '' + downloadEnabled)
+    this.formData.append('waitTranscoding', '' + waitTranscoding)
+    this.formData.append('channelId', '' + channelId)
+    this.formData.append('videofile', videofile)
 
     if (this.previewfileUpload) {
-      formData.append('previewfile', this.previewfileUpload)
-      formData.append('thumbnailfile', this.previewfileUpload)
+      this.formData.append('previewfile', this.previewfileUpload)
+      this.formData.append('thumbnailfile', this.previewfileUpload)
     }
 
     this.isUploadingVideo = true
@@ -190,7 +200,11 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
       previewfile: this.previewfileUpload
     })
 
-    this.videoUploadObservable = this.videoService.uploadVideo(formData).subscribe(
+    this.uploadVideo()
+  }
+
+  uploadVideo () {
+    this.videoUploadObservable = this.videoService.uploadVideo(this.formData).subscribe(
       event => {
         if (event.type === HttpEventType.UploadProgress) {
           this.videoUploadPercents = Math.round(100 * event.loaded / event.total)
@@ -203,13 +217,18 @@ export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy
         }
       },
 
-      err => {
-        // Reset progress
-        this.isUploadingVideo = false
+      (err: HttpErrorResponse) => {
+        // Reset progress (but keep isUploadingVideo true)
         this.videoUploadPercents = 0
         this.videoUploadObservable = null
-        this.firstStepError.emit()
-        this.notifier.error(err.message)
+        this.enableRetryAfterError = true
+
+        this.error = uploadErrorHandler({
+          err,
+          name: $localize`video`,
+          notifier: this.notifier,
+          sticky: false
+        })
       }
     )
   }