Cannot display a file in an expo react-native mobile app project using react-native-webview dependency's WebView component

41 Views Asked by At

I don't seem to be able to find any permissions request method in the expo-document-picker documentation. This makes me believe that permissions to access files on a users local device may be built into the .getDocumentAsync() method. But this doesn't seem right.

The specific problem I am having is that a document that IS correctly picked by DocumentPicker.getDocumentAsync(), will not display in react-native-webview's WebView component, and, when it does try to load, I am getting a warning - that I have pasted below - that includes a "description" of "net::ERR_ACCESS_DENIED".

here is the relevant code (note that I have included some commented out code. Most of this represents attempted workarounds that failed for one reason or another)...

const handleResumeSelection = async () => {
  try {
    /*
    const { status } = await MediaLibrary.getPermissionsAsync();
    if (status !== 'granted') {
      const { status: newStatus } = await MediaLibrary.requestPermissionsAsync();
      if (newStatus !== 'granted') {
        console.log('Permission to access media library denied');
        // Handle denied permission
        return;
      }
    }
    const { status } = await Permissions.askAsync(Permissions.MEDIA_LIBRARY_READ_WRITE);
    if (status !== 'granted') {
      console.log('Permission to access media library denied');
      // Handle denied permission
      return;
    }
    const { status } = await DocumentPicker.requestDocumentsPermissionsAsync();
    if (status !== 'granted') {
      console.log('Permission to access documents denied');
      // Handle denied permission
      return;
    }
    */

    const result = await DocumentPicker.getDocumentAsync({
      copyToCacheDirectory: true,
      type: '*/*'
    });
    if (!result.canceled && result.assets.length > 0) {
        setCurrentResume(false);
        setUploadFailed(false);
        const selectedDocument = {
          uri: result.assets[0].uri,
          type: result.assets[0].mimeType,
          name: result.assets[0].name,
          size: result.assets[0].size,
        };
        console.log('Selected document:', selectedDocument);
        setResumeSource(selectedDocument);
        //const modifiedURI = selectedDocument.uri.replace('.pdf', '.jpeg');
        //setResumeURIjpeg(modifiedURI)
        //convertContentUriToFileUri(selectedDocument.uri);
        setNewResumeSelected(true);
      } else if (result.canceled) {
        console.log('User cancelled document picker');
      } else {
        console.log('DocumentPicker Error. Result: ', result)
      }
    } catch (error) {
    console.error('Error selecting document:', error);
  }
};

This is the document object as it is logged after it is captured and set to 'selectedDocument' (which seems correct to me)...

 LOG  Selected document: {"name": "FullResumeGoldenMarkT.pdf", 
"size": 152573, "type": "application/pdf", "uri": "file:///data/user/0/com.milvetcom.milvetcom11042023/cache/DocumentPicker/bc9ce402-e6b3-45e0-adca-ea561fed08f4.pdf"}

This is how I am attempting to display the uri of that object in react-native-webview...

<View style={styles.profilePicContainer}>
     <WebView
       allowsFileAccess={true}
       style={styles.image}
       source={{ 
       uri: resumeSource.uri,
       headers: { 'Content-Type': `${resumeSource.type}` },
       }}
       contentMode="fitWidth"
     />
</View>

and, finally, this is the warning that I am getting with regard to displaying that object in the WebView component, notice the part that says "net::ERR_ACCESS_DENIED". This makes me think that it is not displaying due to a lack of permissions(?), but also that it may be with permissions relating to WebView's attempt to access/display those files (but react-native-webview also has no permissions method)...

 WARN  Encountered an error loading page {"canGoBack": false, "canGoForward": false, "code": -1, "description": "net::ERR_ACCESS_DENIED", "loading": false, "target": 1109, "title": "", "url": "file:///data/user/0/com.milvetcom.milvetcom11042023/cache/DocumentPicker/bc9ce402-e6b3-45e0-adca-ea561fed08f4.pdf"} 

Is it possible that expo is preventing WebView from accessing those files for display?

What am I missing/doing wrong? Is this a problem with expo-document-picker permissions, react-native-webview's permissions, or expo not allowing access on an android studio emulator? Or something else? Fyi, I have only tried this on an android emulator, not an ios one or an actual mobile device as an emulator.

Thank you for your help :)

0

There are 0 best solutions below