CODEWITHSUNDEEP
ioscordovaphonegap-plugins
User7723337
User7723337

Reputation: 12018

PhoneGap download image to a specific folder

I am building PhoneGap based application for iOS platform.
I want to download few image files to a specific directory.

I want to store downloaded images in folder www/my_img/

So that in my app I can further use this image as: 

<img src="my_img/downloaded.jpg" width="100px" height="100px">

I am using PhoneGap plugin for downloading images: 

var url = 'http://myServer.com/img.jpg';
var filePath = 'www/my_img/';
var fileTransfer = new FileTransfer();
var uri = encodeURI(url);

fileTransfer.download(
    uri,
    filePath,
    function(entry) {
        console.log("download complete: " + entry.fullPath);
    },
    function(error) {
        console.log("download error source " + error.source);
        console.log("download error target " + error.target);
        console.log("upload error code" + error.code);
    },
    false,
    {
        headers: {
        }
    }
);

But problem is image is not getting saved in specified folder.
How can I save downloaded image in "www/my_img/" folder?

Upvotes: 2

Views: 1200

Answers (2)

Philip Bijker
Philip Bijker

Reputation: 5115

The problem is in the value for filePath. This needs to be a device-absolute-file-path or a filesystem URL.

Have a look at the comptibility notes part of the docs:

There are some predefined folders which you can use. I think the most appropriate for your case (it's r/w, without the need to set any permissions and is persistent) is:

cordova.file.dataDirectory

You could store your downloaded image there and, when done, set the image src.

Translating this to your case:

HTML

<img id="downloadedimage" width="100px" height="100px">

JS

var url = 'http://myServer.com/img.jpg';
var filePath = cordova.file.dataDirectory + '/img.png';
var fileTransfer = new FileTransfer();
var uri = encodeURI(url);

fileTransfer.download(
    uri,
    filePath,
    function(entry) {
        console.log("download complete: " + entry.fullPath);
        document.getElementById("downloadedimage").src = entry.toURL();
    },
    function(error) {
        console.log("download error source " + error.source);
        console.log("download error target " + error.target);
        console.log("upload error code" + error.code);
    },
    false,
    {
        headers: {
        }
    }
);

Upvotes: 3

Zappescu
Zappescu

Reputation: 1439

I think you should before get access to the filesystem. When ok, you can download the image in the folder you create in the dir you got access. If you need, I can give you a snippet.

EDIT:

1) access to the filesystem:

function onDeviceReady() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFSCategory, fail);
}

2) if filesystem's got, get main dir:

function gotFSCategory(fileSystem) {
    window.fileSystem = fileSystem;
    fileSystem.root.getDirectory(window.appRootDirName, {
      create : true,
      exclusive : false
    }, dirReadyCategory, fail);
}

3) when main dir is ready, save it and go on:

function dirReadyCategory(entry) {
    window.appRootDir = entry;
    console.log('application dir is ready with window.appRootDir: '+JSON.stringify(window.appRootDir));
    // Start my code:
    start_my_code();
}

As for the filepath var, I use this one (one for each file):

var filePath = window.appRootDir.toURL() + fileName;

Upvotes: 1

Related Questions