aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/video-add/video-add.component.html
blob: cbe274e8a598a537545e522dd1a0e75c721e3e14 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<h3>Upload a video</h3>

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

<form (ngSubmit)="uploadFile()" #videoForm="ngForm">
  <div class="form-group">
    <label for="name">Video name</label>
    <input
      type="text" class="form-control" name="name" id="name" required
      ngControl="name"  #name="ngForm"
    >
    <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
      Name is required
    </div>
  </div>

  <div class="form-group">
    <div class="btn btn-default btn-file">
      <span>Select the video...</span>
      <input type="file" name="videofile" id="videofile">
    </div>

    <span *ngIf="fileToUpload">{{ fileToUpload.name }}</span>
  </div>

  <div class="form-group">
    <label for="description">Description</label>
    <textarea
      name="description" id="description" class="form-control" placeholder="Description..." required
      ngControl="description"  #description="ngForm"
    >
    </textarea>
    <div [hidden]="description.valid || description.pristine" class="alert alert-danger">
        A description is required
    </div>
  </div>

  <div id="progress" *ngIf="progressBar.max !== 0">
    <progressbar [value]="progressBar.value" [max]="progressBar.max">{{ progressBar.value | bytes }} / {{ progressBar.max | bytes }}</progressbar>
  </div>

  <input type="submit" value="Upload" class="btn btn-default" [disabled]="!videoForm.form.valid || !fileToUpload">
</form>