Ionic-cli: Warnings about file access with live reload

[cfjedimaster]

I recently ran into a problem (http://forum.ionicframework.com/t/image-uris-from-camera-plugin-and-live-reload/18767/3) where basic camera stuff wouldn't work while using live reload. From what I can see, this is a known issue when using live reload and expected. However, I can definitely see this tripping people up.

I think the CLI should issue a short, quick warning, about this issue just as a reminder. I know you can't output too much there and you already output a list of helpful commands, but I honestly think it would be worthwhile to remind folks about potential issues here. Here are some random examples.

Warning: File URIs (such as those from the Camera plugin) will not work.

or

Warning: Anything using file URIs (Camera, File, File-Transfer plugins) will not work correctly.

or

Warning: Using File URI type crap will cause zombies to appear.

[mosspaper]

Also had the same issue. Were you able to find a workaround for this? File URIs were also not loading for me and returns a "Not allowed to load local resource" error. Returning the file as a Data URI seem to have worked but it doesn't really address the problem though.

[cfjedimaster]

As I said above, I don't think there is a fix. Hence me suggesting a warning of some sort.

[lukemartin]

Also ran into this problem. My app uses the file system heavily, which means I can't use live reload with the emulation at all, which is a real shame.

[dwilt]

:+1: having this issue as well. Such a bitch.

[silentsilas]

It's unfortunate. To get around this, I had to force my app to use placeholder images if it couldn't access the picture it just took.

[kmturley]

I'm getting the same issue, it works fine without livereload:

ionic run android

onFinished() [content://com.android.providers.media.documents/document/image%3A2834]
File locaton is: /storage/emulated/0/Movies/overlay.png
[INFO:CONSOLE(23)] "url", source: file:///android_asset/www/index.html (23)

And this doesn't (seems like because you load on http and file it is a )

ionic run android --livereload --consolelogs

onFinished() [content://com.android.providers.media.documents/document/image%3A2834]
File locaton is: /storage/emulated/0/Movies/overlay.png
[INFO:CONSOLE(29)] "url", source: http://172.16.245.209:8100/ (29)
[INFO:CONSOLE(0)] "Not allowed to load local resource: content://com.android.providers.media.documents/document/image%3A2834", source: http://172.16.245.209:8100/ (0)

Even if I adjust the url manually to have the local file path it doesn't work. Seems like a cross origin issue.

This issue seems to be related, with some suggestions of fixes:
https://github.com/driftyco/ionic-cli/issues/89

And another blog post about using proxies to workaround CORS issues:
http://blog.ionic.io/handling-cors-issues-in-ionic/

I've tried the following:

"proxies": [
    {
        "path": "/local",
        "proxyUrl": "content:/"
    }
]

Then in my ionic project prefixing urls with:

navigator.camera.getPicture(function () {
    window.resolveLocalFileSystemURL(imageURI, function (fileEntry) {
        var url = '/local' + fileEntry.fullPath,
            largeImage = document.getElementById('picture');
        largeImage.style.display = 'block';
        largeImage.src = url;
        console.log('success: ' + url);
    });
}, function (e) {
    console.log('error', e);
}, {
    quality: 50,
    destinationType: Camera.DestinationType.FILE_URI,
    sourceType: navigator.camera.PictureSourceType.SAVEDPHOTOALBUM
});

But doesn't seem to work

[yura-pakhuchiy]

Here is workaround for this issue: http://stackoverflow.com/a/38796506
It uses cdvfile:// protocol to access files.

[enricodeleo]

The method referenced by @yura-pakhuchiy absolutely works as far as cdvfile:// is whitelisted both on native side (<access origin="cdvfile:*"/> in config.xml) and angular (via $compileProvider.imgSrcSanitizationWhitelist).

[paulpatarinski]

@enricodeleo did you have to do anything else other than the access origin & the provider whitelist?

I am running :

cli packages: (C:\Users\ppatarinski\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : not installed

local packages:

    Cordova Platforms : android 6.4.1-dev
    Ionic Framework   : unknown

System:

    Android SDK Tools : 25.2.5
    Node              : v8.9.4
    npm               : 5.6.0
    OS                : Windows 10

Environment Variables:

    ANDROID_HOME : C:\Android\android-sdk

Misc:

    backend : pro

with the following changes :

config.xml

    <access origin="cdvfile:*" />

&

 $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https|ftp|mailto|cdvfile|file|tel|content|blob):|data:image|/);

and getting the following error

cdvfile://storage/emulated/0/Android/data/com.paylocity.paylocityqa/cache/1E938687A1B94C0D910BB2317A777477.png:1 GET cdvfile://storage/emulated/0/Android/data/com.paylocity.paylocityqa/cache/1E938687A1B94C0D910BB2317A777477.png net::ERR_UNKNOWN_URL_SCHEME