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 ??
})