Use ng2-file-upload instead of jquery and add tags support to the video

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

<h3>Upload a video</h3>

<div *ngIf="error" class="alert alert-danger">{{ error }}</div>

<form novalidate (ngSubmit)="upload()" [ngFormModel]="videoForm">
  <div class="form-group">
    <label for="name">Name</label>
    <input
      type="text" class="form-control" name="name" id="name"
      ngControl="name" #name="ngForm" [(ngModel)]="video.name"
    >
    <div [hidden]="name.valid || name.pristine" class="alert alert-warning">
      A name is required and should be between 3 and 50 characters long
    </div>
  </div>

  <div class="form-group">
    <label for="tags">Tags</label>
    <input
      type="text" class="form-control" name="tags" id="tags"
      ngControl="tags" #tags="ngForm" [disabled]="isTagsInputDisabled" (keyup)="onTagKeyPress($event)" [(ngModel)]="currentTag"
    >
    <div [hidden]="tags.valid || tags.pristine" class="alert alert-warning">
      A tag should be between 2 and 10 characters long
    </div>
  </div>

  <div class="tags">
    <div class="label label-info tag" *ngFor="let tag of video.tags">
      {{ tag }}
      <span class="remove" (click)="removeTag(tag)">x</span>
    </div>
  </div>

  <div class="form-group">
    <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"
        ng2FileSelect [uploader]="uploader" [disabled]="filename !== null"
      >
    </div>
  </div>

  <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..."
      ngControl="description"  #description="ngForm" [(ngModel)]="video.description"
    >
    </textarea>
    <div [hidden]="description.valid || description.pristine" class="alert alert-warning">
        A description is required and should be between 3 and 250 characters long
    </div>
  </div>

  <div class="progress">
    <progressbar [value]="uploader.progress" max="100"></progressbar>
  </div>

  <div class="form-group">
    <input
      type="submit" value="Upload" class="btn btn-default form-control" [title]="getInvalidFieldsTitle()"
      [disabled]="!videoForm.valid || video.tags.length === 0 || filename === null"
    >
  </div>
</form>