Vimeo video uploader using tus js client

upload.component.ts

//Filename: upload.component.ts
import { Component, OnInit } from '@angular/core';
import { UploadService } from '../upload.service';
import { map, expand } from 'rxjs/operators';
import { EMPTY } from 'rxjs';

export class uploadFiles {
  constructor(public video: File, public path: string, public uploadURI: string) {
    this.video = video;
    this.path = path;
    this.uploadURI = uploadURI;
  }
}

@Component({
  selector: 'app-upload',
  template: `<div style="text-align:center">
  <input type="file" #file name="video" id="video" accept="video/*" multiple>
  <input type="button" value="Upload" (click)="start(file.files);"> </div>`
})

export class UploadComponent implements OnInit {
  title = 'vimeo-uploader';
  videoList: FileList;
  videoLinks = [];
  pendingFiles: uploadFiles[] = [];
  constructor(private upload: UploadService) { }

  ngOnInit() { }

  public start(files: FileList) {
    this.videoList = files;
    console.log(this.videoList);
    const recursion = this.getLink(this.videoList[0], 0, this.videoList).pipe(expand(res => {
      return res.index > res.arr.length - 1 ?
      EMPTY : this.getLink(this.videoList[res.index], res.index, this.videoList);
    }));

      recursion.subscribe(x => {
        if (x.index > x.arr.length - 1) {
          console.log('Links generated, Starting upload');
          this.videoUpload();
        }
      });
  }

  getLink = (video: File, index, arr) => {
    console.log('index: ' + index);
    return this.upload.createVideo(video).pipe(
      map(response => {
        const videoFile = new uploadFiles(video, response.body.link, response.body.upload.upload_link);
        this.pendingFiles.push(videoFile);
        console.log('response: ' + response);
        return {
          data: response,
          index: index + 1,
          arr: arr
        };
      }),
    );
  }

  videoUpload() {
    const success = () => {
      console.log('after video upload section');
    };
    const upload: Array<any> = [];
    for (let i = 0; i < this.pendingFiles.length; i++) {
      upload.push(
        this.upload.tusUpload(
          this.pendingFiles[i],
          i,
          this.pendingFiles,
          upload,
          success
        ),
      );
    }
    console.log('start video upload sequentially');
    upload[0].start();
  }
}

upload.service.ts

// Filename: upload.service.ts
import { Injectable } from '@angular/core';
import * as tus from 'tus-js-client';
import { Observable } from 'rxjs';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { uploadFiles } from './upload/upload.component';

@Injectable({
  providedIn: 'root'
})
export class UploadService {
  constructor(private http: HttpClient) { }
  private api = 'https://api.vimeo.com/me/videos';
  private accessToken = 'yourapitoken';

  createVideo(file: File): Observable<any> {
    const body = {
      name: file.name,
      upload: {
        approach: 'tus',
        size: file.size
      }
    };
    console.log(file);
    const header: HttpHeaders = new HttpHeaders()
      .set('Authorization', 'bearer ' + this.accessToken)
      .set('Content-Type', 'application/json')
      .set('Accept', 'application/vnd.vimeo.*+json;version=3.4');
    return this.http.post(this.api, body, {
      headers: header,
      observe: 'response'
    });
  }

  public tusUpload(
    file: uploadFiles,
    i: number,
    videoArray: uploadFiles[],
    uploadArray: tus.Upload[],
    success: any
  ): tus.Upload {
    const upload = new tus.Upload(file.video, {
      uploadUrl: file.uploadURI,
      endpoint: file.uploadURI,
      retryDelays: [0, 1000, 3000, 5000],
      onError: error => {
        console.log('Failed: ' + file.video.name + error);
      },
      onProgress: (bytesUploaded, bytesTotal) => {
        const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
        console.log(
          'file: ' + i + ' of ' + (videoArray.length - 1) + ':',
          bytesUploaded,
          bytesTotal,
          percentage + '%'
        );
      },
      onSuccess: () => {
        console.log('Download' + file.video.name + 'from' + upload.url);
        if (i < videoArray.length - 1) {
          uploadArray[i + 1].start();
        } else {
          success();
          console.log('Videos uploaded successfully');
        }
      },
    });
    return upload;
  }
}