amazon web services - How to upload a file without blocking the UI? - Stack Overflow

admin管理员组

文章数量:1315288

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.

本文标签： amazon web servicesHow to upload a file without blocking the UIStack Overflow