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)

score 1 · Answer 1 · answered Jun 19 '14 at 14:02

1

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.

answered Jun 19 '14 at 14:02

Raymond Camden

10,661
3
34
68

Thank you for your time Raymond. I checked that page (the last link in my question) and unfortunately if I try to alert cordova.file.dataDirectory in my app (deviceready for instance) alert won't even trigger. (that happens often when trying to print something that is undefined or weird in any way when using phonegap). Last but not least, I really want to put images to one of the pre-created folders inside my app. I don't know why this is so complicated :) – trainoasis Jun 19 '14 at 14:17
Are you using PhoneGap Build or going locally? – Raymond Camden Jun 23 '14 at 14:16
As far as I figured now you cannot modify your app folders since they are read only. I guess I'll just have to use XHR to fetch data from some place on sdcard ... – trainoasis Jun 24 '14 at 11:57
Ah shoot - the plugin being used by PGB is older - 1.0.1. The latest version has the shortcuts. If you stop using PGB and build locally it should work. – Raymond Camden Jun 24 '14 at 14:10
I had to use pgb to test it on multiple devices each time I created a build :x thanks for your time! – trainoasis Jul 03 '14 at 06:55

trainoasis · Accepted Answer · 2014-07-07T11:22:06.960

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

I don't use the FileTransfer plugin, I just use normal XHR and I can download and save things in the FS in both Android and iOS (tried in Phonegap 3.1, 3.3, 3.4 and 3.5). — user276648, Aug 27 '14 at 05:51
How do you do that? using XHR to download audio and image file. example please — David Addoteye, May 14 '15 at 18:13

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

2 Answers2

Linked