6 files changed, 95 insertions, 120 deletions

diff --git a/client/src/app/videos/shared/video.service.ts b/client/src/app/videos/shared/video.service.ts
index b6d2a0666..cfce4cb16 100644
--- a/client/src/app/videos/shared/video.service.ts
+++ b/client/src/app/videos/shared/video.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'
 import { Observable } from 'rxjs/Observable'
 import 'rxjs/add/operator/catch'
 import 'rxjs/add/operator/map'
-import { HttpClient, HttpParams } from '@angular/common/http'
+import { HttpClient, HttpParams, HttpRequest } from '@angular/common/http'
 
 import { Search } from '../../shared'
 import { SortField } from './sort-field.type'
@@ -14,13 +14,14 @@ import {
 import { Video } from './video.model'
 import { VideoPagination } from './video-pagination.model'
 import {
-UserVideoRate,
-VideoRateType,
-VideoUpdate,
-VideoAbuseCreate,
-UserVideoRateUpdate,
-Video as VideoServerModel,
-ResultList
+  VideoCreate,
+  UserVideoRate,
+  VideoRateType,
+  VideoUpdate,
+  VideoAbuseCreate,
+  UserVideoRateUpdate,
+  Video as VideoServerModel,
+  ResultList
 } from '../../../../../shared'
 
 @Injectable()
@@ -73,6 +74,14 @@ export class VideoService {
                         .catch(this.restExtractor.handleError)
   }
 
+  // uploadVideo (video: VideoCreate) {
+  uploadVideo (video: any) {
+    const req = new HttpRequest('POST', `${VideoService.BASE_VIDEO_URL}/upload`, video, { reportProgress: true })
+
+    return this.authHttp.request(req)
+                        .catch(this.restExtractor.handleError)
+  }
+
   getVideos (videoPagination: VideoPagination, sort: SortField) {
     const pagination = this.videoPaginationToRestPagination(videoPagination)
 
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 7ad671ae7..cf8fc2b80 100644
--- a/client/src/app/videos/video-edit/video-add.component.html
+++ b/client/src/app/videos/video-edit/video-add.component.html
@@ -3,7 +3,7 @@
 
     <h3>Upload a video</h3>
 
-    <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+    <div *ngIf="error !== undefined" class="alert alert-danger">{{ error }}</div>
 
     <form novalidate [formGroup]="form">
       <div class="form-group">
@@ -62,7 +62,7 @@
       </div>
 
       <div class="form-group">
-        <label for="tags" class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
+        <label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
         <tag-input
           [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
           formControlName="tags" maxItems="3" modelAsStrings="true"
@@ -71,25 +71,22 @@
 
       <div class="form-group">
         <label for="videofile">File</label>
-        <div class="btn btn-default btn-file" [ngClass]="{ 'disabled': filename !== null }" >
+        <div class="btn btn-default btn-file">
           <span>Select the video...</span>
-          <input
-            type="file" name="videofile" id="videofile"
-            ng2FileSelect [uploader]="uploader" [disabled]="filename !== null"
-            (change)="fileChanged()"
-          >
+          <input #videofileInput type="file" name="videofile" id="videofile" (change)="fileChange($event)" />
+          <input type="hidden" name="videofileHidden" formControlName="videofile"/>
         </div>
       </div>
 
       <div class="file-to-upload">
-        <div class="file" *ngIf="uploader.queue.length > 0">
+        <div class="file" *ngIf="filename">
           <span class="filename">{{ filename }}</span>
           <span class="glyphicon glyphicon-remove" (click)="removeFile()"></span>
         </div>
       </div>
 
-      <div *ngIf="fileError" class="alert alert-danger">
-        {{ fileError }}
+      <div *ngIf="formErrors.videofile" class="alert alert-danger">
+        {{ formErrors.videofile }}
       </div>
 
       <div class="form-group">
@@ -105,7 +102,7 @@
       </div>
 
       <div class="progress">
-        <progressbar [value]="uploader.progress" max="100"></progressbar>
+        <progressbar [value]="progressPercent" max="100"></progressbar>
       </div>
 
       <div class="form-group">
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 42b11cd08..537ef9bc3 100644
--- a/client/src/app/videos/video-edit/video-add.component.ts
+++ b/client/src/app/videos/video-edit/video-add.component.ts
@@ -1,11 +1,9 @@
-import { Component, ElementRef, OnInit } from '@angular/core'
+import { Component, OnInit, ViewChild } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
 import { Router } from '@angular/router'
 
-import { FileUploader } from 'ng2-file-upload/ng2-file-upload'
 import { NotificationsService } from 'angular2-notifications'
 
-import { AuthService } from '../../core'
 import {
   FormReactive,
   VIDEO_NAME,
@@ -17,6 +15,8 @@ import {
 } from '../../shared'
 import { VideoService } from '../shared'
 import { VideoCreate } from '../../../../../shared'
+import { HttpEventType, HttpResponse } from '@angular/common/http'
+import { VIDEO_FILE } from '../../shared/forms/form-validators/video'
 
 @Component({
   selector: 'my-videos-add',
@@ -25,8 +25,10 @@ import { VideoCreate } from '../../../../../shared'
 })
 
 export class VideoAddComponent extends FormReactive implements OnInit {
+  @ViewChild('videofileInput') videofileInput
+
+  progressPercent = 0
   tags: string[] = []
-  uploader: FileUploader
   videoCategories = []
   videoLicences = []
   videoLanguages = []
@@ -34,29 +36,26 @@ export class VideoAddComponent extends FormReactive implements OnInit {
   tagValidators = VIDEO_TAGS.VALIDATORS
   tagValidatorsMessages = VIDEO_TAGS.MESSAGES
 
-  error: string = null
+  error: string
   form: FormGroup
   formErrors = {
     name: '',
     category: '',
     licence: '',
     language: '',
-    description: ''
+    description: '',
+    videofile: ''
   }
   validationMessages = {
     name: VIDEO_NAME.MESSAGES,
     category: VIDEO_CATEGORY.MESSAGES,
     licence: VIDEO_LICENCE.MESSAGES,
     language: VIDEO_LANGUAGE.MESSAGES,
-    description: VIDEO_DESCRIPTION.MESSAGES
+    description: VIDEO_DESCRIPTION.MESSAGES,
+    videofile: VIDEO_FILE.MESSAGES
   }
 
-  // Special error messages
-  fileError = ''
-
   constructor (
-    private authService: AuthService,
-    private elementRef: ElementRef,
     private formBuilder: FormBuilder,
     private router: Router,
     private notificationsService: NotificationsService,
@@ -66,11 +65,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
   }
 
   get filename () {
-    if (this.uploader.queue.length === 0) {
-      return null
-    }
-
-    return this.uploader.queue[0].file.name
+    return this.form.value['videofile']
   }
 
   buildForm () {
@@ -81,7 +76,8 @@ export class VideoAddComponent extends FormReactive implements OnInit {
       licence: [ '', VIDEO_LICENCE.VALIDATORS ],
       language: [ '', VIDEO_LANGUAGE.VALIDATORS ],
       description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
-      tags: [ '']
+      videofile: [ '', VIDEO_FILE.VALIDATORS ],
+      tags: [ '' ]
     })
 
     this.form.valueChanges.subscribe(data => this.onValueChanged(data))
@@ -92,60 +88,24 @@ export class VideoAddComponent extends FormReactive implements OnInit {
     this.videoLicences = this.videoService.videoLicences
     this.videoLanguages = this.videoService.videoLanguages
 
-    this.uploader = new FileUploader({
-      authToken: this.authService.getRequestHeaderValue(),
-      queueLimit: 1,
-      url: API_URL + '/api/v1/videos/upload',
-      removeAfterUpload: true
-    })
-
-    this.uploader.onBuildItemForm = (item, form: FormData) => {
-      const formValue: VideoCreate = this.form.value
-
-      const name = formValue.name
-      const nsfw = formValue.nsfw
-      const category = formValue.category
-      const licence = formValue.licence
-      const language = formValue.language
-      const description = formValue.description
-      const tags = formValue.tags
-
-      form.append('name', name)
-      form.append('category', '' + category)
-      form.append('nsfw', '' + nsfw)
-      form.append('licence', '' + licence)
-
-      // Language is optional
-      if (language) {
-        form.append('language', '' + language)
-      }
-
-      form.append('description', description)
-
-      for (let i = 0; i < tags.length; i++) {
-        form.append(`tags[${i}]`, tags[i])
-      }
-    }
-
     this.buildForm()
   }
 
-  checkForm () {
-    this.forceCheck()
-
-    if (this.filename === null) {
-      this.fileError = 'You did not add a file.'
-    }
-
-    return this.form.valid === true && this.fileError === ''
+  // The goal is to keep reactive form validation (required field)
+  // https://stackoverflow.com/a/44238894
+  fileChange ($event) {
+    this.form.controls['videofile'].setValue($event.target.files[0].name)
   }
 
-  fileChanged () {
-    this.fileError = ''
+  removeFile () {
+    this.videofileInput.nativeElement.value = ''
+    this.form.controls['videofile'].setValue('')
   }
 
-  removeFile () {
-    this.uploader.clearQueue()
+  checkForm () {
+    this.forceCheck()
+
+    return this.form.valid
   }
 
   upload () {
@@ -153,39 +113,49 @@ export class VideoAddComponent extends FormReactive implements OnInit {
       return
     }
 
-    const item = this.uploader.queue[0]
-    // TODO: wait for https://github.com/valor-software/ng2-file-upload/pull/242
-    item.alias = 'videofile'
-
-    item.onSuccess = () => {
-      console.log('Video uploaded.')
-      this.notificationsService.success('Success', 'Video uploaded.')
-
-      // Print all the videos once it's finished
-      this.router.navigate(['/videos/list'])
+    const formValue: VideoCreate = this.form.value
+
+    const name = formValue.name
+    const nsfw = formValue.nsfw
+    const category = formValue.category
+    const licence = formValue.licence
+    const language = formValue.language
+    const description = formValue.description
+    const tags = formValue.tags
+    const videofile = this.videofileInput.nativeElement.files[0]
+
+    const formData = new FormData()
+    formData.append('name', name)
+    formData.append('category', '' + category)
+    formData.append('nsfw', '' + nsfw)
+    formData.append('licence', '' + licence)
+    formData.append('videofile', videofile)
+
+    // Language is optional
+    if (language) {
+      formData.append('language', '' + language)
     }
 
-    item.onError = (response: string, status: number) => {
-      // We need to handle manually these cases because we use the FileUpload component
-      if (status === 400) {
-        this.error = response
-      } else if (status === 401) {
-        this.error = 'Access token was expired, refreshing token...'
-        this.authService.refreshAccessToken().subscribe(
-          () => {
-            // Update the uploader request header
-            this.uploader.authToken = this.authService.getRequestHeaderValue()
-            this.error += ' access token refreshed. Please retry your request.'
-          }
-        )
-      } else if (status === 403) {
-        this.error = 'Your video quota is reached, you can\'t upload this video.'
-      } else {
-        this.error = 'Unknown error'
-        console.error(this.error)
-      }
+    formData.append('description', description)
+
+    for (let i = 0; i < tags.length; i++) {
+      formData.append(`tags[${i}]`, tags[i])
     }
 
-    this.uploader.uploadAll()
+    this.videoService.uploadVideo(formData).subscribe(
+      event => {
+        if (event.type === HttpEventType.UploadProgress) {
+          this.progressPercent = Math.round(100 * event.loaded / event.total)
+        } else if (event instanceof HttpResponse) {
+          console.log('Video uploaded.')
+          this.notificationsService.success('Success', 'Video uploaded.')
+
+          // Display all the videos once it's finished
+          this.router.navigate([ '/videos/list '])
+        }
+      },
+
+      err => this.error = err.message
+    )
   }
 }
diff --git a/client/src/app/videos/video-edit/video-update.component.ts b/client/src/app/videos/video-edit/video-update.component.ts
index 6c57a23d8..141ed3522 100644
--- a/client/src/app/videos/video-edit/video-update.component.ts
+++ b/client/src/app/videos/video-edit/video-update.component.ts
@@ -2,7 +2,6 @@ import { Component, ElementRef, OnInit } from '@angular/core'
 import { FormBuilder, FormGroup } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
 
-import { FileUploader } from 'ng2-file-upload/ng2-file-upload'
 import { NotificationsService } from 'angular2-notifications'
 
 import { AuthService } from '../../core'
diff --git a/client/src/app/videos/video-watch/video-report.component.ts b/client/src/app/videos/video-watch/video-report.component.ts
index a5758060d..d9c83a640 100644
--- a/client/src/app/videos/video-watch/video-report.component.ts
+++ b/client/src/app/videos/video-watch/video-report.component.ts
@@ -63,7 +63,7 @@ export class VideoReportComponent extends FormReactive implements OnInit {
                               this.hide()
                             },
 
-                            err => this.notificationsService.error('Error', err)
+                            err => this.notificationsService.error('Error', err.message)
                            )
   }
 }
diff --git a/client/src/app/videos/video-watch/video-watch.component.ts b/client/src/app/videos/video-watch/video-watch.component.ts
index 9cedc9c76..f5a47199d 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -158,7 +158,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
                         this.userRating = 'like'
                       },
 
-                      err => this.notificationsService.error('Error', err)
+                      err => this.notificationsService.error('Error', err.message)
                      )
   }
 
@@ -175,7 +175,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
                         this.userRating = 'dislike'
                       },
 
-                      err => this.notificationsService.error('Error', err)
+                      err => this.notificationsService.error('Error', err.message)
                      )
   }
 
@@ -275,7 +275,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
                          }
                        },
 
-                       err => this.notificationsService.error('Error', err)
+                       err => this.notificationsService.error('Error', err.message)
                       )
   }