Resumable video upload with JavaScript
Resumable video upload with JavaScript
The FastPix Resumable Uploads SDK helps you efficiently upload large files from the browser by splitting them into chunks and also gives you the ability to pause and resume your uploads.
1. Import the uploader from FastPix SDK
This imports the Uploader class from the FastPix SDK, which enables resumable file uploads with chunking and event tracking.
2. Listen to file input change
3. Configure the upload and fetch a signed URL
4. Start upload if signed URL is received
5. Initialize upload and handle events
1import { Uploader } from "@fastpix/resumable-uploads";
2const videoFile = document.getElementById("videoFile");
3
4videoFile.onchange = async (event) => {
5 const fileObject = event?.target?.files[0];
6
7 if (fileObject) {
8 try {
9 const url = "https://api.fastpix.com/v1/on-demand/uploads";
10
11 const username = "";
12 const password = "";
13
14 const data = {
15 corsOrigin: "*",
16 pushMediaSettings: {
17 accessPolicy: "public",
18 metadata: { key1: "value1" },
19 "subtitle": {
20 "languageName": "english"
21 },
22 optimizeAudio: true,
23 maxResolution: "1080p",
24 },
25 };
26
27 const headersRequest = {
28 method: "">POST",
29 headers: {
30 "Content-Type": "application/json",
31 Authorization: "Basic " + btoa(username + ":" + password),
32 },
33 body: JSON.stringify(data),
34 };
35
36 const getSignedUrl = await fetch(url, headersRequest);
37 const signedUrl = await getSignedUrl.json();
38
39 if (signedUrl.success) {
40 handleUpload(videoFile.files[0], signedUrl.data.url);
41 } else {
42 console.error(signedUrl.data.error);
43 }
44 } catch (error) {
45 console.error(error);
46 }
47 }
48};
49
50const handleUpload = (video, signedUrl) => {
51 const fileUpload = Uploader.init({
52 endpoint: signedUrl,
53 file: video,
54 chunkSize: 5120,
55 });
56
57 fileUpload.on("progress", (event) => {
58 console.log("progress:", event.detail);
59 });
60
61 fileUpload.on("success", () => {
62 console.log("upload completed");
63 });
64
65 fileUpload.on("error", (event) => {
66 console.log("upload error:", event?.detail?.message);
67 });
68
69 // fileUpload.pause()
70 // fileUpload.resume()
71 // fileUpload.abort()
72};