Download images and save locally on iPhone Phonegap app

I’ve already managed to save a web page (x/html) successfully, but I’d also like to save the images and mp4 videos that are contained in it, for further visualization in offline mode.

I’ve got access to the iOS filesystem, so I save the html by obtaining the code through an AJAX request, and later saving it to a file.

I don’t really know how to do the same with video and images. I have a server to which I can send queries from my app, so it shows exclusively the content I need to download, with the optimal headers in case its necessary. I just don’t know how to “download” it from the client side (Javascript).

Thanks in advance for any help.

You can use a FileTransfer object to download a remote image to a local file.

This is the latest official sample snippet:

    // !! Assumes filePath is a valid path on the device

    var fileTransfer = new FileTransfer();
    var uri = encodeURI("http://some.server.com/download.php");

    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: {
                "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
            }
        }
    );

You can only do it natively I’m afraid.
I’m doing it through a FileDownload PhoneGap Plugin that I wrote, using NSURLConnection. I pass in the url to download to the plugin through Javascript, and a target location (and it even gives me download progress).

Have not tested it yet, but the documentation at PhoneGap looks quite promising http://docs.phonegap.com/en/1.0.0/phonegap_file_file.md.html

I have used this snippet on my ios app project:

 window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
 window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, success, fail);

 var target_directory="";

 function fail() {
   //alert("failed to get filesystem");
 }

 function downloadImage(url, filename){
   alert("download just started.");
    try{
        var ft = new FileTransfer();
        ft.download(
           url,
           target_directory + filename, 
           function(entry) {
              //alert("download complete!:" + entry.nativeURL ); //path of the downloaded file 
           },
           function(error) {
              //alert("download error" + error.code);
              //alert("download error" + JSON.stringify(error));
           }
       );
   }
   catch (e){
       //alert(JSON.stringify(e));
   }

}

function success(fileSystem) {
   target_directory = fileSystem.root.nativeURL; //root path 
    downloadImage(encodeURI("http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg"), "cat.jpg"); // I just used a sample url and filename
}