title: React native content uri to base64 string
body: <p>I'm trying to upload files using <a href="https://www.npmjs.com/package/react-native-document-picker" rel="nofollow noreferrer">RN Document Picker</a>.</p>
  <p>Once I get those files selected, I need to turn them to base64 string so I can send it to my API.</p>
  <pre><code>const handlePickFiles = async () =&gt; {
        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, &lt;&lt;-- Must turn this in base64 string
            });
          }
          setUploadedFiles(newUploadedFile);
          console.log(newUploadedFile);
        }
      }
    };
  </code></pre>
  <p>The document picker returns content uri (content://...)
  They lists this as an example of handling blob data and base64:</p>
  <pre><code>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
      })
  </code></pre>
  <p>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.</p>
  <p>Searching for other libraries, all of them are no longer maintained, or has issues with new versions of android. <a href="https://www.npmjs.com/package/react-native-blob-util" rel="nofollow noreferrer">RN Blob Utils</a> is the latest npm that was no longer maintained.</p>
  <p>I tried to use RN Blob Utils but I either get errors, wrong data type, or the file uploads but is corrupted.</p>
  <p>Some other things I found is that I can use</p>
  <pre><code>fetch(res.uri).then(response =&gt; {response.blob()})
  </code></pre>
  <pre><code>          const response = await ReactNativeBlobUtil.fetch('GET', res.uri);
            const data = response.base64();
  </code></pre>
  <pre><code>ReactNativeBlobUtil.wrap(decodeURIComponent(blob))        
  ///----
  const blob = ReactNativeBlobUtil.fs.readFile(res.uri, 'base64');
  
  </code></pre>
  <p>But I can't do anything with that blob file.</p>
  <p>What is the simplest way to uplaod files from document picker as base64 format? Is it possible to avoid using external storage permission?</p>