How to access image from native URI (assets-library) in Cordova for iOS

Question

I have a Cordova/PhoneGap app which uses the camera to capture a picture. I need to access this picture to send to my server.

For Android I simply use $cordovaFile.readAsDataURL(cordova.file.dataDirectory, fileName)

However; on iOS the filename does not come back as such. My return value for iOS shows the path as

assets-library://asset/asset.JPG?id=539425FE-43AA-48E7-9865-D76348208AC7&ext=JPG

How can I access and read this image? I'd prefer to stick with $cordovaFile but just want to get it to work.

I am using CordovaCameraPreview plugin and the best I can get back from the picture taker handler seems to be something formed similar to:

assets-library://asset/asset.JPG?id=990355E1-200A-4E35-AAA1-7D461E3999C8&ext=JPG assets-library://asset/asset.JPG?id=C49FF0EB-CCCB-45B2-8577-B13868D8DB29&ext=JPG

How can I convert this to a filename and path that I can read with $cordovaFile? According to their documentation (http://ngcordova.com/docs/plugins/file/) it looks like I need to use one of their paths for File System Layout. It works fine on Android using cordova.file.dataDirectory but can't figure out how to access on iOS

I've also tried using window.resolveLocalFileSystemURL(path) but am getting undefined as my result.

Update

I feel like I'm getting closer... using window.resolveLocalFileSystemURL(path,resolveOnSuccess, resOnError); I get more information

name: "assets-library"
fullPath: "/asset/asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG"
name: "asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG"
nativeURL: "assets-library://asset/asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG"

It looks like I now need to use the fullPath but still can't figure out how to access with $cordovaFile

If I try to use $cordovaFile.readAsDataURL(cordova.file.dataDirectory, data.name) where data.name is asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG I get a file not found error

Update 2

I have tried using every single File System Layout available at http://ngcordova.com/docs/plugins/file/ and receive the same File Not Found error on each one. Still no clue how to access a file in assets-library using $cordovaFile

Solution 1

I was struggling with a similar issue for a while, but I figured it out today. I also thought that the FileSystem APIs didn't work with assets-libary:// URIs -- but that is not the case.

You should be able to get access to the File object (as well as the actual image name) by using the following code:

resolveLocalFileSystemURL('assets-library://asset/asset.JPG?id=711B4C9D-97D6-455A-BC43-C73059A5C3E8&ext=JPG', function(fileEntry) {
    fileEntry.file(function(file) {
        var reader = new FileReader();
        reader.onloadend = function(event) {
            console.log(event.target.result.byteLength);
        };
        console.log('Reading file: ' + file.name);
        reader.readAsArrayBuffer(file);
    });
});

Solution 2

I had success with a simple substitution, like this

fullPath = fullPath.replace("assets-library://", "cdvfile://localhost/assets-library/")

It works in iOS 9.3

Comments

[horstwilhelm]

Life saver! This became relevant for me when I wanted to use the address for an <img> tag. It used to work perfectly with Cordova-iOS <4 but since Cordova 6 / Cordova-iOS 4 it stopped working. With your code, everything is back to normal again. :)

[Nagendra Badiganti]

Dear Danjarvis, I was also facing the same issue with the camerapreview plugin. Can you please tell me whether you are able to upload the file using the output file from the above method or not? Output url looks like this, cdvfile://localhost/assets-library/asset/asset.JPG?id=F0D3E4‌​F4-366C-4C27-A158-93‌​7CA7805C87&ext=JPG

[rbarriuso]

It also worked for us on iOS 10.2 using cordova-ios 4.3.1

[rbarriuso]

Let me point out that it's necessary to add $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|fi‌​le|blob|cdvfile|cont‌​ent):|data:image/); in the configuration phase of the app in order to display images directly on the view

[jcaruso]

If you're just trying to convert the assets-library:// URL to a CDVFile path, you can call the following on the fileEntry object returned by resolveLocalFileSystemURL: fileEntry.toInternalURL()