How to slice large video file into chunks for upload

[babbly]

Please provide the following:

1. SDK Version: 37
2. Platforms(Android/iOS/web/all): Android/iOS

Hi. In our app we need to be able to upload large video files to s3 and I’m banging my head on the wall trying to figure out how to do this.

We use the expo ImagePicker to select a video file on the device and then send it to s3 using the aws js sdk. However we can’t simply use the file blob as is or I get a request error from the aws sdk from trying to send in some cases hundreds of mb in a single request.

I am astounded how difficult this task has been. Here are the things I’ve tried, and below I’ll post the code of the closest to something working I have.

1. First I tried to use a ReadableStream object, only to discover that isn’t implemented
2. Then I tried to use an ArrayBuffer only to discover that isn’t implemented either, not even on FileReader
3. Then I tried to use Buffer on the file blob, but that didn’t work
4. Then I tried manually slicing up the blob myself with blob.slice() then passing the resulting array of blobs to Buffer. That seemed to work for a second, until I realized that it was uploading empty files. It seems that blob.slice() is returning empty blobs even though curiously chunk.size returns the expected value
5. I thought maybe it was Buffer that was the problem so I went through all the trouble of setting up a manual multipart upload using the chunks directly, only to get an error that I wasn’t meeting the minimum upload size. Cause my chunks are empty.

I’m stuck and out of ideas. At the moment it would be very uneconomical for us to eject so we can use other libraries but this upload is at the core of our app and I’m not seeing another choice right now since I can’t even split the damn blob up myself.

Here is my code. Really hoping someone can shine some light on this situation because it is mind boggling to me how difficult something so rudimentary is proving to be.

const sliceFile = (fileBlob: Blob): Blob[] => {
    let chunks = []
    const chunkSize = 1024 * 1024
    const chunksAmount = Math.ceil(fileBlob.size / chunkSize)

    for (let i = 0; i < chunksAmount; i += 1) {
        const start = chunkSize * i
        const end = chunkSize * (i + 1)

        const chunk = fileBlob.slice(start, end, fileBlob.type)
        chunks.push(chunk)
    }

    return chunks
}

const fileBlob: Blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()

    xhr.onload = function () {
        resolve(xhr.response)
    }

    xhr.onerror = function () {
        reject(new TypeError('Network request failed'))
    }

    xhr.responseType = 'blob'
    xhr.open('GET', filePath, true)
    xhr.send(null)
});

const fileBuffer = Buffer.from(sliceFile(fileBlob))

If I console log fileBuffer I get a big array of 0’s.

Thanks in advance for any help.

[emersonmccann]

Would also like to know this