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="category">Category</label>
  19     <select class="form-control" id="category" formControlName="category">
  20       <option></option>
  21       <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
  22     </select>
  23
  24     <div *ngIf="formErrors.category" class="alert alert-danger">
  25       {{ formErrors.category }}
  26     </div>
  27   </div>
  28
  29   <div class="form-group">
  30     <label for="tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
  31     <input
  32       type="text" class="form-control" id="currentTag"
  33       formControlName="currentTag" (keyup)="onTagKeyPress($event)"
  34     >
  35     <div *ngIf="formErrors.currentTag" class="alert alert-danger">
  36       {{ formErrors.currentTag }}
  37     </div>
  38   </div>
  39
  40   <div class="tags">
  41     <div class="label label-primary tag" *ngFor="let tag of tags">
  42       {{ tag }}
  43       <span class="remove" (click)="removeTag(tag)">x</span>
  44     </div>
  45   </div>
  46
  47   <div *ngIf="tagsError" class="alert alert-danger">
  48     {{ tagsError }}
  49   </div>
  50
  51   <div class="form-group">
  52     <label for="videofile">File</label>
  53     <div class="btn btn-default btn-file" [ngClass]="{ 'disabled': filename !== null }" >
  54       <span>Select the video...</span>
  55       <input
  56         type="file" name="videofile" id="videofile"
  57         ng2FileSelect [uploader]="uploader" [disabled]="filename !== null"
  58         (change)="fileChanged()"
  59       >
  60     </div>
  61   </div>
  62
  63   <div class="file-to-upload">
  64     <div class="file" *ngIf="uploader.queue.length > 0">
  65       <span class="filename">{{ filename }}</span>
  66       <span class="glyphicon glyphicon-remove" (click)="removeFile()"></span>
  67     </div>
  68   </div>
  69
  70   <div *ngIf="fileError" class="alert alert-danger">
  71     {{ fileError }}
  72   </div>
  73
  74   <div class="form-group">
  75     <label for="description">Description</label>
  76     <textarea
  77       id="description" class="form-control" placeholder="Description..."
  78       formControlName="description"
  79     >
  80     </textarea>
  81     <div *ngIf="formErrors.description" class="alert alert-danger">
  82       {{ formErrors.description }}
  83     </div>
  84   </div>
  85
  86   <div class="progress">
  87     <progressbar [value]="uploader.progress" max="100"></progressbar>
  88   </div>
  89
  90   <div class="form-group">
  91     <input
  92       type="button" value="Upload" class="btn btn-default form-control"
  93       (click)="upload()"
  94     >
  95   </div>
  96 </form>