Expo Document Picker workaround

Example.js

import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
} from 'react-native';

import WebViewHack from './WebViewHack';

class ImportFileScreen extends Component {
  selectFile = async () => {
    try {
      const file = await DocumentPicker.getDocumentAsync({ type: 'text/csv' });
      if (file.type === 'success') {
        this.parseFile(file.uri);
      }
    } catch (err) {
      // Expo didn't build with iCloud, expo turtle fallback
      this.webview.injectJavaScript('selectFile()');
    }
  };

  onSelectFile = event => {
    const base64file = event.nativeEvent.data;
    this.parseFile(base64file);
  };

  parseFile(file) {
    // do something with the file
  }

  render() {
    return (
      <View>
        <TouchableOpacity onPress={this.selectFile}>
          <Text>Attach File</Text>
        </TouchableOpacity>
        <WebViewHack
          ref={webview => {
            if (webview && webview.webview) {
              this.webview = webview.webview;
            }
          }}
          onSelectFile={this.onSelectFile}
        />
      </View>
    )
  }
}

WebViewHack.js

import React, { PureComponent } from 'react';
import { WebView } from 'react-native';

const html = `
<input id='csv' type="file" accept="text/csv,text/plain">
<script>
  function selectFile(event) {
    document.getElementById('csv').click();
  }
  function getBase64(e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
      window.postMessage(reader.result)
    };
    reader.onerror = function (error) {
      console.log("Something went wrong:", error)
    };
  }
  document.getElementById('csv').addEventListener('change', getBase64)
</script>
`;

class WebViewHack extends PureComponent {
  render() {
    const { onSelectFile } = this.props;

    return (
      <WebView
        ref={webview => (this.webview = webview)}
        onMessage={onSelectFile}
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          width: 0,
          height: 0,
        }}
        source={{
          html,
        }}
      />
    );
  }
}

export default WebViewHack;

The DocumentPicker.getDocumentAsync call should work fine on Android, this is an iOS only fallback for when you misconfigure iCloud containers. You should not ever send files like this over the bridge, let alone a webview. This is called a hack because it is literally a hack, and should not be used professionally.

The problem with DocumentPicker doesn't support multiple files and I need to eject to use other document picker libraries

I'm having that issue right now and it's pretty delicate. In order for it to work on IOS you have to do what they say at the bottom of here apparently: https://docs.expo.io/versions/latest/sdk/document-picker/ but i havent gotten it to work yet. If any of you have let me know!

…

On Thu, Oct 10, 2019 at 9:57 AM Ernest Okot ***@***.***> wrote: The problem with DocumentPicker doesn't support multiple files and I need to eject to use other document picker libraries — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/04936dda21f7f0331167c8ff1cc9c5eb?email_source=notifications&email_token=ABKCU3FKUUHXZXJLITA6GTTQN4YCTA5CNFSM4I6SCXOKYY3PNVWWK3TUL52HS4DFVNDWS43UINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAF2IHG#gistcomment-3051635>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABKCU3CJ3AHLCF7WCWVFRV3QN4YCTANCNFSM4I6SCXOA> .

-- Omari Powell Cornell University School of Engineering co 2016/19 B.S. Computer Science/M.Eng Candidate of Computer Science *678-313-5746 | ojp3@cornell.edu <ojp3@cornell.edu>*

The DocumentPicker.getDocumentAsync call should work fine on Android, this is an iOS only fallback for when you misconfigure iCloud containers. You should not ever send files like this over the bridge, let alone a webview. This is called a hack because it is literally a hack, and should not be used professionally.

Hello, You no what are the alternatives? I work this expo react-native

this worked for me for expo

const html = `
      <label for="input" style="">
        <div style="
          width: 100%;
          background-color: blue;
          border: 1px solid blue;
          display: flex;
          justify-content: center;
          padding: 50px;
          border-radius: 10px;
        ">
          <span style="
            font-size: 45px;
            font-weight: 500;
            color: white;
          ">
            text
          </span>
        </div>
      </label>
      <input
        id="input"
        accept="*/*"
        type="file"
        multiple
        style="display: none;"
      >
      <script>
        const fileToRead = document.getElementById("input");

        fileToRead.addEventListener("change", function(event) {
          const filesBase64 = [];
          for (let i = 0; i < event.target.files.length; i++) {
            const file = event.target.files[i];
            const reader = new FileReader();
            reader.onload = function () {
              filesBase64.push({result: reader.result, len: event.target.files.length});
              window.ReactNativeWebView.postMessage(JSON.stringify(filesBase64))
            };
            reader.readAsDataURL(file);
          }
        });
      </script>
    `;

<WebView
          style={{width: '100%', height: 60}}
          javaScriptEnabled
          domStorageEnabled
          onMessage={event => this.pickedFiles((event.nativeEvent as unknown) as PickedFile)}
          source={{html}}
/>