[Android] convertFileSrc does not correctly convert sdcard paths.

[distante]

After choose a file this nativePath is returned:

file:///sdcard/Music/Sinéad O'Connor/Sean Nos Jua (2002)/05 - Óró Sé Do Bheatha 'Bhaile.flac

parsing it with convertFileSrc returns:
https://localhost/_app_file_/sdcard/Music/Sinéad O'Connor/Sean Nos Jua (2002)/05 - Óró Sé Do Bheatha 'Bhaile.flac""

which can not be loaded by the webview.
Complete file info:

{
"extension":".flac","name":"05 - Óró Sé Do Bheatha 'Bhaile",
"nativePath":"file:///sdcard/Music/Sinéad O'Connor/Sean Nos Jua (2002)/05 - Óró Sé Do Bheatha 'Bhaile.flac",
"uri":"content://com.android.externalstorage.documents/document/326E-6BB3%3AMusic%2FSin%C3%A9ad%20O'Connor%2FSean%20Nos%20Jua%20(2002)%2F05%20-%20%C3%93r%C3%B3%20S%C3%A9%20Do%20Bheatha%20'Bhaile.flac",
"ionicPath":"https://localhost/_app_file_/sdcard/Music/Sinéad O'Connor/Sean Nos Jua (2002)/05 - Óró Sé Do Bheatha 'Bhaile.flac"
}

Selecting the same file but from the "Music" quick access works as expected.

Also converting the uri instead of the nativePath works as expected but it fails after the app restarts.

[daveshirman]

Agreed. My workaround is:

1. Explicitly set Scheme and MixedContentMode in config.xml - because why not.

        <preference name="Scheme" value="https" />
        <preference name="MixedContentMode" value="0" />

      var filePathCorrected = window.Ionic.WebView.convertFileSrc(fileUri);
      filePathCorrected = filePathCorrected.replace('file:/', "https://localhost/_app_file_");
      return filePathCorrected;

2. Wrap calls to local files with this:

  getAsFileUrlMobile(fileUri: string) {
    if (this.isiOS()) {
      return window.Ionic.WebView.convertFileSrc(fileUri);
    }
    else {
      // correct file paths on Android due to https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/598
      var filePathCorrected = window.Ionic.WebView.convertFileSrc(fileUri);
      filePathCorrected = filePathCorrected.replace('file:/', "https://localhost/_app_file_/");
      return filePathCorrected;
    }
  }

[distante]

Agreed. My workaround is:

1. Explicitly set Scheme and MixedContentMode in config.xml - because why not.

        <preference name="Scheme" value="https" />
        <preference name="MixedContentMode" value="0" />

      var filePathCorrected = window.Ionic.WebView.convertFileSrc(fileUri);
      filePathCorrected = filePathCorrected.replace('file:/', "https://localhost/_app_file_");
      return filePathCorrected;

1. Wrap calls to local files with this:

  getAsFileUrlMobile(fileUri: string) {
    if (this.isiOS()) {
      return window.Ionic.WebView.convertFileSrc(fileUri);
    }
    else {
      // correct file paths on Android due to https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/598
      var filePathCorrected = window.Ionic.WebView.convertFileSrc(fileUri);
      filePathCorrected = filePathCorrected.replace('file:/', "https://localhost/_app_file_/");
      return filePathCorrected;
    }
  }

I haven't done the MixedContentMode option (mostly because I do not understand what it does) but your .replace is working! Maybe you should do a PR?

[distante]

BTW for some reason I can not reuse a file URI unless I re-choose it again with the file picker

https://stackoverflow.com/questions/63870146/native-file-can-not-be-used-as-source-if-it-is-not-selected-by-file-picker

[daveshirman]

BTW for some reason I can not reuse a file URI unless I re-choose it again with the file picker

https://stackoverflow.com/questions/63870146/native-file-can-not-be-used-as-source-if-it-is-not-selected-by-file-picker

Yes - I've observed the same behaviour, not exactly sure either. Must be a pointer reference that's screwed. Anyone?

[daveshirman]

Agreed. My workaround is:

1. Explicitly set Scheme and MixedContentMode in config.xml - because why not.

        <preference name="Scheme" value="https" />
        <preference name="MixedContentMode" value="0" />

      var filePathCorrected = window.Ionic.WebView.convertFileSrc(fileUri);
      filePathCorrected = filePathCorrected.replace('file:/', "https://localhost/_app_file_");
      return filePathCorrected;

1. Wrap calls to local files with this:

  getAsFileUrlMobile(fileUri: string) {
    if (this.isiOS()) {
      return window.Ionic.WebView.convertFileSrc(fileUri);
    }
    else {
      // correct file paths on Android due to https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/598
      var filePathCorrected = window.Ionic.WebView.convertFileSrc(fileUri);
      filePathCorrected = filePathCorrected.replace('file:/', "https://localhost/_app_file_/");
      return filePathCorrected;
    }
  }

I haven't done the MixedContentMode option (mostly because I do not understand what it does) but your .replace is working! Maybe you should do a PR?

I could, but I also don't care enough to go through the effort. Ionic team should be fixing this stuff themselves, it's pretty freaking basic.

But instead, they just concentrate on adding more model frameworks (Vue, React...), which just introduced even more bugs, and then they spend too much time on CSS shadow parts etc, when they could be making the core rock solid instead.

[distante]

I could, but I also don't care enough to go through the effort. Ionic team should be fixing this stuff themselves, it's pretty freaking basic.

But instead, they just concentrate on adding more model frameworks (Vue, React...), which just introduced even more bugs, and then they spend too much time on CSS shadow parts etc, when they could be making the core rock solid instead.

I think they are ignoring this plugin since there is a capacitor plugin and capacitor belong to the Ionic Team. 🤔

[MuhAssar]

I'm facing this issue right now, and @distante 's suggestion didn't work.

I looked into the Ionic/WebView plugin and found that is uses an old implementation of the local web server:
https://github.com/google/webview-local-server

instead of the new one:
https://developer.android.com/reference/androidx/webkit/WebViewAssetLoader

so I believe we need to update the native webView plugin to use the newer implementation.

[MuhAssar]

I found an open issue in Ionic:
#483

Edit:
it is on its way to land in Cordova 10.0!
apache/cordova-android#1137

[MuhAssar]

I fixed it at last by using cordova-android@nightly (9.1.0) which contains the following temporary fix:
setAllowFileAccess(true)

[MuhAssar]

I traced the issue again in native cordova plugins, and found the cause is a not authorized exception,
so I needed to add the following in config.xml to mitigate the new permission in android Q:
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android"> <application android:networkSecurityConfig="@xml/network_security_config" android:requestLegacyExternalStorage="true" /> </edit-config>
hint:
android:requestLegacyExternalStorage="true"