React native content uri to base64 string

Question

I'm trying to upload files using RN Document Picker.

Once I get those files selected, I need to turn them to base64 string so I can send it to my API.

const handlePickFiles = async () => {
      if (await requestExternalStoreageRead()) {
        const results = await DocumentPicker.pickMultiple({
          type: [
            DocumentPicker.types.images,
            DocumentPicker.types.pdf,
            DocumentPicker.types.docx,
            DocumentPicker.types.zip,
          ],
        });
        const newUploadedFile: IUploadedFile[] = [];

        for (const res of results) {
          console.log(JSON.stringify(res, null, 2));

          newUploadedFile.push({
            name: res.name,
            type: res.type as string,
            size: res.size as number,
            extension: res.type!.split('/')[1],
            blob: res.uri, <<-- Must turn this in base64 string
          });
        }
        setUploadedFiles(newUploadedFile);
        console.log(newUploadedFile);
      }
    }
  };

The document picker returns content uri (content://...) They lists this as an example of handling blob data and base64:

let data = new FormData()
data.append('image', {uri: 'content://path/to/content', type: 'image/png', name: 'name'})
const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      body: data
    })

Where they basically say that you don't need to use blob or base64 when using multipart/form-data as content type. However, my graphql endpoint cannot handle multipart data and I don't have time to rewrite the whole API. All I want is to turn it to blob and base64 string, even if other ways are more performant.

Searching for other libraries, all of them are no longer maintained, or has issues with new versions of android. RN Blob Utils is the latest npm that was no longer maintained.

I tried to use RN Blob Utils but I either get errors, wrong data type, or the file uploads but is corrupted.

Some other things I found is that I can use

fetch(res.uri).then(response => {response.blob()})

          const response = await ReactNativeBlobUtil.fetch('GET', res.uri);
          const data = response.base64();

ReactNativeBlobUtil.wrap(decodeURIComponent(blob))        
///----
const blob = ReactNativeBlobUtil.fs.readFile(res.uri, 'base64');

But I can't do anything with that blob file.

What is the simplest way to uplaod files from document picker as base64 format? Is it possible to avoid using external storage permission?

Answer 1

You don't need to the third-party package to fetch BLOB data

 const blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function () {
      resolve(xhr.response);
    };
    xhr.onerror = function (e) {
      reject(new TypeError("Network request failed"));
    };
    xhr.responseType = "blob";
    xhr.open("GET", "[LOCAL_FILE_PATH]", true);
    xhr.send(null);
  });

  // Code to submit blob file to server

  // We're done with the blob, close and release it
  blob.close();