Cordova File Plugin, none of the callbacks are firing

Question

Using http://plugins.cordova.io/#/package/org.apache.cordova.file and plugin installed = org.apache.cordova.file 1.3.3 "File"

I capture a picture and am trying to convert it to base64. The picture location returned (var path below) is "assets-library://asset/asset.JPG?id=ECB406E6-E361-46AA-9282-FEEBDAC170DF&ext=JPG"

At first from the documentation it looked like all I needed is:

   // Convert to image URL base64
   var fileReader = new FileReader();
   fileReader.onloadend = function (data) {
        console.log(data.target.result);
   };

   fileReader.readAsDataURL(path);

The code executed but the callback never fired! I then dug around and added a bunch of other fileReader options... exactly zero of which actually execute. Same behavior on both iOS and Android

        fileReader.onload = function (data) {
            console.log("onload", data);
        };


        fileReader.onerror = function (data) {
            console.log("error!", data);
        };


        fileReader.onloadstart = function (data) {
            console.log("onloadstart", data);
        };

I'm not getting any JS errors, but I'm also not getting any console output.

1) Why are the Cordova File FileReader() callbacks not firing?

Update

I tried using ngCordova's file plugin as well, http://ngcordova.com/docs/plugins/file/

$cordovaFile.readAsDataURL('assets-library://asset/', 'asset.JPG?id=ECB406E6-E361-46AA-9282-FEEBDAC170DF&ext=JPG')
            .then(function (success) {
                // success
                console.log("ng success", success);
            }, function (error) {
                // error
                console.log("ng error", error);
            });

With that I receive the following error:

Error in Success callbackId: File1336724899 : TypeError: undefined is not a function (evaluating 'e.getFile')

I'm guessing that you need to use a regular URL, not an asset library URL. To confirm I'd probably try to use an image on a website to see if it will load that... — Mike M
Thanks @Mike, 1) why wouldn't I get an error then? 2) if I pipe the path to an img's ng-src or something it works perfectly fine 3) I do need to access that image to send though, any suggestions on how? — Joshua Ohana
I don't know about the lack of errors - maybe it gets stuck resolving the URL. Anyways, if you're using the cordova photo plugin, you can use the FILE_URI option to get a "normal" file url. — Mike M
I'm using cordova camera preview plugin, since I need the live preview, it then captures the image. Strange it's so awkward to access the path itself... — Joshua Ohana
the camera plugin natively copies the raw photo data from the asset library into the user directory to support the FILE_URI option. you might have to do something similar... — Mike M

TempD TempD · Accepted Answer · 2017-01-12T17:46:26

I've gone through numerous SO posts and forums regarding this behavior. The Error in Success callbackId: issues occurs on my iOS version of the application we are building, but not Android. Upon further investigation (with logging behavior in ngCordova source code itself) I found that assets-library://asset/ translates to a NATIVE_URI in Cordova, which is a FileEntry object in the W3 File System API spec that is designed from: FileEntry Interface

Using a FILE_URI (which in my case, I was using the cordova camera plugin and was easily configurable), I noticed that I was now using a DirectoryEntry object, and provided the getFile function I was looking for: DirectoryEntry Interface

TL;DR: Try using FILE_URI (file://) instead of NATIVE_URI ('assets-library://asset/' for iOS) to get DirectoryEntry objects that provide a getFile function.

Cordova File Plugin, none of the callbacks are firing

2 Answers