Javascript: Upload Large Video

Viewed 82

I'm attempting to upload a 7GB video file to an s3 bucket directly from the browser using AWS Multi-Part Uploading.

Input File

File: { 
  ...
  name: "movie.mp4"
  size: 7000000000
  type: "video/mp4"
  webkitRelativePath: ""
  __proto__: File
}

To upload the file as 5GB parts, I sliced it accordingly & received two blobs:

// Part 1                    // Part 2
 Blob {                       Blob {
  size: 5000000000             size: 2000000000 // remainder
  type: ""                     type: ""
__proto__: Blob                __proto__: Blob
}                            }

My question is, how should I manipulate the content of these blobs too comply with the desired Multi-Part Upload Part request structure? Should I create an ArrayBuffer or Binary String via the FileReader API? Here is my current XHR Request for Part # 1 using axios:

axios({
    url: https://upload-video.s3.us-east-1.amazonaws.com/movie.mp4,
    method: 'PUT',
    headers: {
        'Content-Type' : 'video/',
        'x-amz-date' : new Date().toISOString(),
        'x-amz-content-sha256' : 'UNSIGNED-PAYLOAD',
        'Authorization' : AWS4-HMAC-SHA256 Credential=AWSACCCESSKEY/20210105/us-east-1/s3/aws4_request, SignedHeaders=host;x-amz-content-sha256;x-amz-date, Signature=6ce86f07e037469deff59f1f510edaa5139f434eec3fd0
    },
    params: {
        partNumber: 1,
        uploadId: xh6YCju9R5cFCdCwFwy9.mhf3cdzJT7M6j2mh2qaUeBO7C5ori2so06 // UPLOAD_ID_FROM_AWS
    },
    data: // ?? what should I insert here ??
})
0 Answers
Related