Handle error for the video upload

3 files changed, 20 insertions, 1 deletions

diff --git a/client/src/app/videos/video-add/video-add.component.html b/client/src/app/videos/video-add/video-add.component.html
index 80d229cb8..cbe274e8a 100644
--- a/client/src/app/videos/video-add/video-add.component.html
+++ b/client/src/app/videos/video-add/video-add.component.html
@@ -1,5 +1,7 @@
 <h3>Upload a video</h3>
 
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
 <form (ngSubmit)="uploadFile()" #videoForm="ngForm">
   <div class="form-group">
     <label for="name">Video name</label>
diff --git a/client/src/app/videos/video-add/video-add.component.ts b/client/src/app/videos/video-add/video-add.component.ts
index 8df4f951b..144879a54 100644
--- a/client/src/app/videos/video-add/video-add.component.ts
+++ b/client/src/app/videos/video-add/video-add.component.ts
@@ -18,6 +18,7 @@ import { AuthService, User } from '../../shared';
 })
 
 export class VideoAddComponent implements OnInit {
+  error: string = null;
   fileToUpload: any;
   progressBar: { value: number; max: number; } = { value: 0, max: 0 };
   user: User;
@@ -57,11 +58,23 @@ export class VideoAddComponent implements OnInit {
 
         // Print all the videos once it's finished
         this.router.navigate(['VideosList']);
+      },
+
+      fail: (e, data) => {
+        const xhr = data.jqXHR;
+        if (xhr.status === 400) {
+          this.error = xhr.responseText;
+        } else {
+          this.error = 'Unknow error';
+        }
+
+        console.error(data);
       }
     });
   }
 
   uploadFile() {
+    this.error = null;
     this.form.formData = jQuery(this.elementRef.nativeElement).find('form').serializeArray();
     this.form.headers = this.authService.getRequestHeader().toJSON();
     this.form.submit();
diff --git a/client/src/app/videos/video-list/video-list.component.html b/client/src/app/videos/video-list/video-list.component.html
index 155025b5e..00392a81f 100644
--- a/client/src/app/videos/video-list/video-list.component.html
+++ b/client/src/app/videos/video-list/video-list.component.html
@@ -1,5 +1,9 @@
 <div class="row videos-info">
-  <div class="col-md-9 videos-total-results"> {{ pagination.total }} videos</div>
+  <div class="col-md-9 videos-total-results">
+    {{ pagination.total }} videos
+
+    <my-loader [loading]="loading"></my-loader>
+  </div>
   <my-video-sort class="col-md-3" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
 </div>