convertFileSrc producing output starting with 'undefined'

[rlyttle]

Environment info: cordova-plugin-ionic-webview 3.1.2 ionic-angular 3.9.2 cordova-android 7.1.4

Running into a problem on Android where the following will intermittently produce either file URIs starting with "http://localhost" or "undefined"

let profileImage = this.win.Ionic.WebView.convertFileSrc( this.file.dataDirectory + profileImageFileName );
console.log("processing profileImage = " + profileImage);

Example output when it works: processing profileImage = http://localhost/_app_file_/data/user/0/com.company.app/files/724MjcgqPDur83ZAMyErlw==-image.jpg" Example output when it fails: processing profileImage = undefined/_app_file_/data/user/0/com.company.app/files/724MjcgqPDur83ZAMyErlw==-image.jpg"

This issue seems to happen intermittently on Android platform only. Possibly related to https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/193 The workaround in #193 does not solve my issue.

Any suggestions?

[jcesarmobile]

I can't reproduce, can you provide some sample project or steps to reproduce?

[mazolo]

I can't reproduce, can you provide some sample project or steps to reproduce?

What does it return for you? I want to see an example of the url that this function has to return on android platform given this: this.webView.convertFileSrc('file:///Users/dan/camera-image-12345.png'). I also get undefined/app_file/Users/...

[jcesarmobile]

It returns the configured scheme :// the configured hostname, with default values http://localhost

[mazolo]

It returns the configured scheme :// the configured hostname, with default values http://localhost

If possible, I would like to see the exact output given the invocation I supplied on android device. It might be I'm running latest version of ionic. But it just returns undefined.

[jcesarmobile]

If possible, I would like a sample app reproducing the issue.

For the url you provided it should return

http://localhost/app_file/Users/dan/camera-image-12345.png

[mazolo]

If possible, I would like a sample app reproducing the issue.

For the url you provided it should return

http://localhost/app_file/Users/dan/camera-image-12345.png

Thanks for reply, the port number will not be included?

[jcesarmobile]

It depends on the plugin version, 3.x and newer don’t have port, unless you put it as part of the hostname preference

[mazolo]

It depends on the plugin version, 3.x and newer don’t have port, unless you put it as part of the hostname preference

Whenever you have chance please take a look at my settings: ionic info:

Ionic:

Ionic CLI : 5.0.0 (...\AppData\Roaming\npm\node_modules\ionic) Ionic Framework : @ionic/angular 4.4.2 @angular-devkit/build-angular : 0.13.9 @angular-devkit/schematics : 7.3.9 @angular/cli : 7.3.9 @ionic/angular-toolkit : 1.5.1

Cordova:

Cordova CLI : 9.0.0 ([email protected]) Cordova Platforms : android 8.0.0 Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 5 other plugins)

Utility:

cordova-res : 0.3.0 native-run : 0.2.2

System:

NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe) npm : 6.9.0 OS : Windows 10

[mazolo]

window.WEBVIEW_SERVER_URL is the culprit that returns undefined. How can I go around this given my configuration?

[mazolo]

I fail to believe that this was ever tested:

import { WebView } from '@ionic-native/ionic-webview/ngx';


constructor(private webview: WebView) { }

...

img = this.webview.convertFileSrc('file:///Users/dan/camera-image-12345.png')

[jcesarmobile]

window.WEBVIEW_SERVER_URL is generated by the webview plugin.

I've tried once again and it's working fine. So, please, provide a sample project or I'll close the issue.

[magallo286]

var str = this.webview.convertFileSrc(this.file.externalDataDirectory+"fondo.png"); var re = /undefined/gi; str = str.replace(re, "http://localhost");

temporary solution

[therawk]

Are there any news on this? I can't get convertFileSrc to work at all - always returns undefined:///

I cloned this repo: https://github.com/ionic-team/webinar-capflow because I saw this is using the convertFileSrc function and wanted to see if this one works - well, it doesn't.

The images aren't showing up and when I console.log(this.webview.convertFileSrc(img)), it also returns undefined.

Even adding and doesn't make a difference. Always getting "undefined:///" as return value.

Plz Help :(

[jcesarmobile]

I've tested webinar-capflow app and convertFileSrc is working fine. Can you provide more information about how are you running the app or some other details that might help to reproduce the issue?

[therawk]

Thanks for your reply! I just realized this error only occured when I'm using the --devapp option. This was bugging me as hell so I deployed it to my actual device and it worked 👍

It would be great if you could try this on the devapp and let me know if it works for you. When using an emulator (Android Studio) everything works fine....

[jcesarmobile]

in that case it's probably a bug in devApp, not in the plugin. Are you testing on Android or iOS? iOS app has not been updated in almost 2 years, so probably has a very old version of the plugin which might not have convertFileSrc implemented

[andrelicoski]

I solved my problem by adding <allow-navigation href="file://*/*" /> in config.xml

[tnishimura]

I am running in this exact issue -- files like file:///data/user/0/io.ionic.devapp/files/1578114145719.jpg gets transformed into undefined:///data/user/0/io.ionic.devapp/files/1578114145719.jpg. That's on android, with the latest Ionic devapp (updated feb 6 2019). On IOS, I get:

[ng] [console.warn]: "Native: tried calling WebView.convertFileSrc, but the WebView plugin is not installed."
[ng] [console.warn]: "Install the WebView plugin: 'ionic cordova plugin add cordova-plugin-ionic-webview'"

Also, on android, manually rewriting the url with something like file.replace(/^file:\/\/\//, 'http://localhost/_app_file_/') does not work. I'm new to ionic dev and I'm beginning to suspect that the devapp is garbage.

@andrelicoski Can you elaborate exactly where you put that line, and what exactly it fixed, on what platform?

[thesayyn]

We have this problem as well in live reload mode.

Turns out it was because of the CDVWebview option that has been overridden in config.xml. That's why we got window.WEBVIEW_SERVER_URL undefined.

[B0CHI]

Just had the same problem on iOS after ionic-webview suddenly stopped working, so I uninstalled and reinstalled the plugin:

cordova plugin remove cordova-plugin-ionic-webview cordova plugin add cordova-plugin-ionic-webview

window.Ionic.WebView.convertFileSrc started working like a charm again.