Not allowed to load local resource: - cordova.file.dataDirectory

[clarklight]

The situation
I had been browsing through many other threads like this one #426 that talked about it would only affect cordova.file.external*

But every single one of the folder or directory, i can't read from, Nor can i write to any other folder, i can only write to the InternalStorage/Download folder.

var folderpath = 'file:///storage/emulated/0/Download';
     window.resolveLocalFileSystemURL(folderpath, function(dir) {
      dir.getFile(filename, {create:true}, function(file) {
        file.createWriter(function(fileWriter) {
          fileWriter.write(DataBlob);
                  }, function(err){
         });
      });
    });

When i add the photo file:///storage/emulated/0/Download/photoimg_id=1624.png to src tag, it will call the Not allowed to load local resource: error.

I calls the same error even i am using cordova.file.dataDirectory or any other folder.

I also tried to just use the example in the ReadMe.

window.requestFileSystem(LocalFileSystem.PERSISTENT, 5 * 1024 * 1024, function (fs) {
    console.log('file system open: ' + fs.name);
    getSampleFile(fs.root);
 }, onErrorLoadFs);

And saved that image, and tried to append the SRC from FileEntry.nativeURL, it calls the Not allowed to load local resource: error again.
Currently i simply have no way to display an image from images stored inside the device.

Platform
Android 11
Cordova 10.0.0
Cordova-plugin-file 6.0.2

[alex-steinberg]

Please have a look at this example app which shows how to download and display an image on Android 11 Cordova.

[grassick]

@clarklight Did you find a solution for this using dataDirectory? We switched to use dataDirectory also (since that was supposed to be the safer option) and now we can't resolve the URLs for WebView, which obviously breaks our photo display.

[clarklight]

@clarklight Did you find a solution for this using dataDirectory? We switched to use dataDirectory also (since that was supposed to be the safer option) and now we can't resolve the URLs for WebView, which obviously breaks our photo display.

Nope, in the end i parsed the image into a base64 and stick the base64 into the src for displaying...for the time being, it isnt a great solution, as i believe it takes more memories? Not 100% sure. But atleast it displays the image....for now for my use case....

[grassick]

I was able to use toInternalURL instead, but it's a real problem that toURL is returning URLs that the WebView can't open! For example, a file in internal storage (dataDirectory) gets a toURL of: file:///data/user/0/co.mwater.clientapp/files/images/cached/160h/036ff0b7ddf04c1dafb18a7fe9913f34.jpg

This returns a ERR_ACCESS_DENIED message. If I get it as a cdvfile using toInternalURL (cdvfile://localhost/files/images/cached/160h/036ff0b7ddf04c1dafb18a7fe9913f34.jpg), it works.

I think this is a bug, as toURL should return a valid URL. This is only a problem when targeting API level 30.

[clarklight]

@grassick Can you try to communicate this to @alex-steinberg to verify this? Because i have not tried the toInternalURL method. Was your error the same as mine "Not allowed to load local resource:" ?

[grassick]

@clarklight @alex-steinberg I found a solution! Upgrade to Cordova 11 with latest cordova-android. Use "https://github.com/apache/cordova-plugin-file-transfer.git" if you need it instead of "cordova-plugin-file-transfer". Set <preference name="AndroidInsecureFileModeEnabled" value="true" /> in your config.xml

Then just use toURL, not toInternalURL. Voila!

[clarklight]

@grassick Did you simply add in the file transfer plugin and it worked? If so it could be a permission thing that was not set?
Because if the file transfer plugin has required a permission/or set a flag, then you added in that plugin to request that permission, then it will go around the issue.
But what flag is that? is that the old request external storage flag? Because that is going to be deprecated in sometime soon? I read on the android documentation. We would want to make sure whatever allowing the image to be displayed isnt randomly going to disappear.

[grassick]

The key difference, I think, was upgrading to the latest cordova-android (via Cordova 11) and then adding the AndroidInsecureFileModeEnabled. This isn't the soon-to-be-deprecated external storage, but rather a flag to run the app from file:///, not https://localhost/. I don't think the file transfer plugin has anything to do with it. You just need to use the git version of it or the build crashes.