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 (ngSubmit)="uploadFile()" #videoForm="ngForm">
   6   <div class="form-group">
   7     <label for="name">Video name</label>
   8     <input
   9       type="text" class="form-control" name="name" id="name" required
  10       ngControl="name"  #name="ngForm"
  11     >
  12     <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
  13       Name is required
  14     </div>
  15   </div>
  16
  17   <div class="form-group">
  18     <div class="btn btn-default btn-file">
  19       <span>Select the video...</span>
  20       <input type="file" name="videofile" id="videofile">
  21     </div>
  22
  23     <span *ngIf="fileToUpload">{{ fileToUpload.name }}</span>
  24   </div>
  25
  26   <div class="form-group">
  27     <label for="description">Description</label>
  28     <textarea
  29       name="description" id="description" class="form-control" placeholder="Description..." required
  30       ngControl="description"  #description="ngForm"
  31     >
  32     </textarea>
  33     <div [hidden]="description.valid || description.pristine" class="alert alert-danger">
  34         A description is required
  35     </div>
  36   </div>
  37
  38   <div id="progress" *ngIf="progressBar.max !== 0">
  39     <progressbar [value]="progressBar.value" [max]="progressBar.max">{{ progressBar.value | bytes }} / {{ progressBar.max | bytes }}</progressbar>
  40   </div>
  41
  42   <input type="submit" value="Upload" class="btn btn-default" [disabled]="!videoForm.form.valid || !fileToUpload">
  43 </form>