I've been struggling a lot with the implementation of AWS SDK for S3 in React Native, specially when trying to upload videos to my buckets (+150MB in size), I already tried different ways to read these videos in chunks but had no luck when sending these chunks over to S3 Buckets.
const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB - AWS MultiPart Min Size
const fileStreaming = async (uri) => {
try {
const resp = await fetch(uri);
const reader = await resp.body;
console.log(typeof reader)
const parallelUpload = new Upload({
client: client,
params: {
Bucket: 'example',
Key: 'file-stream-test-2.mp4',
Body: reader,
ContentType: 'video/mp4'
},
queueSize: 4,
partSize: CHUNK_SIZE,
leavePartsOnError: false
});
parallelUpload.on("httpUploadProgress", (progress) => {
console.log(progress);
});
const completeUpload = await parallelUpload.done();
console.log(completeUpload);
} catch(err) {
console.error(err);
}
}
This is one of the methods that I tried but when the upload starts, the UI freezes, but something that is weird is that if I only ready the chunks without sending them to S3 it won't block the UI thread, as well I tried calling an API every time a chunk get's read and the UI never get's frozen.
Do you guys know how can I upload large files without blocking UI?
My UI get's blocked during the upload process but only when using AWS SDK, if I call an API every time a chunks is read, the UI still working as expected.