Phonegap Build: download image in one of the folders of your app

Question

I am able to download an image if I specify the path directly with

file:///storage/sdcard0/

How can I save an image to my one of the folders in my app ? I tried this approach to set app path but it doesn't work for me.

This is what I am using so far and it works if you want to save and image to sdcard:

var fileName = "myImage.png";  
var fileTransfer = new FileTransfer();

var uri = encodeURI("http://my.url.to.image/myImage.png");   

var filePath = "file:///storage/sdcard0/uploads/myImage.png";

fileTransfer.download(
    uri,
    filePath,
    function(entry) {
        alert("download complete: " + entry.fullPath);
        console.log("download complete: " + entry.fullPath);
    },
    function(error) {  
        alert("download error source/target/code:\n" + error.source +" \n||| "+error.target+" \n||| "+error.code);
     console.log("download error source/target/code " + error.source+" / "+error.target+" / "+error.code); 
    }  
); 

If I use this function:

function getPhoneGapPath() {
    'use strict';
    var path = window.location.pathname;
    var phoneGapPath = path.substring(0, path.lastIndexOf('/') + 1);
    return phoneGapPath;
}

I get /android_asset/www/. How would I get the correct path to my app?

The app is using AngularJS and is not bootstrapped in onDeviceReady (developer before me made it that way and now changing it to something like this is beyond me (tried but didn't work)).

Another question I can refer to was asked here.
I also tried this, this, this and this but none worked for me. I get "" for fullPath and recently I managed to get path printed with .toURL() and it was "cdvfile://localhost/persistent". The above download code now also works if I use

filePath = "cdvfile://localhost/persistent/MyAppID/uploads/myImage.png";

but this creates folder /MyAppID/uploads in /storage/sdcard0 which is bad again. My app needs to get to images with

<img src="uploads/myImage.png" alt="myimg"/>

Another useful link is here but it offers no help as to how to write to pre-created folder of your own app.

EDIT: As far as I've learned you cannot write within your own app(read only). That's why I tried to reference images from sdcard with

<img src="file:///storage/sdcard0/Android/data/com.app.my/cache/myImage.png" alt="myimg"/>

and this works! :) Unfortunately this is hardcoded and not good since other phones might have a different persistent location. If I try

<img src="cdvfile://localhost/persistent/Android/data/com.app.my/cache/myImage.png" alt="myimg"/>

this does not reference the picture :/ (it does download it on storage/sdcard0/Android/data/com.app.my/cache/ though)

Answer 1

As far as I learned you cannot write to your own app (change items inside your app - /www folder on Android).

My solution was to save images to PERSISTENT storage (sdcard usually). You can get the path of your app's persistent storage with these steps:

function onDeviceReady() {
    console.log('Device Platform: ' + device.platform);  // returns 'Android' or 'iOS' for instance
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail); 
    cacheFolderSubPath = "Android/data/com.id.myApp/cache/"; // this is app's cache folder that is removed when you delete your app! (I don't know what this path should be for iOS devices)  
}

Then inside gotFS success callback

function gotFS(fileSystem) { 
    var nturl = fileSystem.root.toNativeURL(); // cdvfile://localhost/persistent/
    window.resolveLocalFileSystemURL(nturl+cacheFolderSubPath, onResolveSuccess, onResolveFail);
}

and in onResolveSuccess

function onResolveSuccess(fileEntry){
    appCachePath = fileEntry.toNativeURL()+"/"; // file:///storage/sdcard0/Android/data/com.id.myApp/cache/ in my case but some other Androids have storage/emulated/0 or something like that ... 
    continueCustomExecution();
}

and now in continueCustomExecution() you can run your program and do whatever it is you do ... and in this case download images into appCachePath that we got earlier. You can now successfully reference images in src tags with our appCachePath+yourImageName.

Unfortunately I still don't know how to download an image successfully on iOS. I get an error code 1 with FileTransfer plugin ... (saving to file:///var/mobile/Applications/my.app.id/Documents/). Probably should save somewhere else but this is the path I get when requesting PERSISTENT FileSystem.

Cheers

Answer 2

I would use the folder alias as defined in the plugin docs here (https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md). Specifically cordova.file.dataDirectory. Note that this is not, afaik, under the www of your original project, but it seems to be the preferred place to store downloads. Once saved there you can resolve that to a URL that you could use to load via AJAX, or in an img tag if you are downloading graphics.