React Native Error Creating Blobs via XMLHttpRequest

Question

I am working on a React-Native app where photos and documents are one of the main features needed. Users are constantly taking pictures on their device and we use the local uri to make a blob which is uploaded to AWS S3 with their aws-sdk.

The function we use to convert the local uri to a blob is below:

// https://github.com/expo/expo/issues/2402 - comment by "sjchmiela"
const convertUriToBlob = uri => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onerror = err => {
      reject(err);
    };
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        resolve(xhr.response || xhr._response);
      }
    };
    xhr.open('GET', uri);
    xhr.responseType = 'blob'; // convert type
    xhr.send();
  });
};

When using this function on certain local uris we sometimes get an error that crashes the device:

I am looking for more information on this blob error or better alternatives to handling uploading a lot of photos/documents from a device.

The RN version is "react-native": "0.57.4"

Edit: Similar problem

ChrisF582 · Accepted Answer · 2019-11-25 15:10:22Z

1

I have not been able to figure out why I receive the error when using XMLHttpRequest to make Blobs other than something goes awry when RN tries to send the Blob data over the bridge.

I tried to use the Blob polyfill within the rn-fetch-blob pkg which stopped the above error however the AWS SDK had problems with the polyfill and uploaded corrupt data.

I am now just using the rn-fetch-blob pkg directly to read a file from device into a base64 encoded string and dumping that into a Uint8Array

answered Nov 25, 2019 at 15:10

ChrisF582

1711 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ChrisF582 · Accepted Answer · 2019-11-30 03:32:01Z

1

The answer that mentions reading the file into base64 helped to avoid crashes from the default react-native Blob polyfill however it is still not recommended for production apps! There were still numerous crashes related to uploading photos/documents and the app took a huge performance hit when uploading due to transferring the base64 strings back over the bridge.

The accepted answer is to use rn-fetch-blob and its RNFetchBlob.fetch('PUT|POST', url, headers, LOCAL_PATH_TO_FILE) and keep uploading of photos/docs to the native side

answered Nov 30, 2019 at 3:32

ChrisF582

1711 silver badge6 bronze badges

Collectives™ on Stack Overflow

React Native Error Creating Blobs via XMLHttpRequest

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related