Client: reactive forms

[github/Chocobozzz/PeerTube.git] / client / src / app / videos / video-add / video-add.component.html

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 80d229cb8863141f03115ba5c83a370c36daf39f..64320cae7dc5885ef7a9831ba34a54c2beed2ace 100644 (file)
--- a/client/src/app/videos/video-add/video-add.component.html
+++ b/client/src/app/videos/video-add/video-add.component.html
@@ -1,41 +1,75 @@
 <h3>Upload a video</h3>
 
-<form (ngSubmit)="uploadFile()" #videoForm="ngForm">
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+<form novalidate (ngSubmit)="upload()" [formGroup]="form">
+  <div class="form-group">
+    <label for="name">Name</label>
+    <input
+      type="text" class="form-control" id="name"
+      formControlName="name"
+    >
+    <div *ngIf="formErrors.name" class="alert alert-danger">
+      {{ formErrors.name }}
+    </div>
+  </div>
+
   <div class="form-group">
-    <label for="name">Video name</label>
+    <label for="tags">Tags</label>
     <input
-      type="text" class="form-control" name="name" id="name" required
-      ngControl="name"  #name="ngForm"
+      type="text" class="form-control" id="currentTag"
+      formControlName="currentTag" (keyup)="onTagKeyPress($event)"
     >
-    <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
-      Name is required
+    <div *ngIf="formErrors.currentTag" class="alert alert-danger">
+      {{ formErrors.currentTag }}
+    </div>
+  </div>
+
+  <div class="tags">
+    <div class="label label-primary tag" *ngFor="let tag of tags">
+      {{ tag }}
+      <span class="remove" (click)="removeTag(tag)">x</span>
     </div>
   </div>
 
   <div class="form-group">
-    <div class="btn btn-default btn-file">
+    <label for="videofile">File</label>
+    <div class="btn btn-default btn-file" [ngClass]="{ 'disabled': filename !== null }" >
       <span>Select the video...</span>
-      <input type="file" name="videofile" id="videofile">
+      <input
+        type="file" name="videofile" id="videofile"
+        ng2FileSelect [uploader]="uploader" [disabled]="filename !== null"
+      >
     </div>
+  </div>
 
-    <span *ngIf="fileToUpload">{{ fileToUpload.name }}</span>
+  <div class="file-to-upload">
+    <div class="file" *ngIf="uploader.queue.length > 0">
+      <span class="filename">{{ filename }}</span>
+      <span class="glyphicon glyphicon-remove" (click)="removeFile()"></span>
+    </div>
   </div>
 
   <div class="form-group">
     <label for="description">Description</label>
     <textarea
-      name="description" id="description" class="form-control" placeholder="Description..." required
-      ngControl="description"  #description="ngForm"
+      id="description" class="form-control" placeholder="Description..."
+      formControlName="description"
     >
     </textarea>
-    <div [hidden]="description.valid || description.pristine" class="alert alert-danger">
-        A description is required
+    <div *ngIf="formErrors.description" class="alert alert-danger">
+      {{ formErrors.description }}
     </div>
   </div>
 
-  <div id="progress" *ngIf="progressBar.max !== 0">
-    <progressbar [value]="progressBar.value" [max]="progressBar.max">{{ progressBar.value | bytes }} / {{ progressBar.max | bytes }}</progressbar>
+  <div class="progress">
+    <progressbar [value]="uploader.progress" max="100"></progressbar>
   </div>
 
-  <input type="submit" value="Upload" class="btn btn-default" [disabled]="!videoForm.form.valid || !fileToUpload">
+  <div class="form-group">
+    <input
+      type="submit" value="Upload" class="btn btn-default form-control" [title]="getInvalidFieldsTitle()"
+      [disabled]="!form.valid || tags.length === 0 || filename === null"
+    >
+  </div>
 </form>