Download images and save locally on iPhone Phonegap app

Posted on

Download images and save locally on iPhone Phonegap app – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout javascript and iphone. Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about Download images and save locally on iPhone Phonegap app.

Problem :

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.

Solution :

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("");
        function(entry) {
            console.log("download complete: " + entry.fullPath);
        function(error) {
            console.log("download error source " + error.source);
            console.log("download error target " +;
            console.log("upload error code" + error.code);
            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

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.");
        var ft = new FileTransfer();
           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){


function success(fileSystem) {
   target_directory = fileSystem.root.nativeURL; //root path 
    downloadImage(encodeURI(""), "cat.jpg"); // I just used a sample url and filename

Leave a Reply

Your email address will not be published. Required fields are marked *