Client: try to improve ux for the upload form

[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 64320cae7dc5885ef7a9831ba34a54c2beed2ace..b6be0d78298fff8dd7a5f7a528b0a3c469bda841 100644 (file)
--- a/client/src/app/videos/video-add/video-add.component.html
+++ b/client/src/app/videos/video-add/video-add.component.html
@@ -2,7 +2,7 @@
 
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-<form novalidate (ngSubmit)="upload()" [formGroup]="form">
+<form novalidate [formGroup]="form">
   <div class="form-group">
     <label for="name">Name</label>
     <input
@@ -15,7 +15,7 @@
   </div>
 
   <div class="form-group">
-    <label for="tags">Tags</label>
+    <label for="tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
     <input
       type="text" class="form-control" id="currentTag"
       formControlName="currentTag" (keyup)="onTagKeyPress($event)"
@@ -32,6 +32,10 @@
     </div>
   </div>
 
+  <div *ngIf="tagsError" class="alert alert-danger">
+    {{ tagsError }}
+  </div>
+
   <div class="form-group">
     <label for="videofile">File</label>
     <div class="btn btn-default btn-file" [ngClass]="{ 'disabled': filename !== null }" >
@@ -39,6 +43,7 @@
       <input
         type="file" name="videofile" id="videofile"
         ng2FileSelect [uploader]="uploader" [disabled]="filename !== null"
+        (change)="fileChanged()"
       >
     </div>
   </div>
@@ -50,6 +55,10 @@
     </div>
   </div>
 
+  <div *ngIf="fileError" class="alert alert-danger">
+    {{ fileError }}
+  </div>
+
   <div class="form-group">
     <label for="description">Description</label>
     <textarea
@@ -68,8 +77,8 @@
 
   <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"
+      type="button" value="Upload" class="btn btn-default form-control"
+      (click)="upload()"
     >
   </div>
 </form>