client/src/app/videos/video-add/video-add.component.html

   1 <h3>Upload a video</h3>
   2
   3 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
   4
   5 <form novalidate [formGroup]="form">
   6   <div class="form-group">
   7     <label for="name">Name</label>
   8     <input
   9       type="text" class="form-control" id="name"
  10       formControlName="name"
  11     >
  12     <div *ngIf="formErrors.name" class="alert alert-danger">
  13       {{ formErrors.name }}
  14     </div>
  15   </div>
  16
  17   <div class="form-group">
  18     <label for="tags">Tags</label>
  19     <input
  20       type="text" class="form-control" id="currentTag"
  21       formControlName="currentTag" (keyup)="onTagKeyPress($event)"
  22     >
  23     <div *ngIf="formErrors.currentTag" class="alert alert-danger">
  24       {{ formErrors.currentTag }}
  25     </div>
  26   </div>
  27
  28   <div class="tags">
  29     <div class="label label-primary tag" *ngFor="let tag of tags">
  30       {{ tag }}
  31       <span class="remove" (click)="removeTag(tag)">x</span>
  32     </div>
  33   </div>
  34
  35   <div class="form-group">
  36     <label for="videofile">File</label>
  37     <div class="btn btn-default btn-file" [ngClass]="{ 'disabled': filename !== null }" >
  38       <span>Select the video...</span>
  39       <input
  40         type="file" name="videofile" id="videofile"
  41         ng2FileSelect [uploader]="uploader" [disabled]="filename !== null"
  42       >
  43     </div>
  44   </div>
  45
  46   <div class="file-to-upload">
  47     <div class="file" *ngIf="uploader.queue.length > 0">
  48       <span class="filename">{{ filename }}</span>
  49       <span class="glyphicon glyphicon-remove" (click)="removeFile()"></span>
  50     </div>
  51   </div>
  52
  53   <div class="form-group">
  54     <label for="description">Description</label>
  55     <textarea
  56       id="description" class="form-control" placeholder="Description..."
  57       formControlName="description"
  58     >
  59     </textarea>
  60     <div *ngIf="formErrors.description" class="alert alert-danger">
  61       {{ formErrors.description }}
  62     </div>
  63   </div>
  64
  65   <div class="progress">
  66     <progressbar [value]="uploader.progress" max="100"></progressbar>
  67   </div>
  68
  69   <div class="form-group">
  70     <input
  71       type="button" value="Upload" class="btn btn-default form-control"
  72       [title]="getInvalidFieldsTitle()" [disabled]="!form.valid || tags.length === 0 || filename === null"
  73       (click)="upload()"
  74     >
  75   </div>
  76 </form>