Not allowed to load local resource

[clarklight]

Not displaying Photo after success call back
Not allowed to load local resource

What is expected to happen?

After taking a photo, using the file path to display the photo, by setting it into the src tag.

What does actually happen?

The image display is broken and the console is showing, the only method i can display a photo right now, is to use the base64 DATA_URL method, but i would like to displaying using the file path.
Not allowed to load local resource:
The file path is as such:
file:///data/user/0/com.abc123.abc123app/cache/1630904187041.jpg

Command or Code

navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 100,
targetWidth: 1000,
targetHeight: 1330,
destinationType: Camera.DestinationType.NATIVE_URI,
saveToPhotoAlbum: true,
correctOrientation: true
});
// also tested with FILE_URI, and all possible setting for destinationType, and it does return the correct file path, but the file path isnt allowed to be displayed....and showing the not allowed to load local resource error...does it have something to do with Google changing the location for secure storage?

function onPhotoDataSuccess(imageURI) {
console.log(imageURI);
var cameraImage = document.getElementById('image');
cameraImage.src = imageURI;
}

function onFail(message) {
console.log(message);
}

Building on:
Cordova Android 10.0.1
Camera plugin version 6.0.0
Testing on:
Samsung s10e

Thanks
Clark

[alexandremsouza1]

I have the same problem

[clarklight]

I have the same problem

Do we know if it has anything to do with the google changing secure storage location?
I have no idea what is the causes for this.

[veronicatc]

I have the same issue. I use destinationType = FILE_URI.

The camera plugin is returning this for example for a photo selected from Downloads folder:

content://com.android.providers.downloads.documents/document/msf%3A48

And I get the error "Not allowed to access local resource" when setting it in the src of an IMG tag.

[m30102]

use Base64-encoded

navigator.camera.getPicture(onSuccess, onFail, { quality: 25,
destinationType: Camera.DestinationType.DATA_URL
});

function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}

[JonSmart]

Base64 has provided us with a number of different issues in the past, we have found the file route to be more reliable - interested to understand the optimum solution from the internal team given the Cordova Android release deemed the storage as "Insecure". (ref: https://cordova.apache.org/announcements/2021/07/20/cordova-android-10.0.0.html)

[bruno-machado]

ionic cordova plugins rm cordova-plugin-ionic-webview
ionic cordova plugins add cordova-plugin-ionic-webview@1.2.1
cordova clean android

it worked for me

[jriffel]

Seems crazy to me this is a year old and still no real solution provided. As mentioned by @JonSmart we used to use Base64 data URIs and it made our app unstable and buggy because of memory pressure; the OS would just kill us. Using files in storage provided us a ton of stability. The docs for this plugin still indicate it should work but there's a ton of internet noise out there about people with this issue. Seems to be 100% related to changes in Android permissions. I've updated to Cordova 11, updated to Android platform 11, I've switch to a direct github release of some plugins advised in various internet corners, etc. Nothing seems to work - I'm quite surprised after a year. I would assume taking a photo is a pretty core concept in a lot of Cordova apps ... whats going on here?

[clarklight]

@jriffel I think the conversation did continue here apache/cordova-plugin-file#426
Then it continued here apache/cordova-plugin-file#513
I think there is a fix for it??? Havent tried it out yet. Have a look.

The reply around April something.....
"Great that this is merged in now. Thanks for all your hard work!

Any news on when there might be a release? Or is the only option to install it via the github url?"

[jriffel]

I was able to finally get a solution together that works for our use case. As previously mentioned using Data URIs works but then you are hauling around huge strings in your app. This made our app unstable and often terminated (I suspect due to memory pressure if someone captured a lot of photos). We require a FileEntry object to upload to the back end server so we do not have to hold the media in memory. However, we used to be able to use a file:// URI or similar to display a thumbnail and this is where we were getting the "Not allowed to load local resource" error. The following example code is roughly how we solved it where we use the request a file URI, convert it to a FileEntry (which we store a reference to for sending), and then get a data URI for the thumbnail. I hope this helps others.

var cameraOptions = {
     destinationType: Camera.DestinationType.FILE_URI,
       encodingType : Camera.EncodingType.JPEG,
  correctOrientation: true,
          sourceType: Camera.PictureSourceType.CAMERA
}

navigator.camera.getPicture(
  function(imageURI) {
  resolveLocalFileSystemURL(imageURI, function(fileEntry) {
    // fileEntry is usable for uploading without holding image in memory...
    
    fileEntry.file(function(file) { 
      var reader = new FileReader();
  
      reader.onloadend = function() {
        // this.result contains the Data URI usable as a preview thumbnail
        $('#some-image-id').attr('src', this.result);
      }
  
      reader.readAsDataURL(file);
    }, errHandler);
  }, errHandler);
}, errHandler, cameraOptions);

[clarklight]

Thank you @jriffel and yes, the webview has a max amount of assigned memories size, i believe that includes all the info in the local and session storage, and the app will close itself soon as the max memory limit is reached.

[clixclix2]

Try adding this to your config.xml file:

<preference name="AndroidInsecureFileModeEnabled" value="true" />

See here: https://cordova.apache.org/announcements/2021/07/20/cordova-android-10.0.0.html

(then I removed and re-added platform android)
It worked for me.

[hieunguyen2211]

Hi, I am also facing this issue when using IOS version 14.4. Are there any solutions for it?

[f18nfz]

Try adding this to your config.xml file:

<preference name="AndroidInsecureFileModeEnabled" value="true" />

See here: https://cordova.apache.org/announcements/2021/07/20/cordova-android-10.0.0.html

(then I removed and re-added platform android) It worked for me.

Thank you so much!
I recently updated to the latest version of Cordova and it broke my Android code - whereby it said 'Not allowed to load local resource' when trying to display a local image. Your suggestion (adding the extra line to config then cleaning and rebuilding the project) fixes it 🥳

[please-fill-out-this-field]

Try adding this to your config.xml file:

<preference name="AndroidInsecureFileModeEnabled" value="true" />

See here: https://cordova.apache.org/announcements/2021/07/20/cordova-android-10.0.0.html

(then I removed and re-added platform android) It worked for me.

What do you mean "removed and re-added"?

I tried cordova platform remove android && cordova platform add android after modifying config.xml, but it didn't work - still getting that "Not allowed to load local resource" error. Am I doing it wrong? cordova-android ^10.1.2

[f18nfz]

Try adding this to your config.xml file:
<preference name="AndroidInsecureFileModeEnabled" value="true" />
See here: https://cordova.apache.org/announcements/2021/07/20/cordova-android-10.0.0.html
(then I removed and re-added platform android) It worked for me.

What do you mean "removed and re-added"?

I tried cordova platform remove android && cordova platform add android after modifying config.xml, but it didn't work - still getting that "Not allowed to load local resource" error. Am I doing it wrong? cordova-android ^10.1.2

I believe he means the same as you did (to remove and re-add the android platform via Cordova CLI).

I would expect you just need to make sure that the '<preference ... ' line is present in the project root config.xml and then use the command 'cordova prepare' then you should then see it added automatically to the Android config.xml file within the android project (platforms > android > app > src > main > res > xml > config.xml). If you can see it there you can then build the project ('Cordova build') and it should work.

Personally I use a combination of Cordova CLI and Android Studio, so I manually added the '<preference ...' line into the config file within ('project name' > platforms > android > app > src > main > res > xml > config.xml) then used Android Studio to 'clean' and 'rebuild' the project. ('Cordova Prepare' and 'Cordova Build' commands would do the same sort of thing).