Skip to content

Instantly share code, notes, and snippets.

@kkbalu
Forked from chaman-1/upload.component.ts
Created January 23, 2019 11:54
Show Gist options
  • Save kkbalu/60a7fe8d5e4d5c4f7ca67622343dc8cc to your computer and use it in GitHub Desktop.
Save kkbalu/60a7fe8d5e4d5c4f7ca67622343dc8cc to your computer and use it in GitHub Desktop.
Vimeo video uploader using tus js client
//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();
}
}
// 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment