Friday, October 4, 2013

PhoneGap File downloading and displaying in iOS

Include the given code just above the </head> tag in your index.html . Here we use FileTransfer object and fileTransfer.download() method.


  <script type="text/javascript" charset="utf-8">  
       // Wait for Cordova to load  
    document.addEventListener("deviceready", onDeviceReady, false);  
    // Cordova is ready  
    function onDeviceReady() {  
      alert("Going to start download");  
      downloadFile();  
    }  
     function downloadFile(){  
       window.requestFileSystem(  
                    LocalFileSystem.PERSISTENT, 0,  
                    function onFileSystemSuccess(fileSystem) {  
                    fileSystem.root.getFile(  
                                "dummy.html", {create: true, exclusive: false},  
                                function gotFileEntry(fileEntry){  
                                var sPath = fileEntry.fullPath.replace("dummy.html","");  
                                var fileTransfer = new FileTransfer();  
                                fileEntry.remove();  
                                fileTransfer.download(  
                                           "http://www.w3.org/2011/web-apps-ws/papers/Nitobi.pdf",  
                                           sPath + "theFile.pdf",  
                                           function(theFile) {  
                                           console.log("download complete: " + theFile.toURI());  
                                           showLink(theFile.toURI());  
                                           },  
                                           function(error) {  
                                           console.log("download error source " + error.source);  
                                           console.log("download error target " + error.target);  
                                           console.log("upload error code: " + error.code);  
                                           }  
                                           );  
                                },  
                                fail);  
                    },  
                    fail);  
     }  
     function showLink(url){  
       alert(url);  
       var divEl = document.getElementById("deviceready");  
       var aElem = document.createElement("a");  
       aElem.setAttribute("target", "_blank");  
       aElem.setAttribute("href", url);  
       aElem.appendChild(document.createTextNode("Ready! Click To Open."))  
       divEl.appendChild(aElem);  
     }  
     function fail(evt) {  
       console.log(evt.target.error.code);  
     }  
 </script>  

26 comments:

  1. Thanks for the working example. All I had to do was copy and paste and your code worked perfectly.

    ReplyDelete
  2. Hi Adarsh, I am completely new to PhoneGAP.
    Your code look promising, but it's not working for me :(
    I made a folder js --> phonegap-1.4.1.js
    and index.html containing your code.
    Is there more things to add ?? ( like config.html )
    Sorry, if I sound stupid, but I have no idea about PhoneGAP

    ReplyDelete
  3. First of all try to use the latest version of PhoneGap 2.9.0. Also please go through some hello world application for better understanding of PhoneGap.

    And please be specific, Are you using a iOS simulator to test your code ? Did you try using alerts to check the flow of code ?

    ReplyDelete
  4. Adarsh thank you for the example. I tried it and it worked on iOS. But, thhe question I have is will the user be able to delete the file that he has downloaded ??? Will he have easy access to the file ??? Because I found the path it gets downloaded to was not accessible in my phone.

    ReplyDelete
    Replies
    1. In iOS, file will be downloaded to application sandbox. It is not directly accessible by user until the phone is jailbroken.

      In case of Android, the file is accessible via user as the file system is open to the user.

      Delete
  5. I am working in cross platform using phonegap. When i tried Download Phonegap API in IOS, file is getting downloaded in phone rather in SD Card So its not safe to save it phone,so Please Suggest me solution So that it support both in Android and ios to open file just to view it,without downloading.....

    ReplyDelete
    Replies
    1. hi Pavithra H M,
      do you have a code how to download a file using filetransfer.download in android paltform

      Delete
    2. This comment has been removed by the author.

      Delete
    3. Hi Pavithra,

      If you don't want to let users download the file, you can keep that file in the server and load on demand online.

      What type of file you want to open and display ?

      Delete
  6. Hi Adarsh,
    i am working in cross platform using phonegap. when i tried your code it shows only alert("Going to start download"); its does't not downloading file please help me how to fix this problem

    ReplyDelete
  7. i am using in android it is correct platform

    ReplyDelete
    Replies
    1. It is supposed to work in Android too. Please try this code in iOS.

      Also put an alert inside the "function downloadFile(){ " so that we can confirm that method is called.

      Delete
  8. I have tried your code, it works no problem but when file which is downloaded have size in bytes. and original file which i want to download is of 2.3mb and after download it is of 87 bytes what is this?.You faced problem like this?

    ReplyDelete
  9. I tried on my Android phone, and I got "Unfortunately, app has stopped." error.
    Does anyone has the working solution for Android?

    ReplyDelete
  10. does this work for video as well????

    ReplyDelete
  11. and what if i want to change the name of the file being downloaded???

    ReplyDelete
  12. This code works fine on android but when I used this code on ios, it tells me that the download is successfully completed but I find no files downloaded ... please help

    ReplyDelete
  13. Hey,

    Very useful but i want to save image inside img folder of my application. do you have any idea about this???

    ReplyDelete
  14. Hi Sir,when i use your code it give Uncaught ReferenceError : LocalFileSystem is not defined.

    ReplyDelete
  15. I've tried the code and can`t understand why it isn't working for me. I'm testing directly in my iPad using phonegap build. the only think that works is the "Going to start download" alert after that nothing happens. HELP!!!! PLEASE!!!

    ReplyDelete
  16. Hi Sir,
    I am new to Phonegap . Im unable to download a file from the server. i tried your code and i`m getting error code1 ,error in target . Can you please help me out in solving this issue.

    ReplyDelete
  17. Sweet. do you have the html for this?

    ReplyDelete
  18. hey, i tried using your code without any luck. wheter in the android emulator nor on my phone after installing the APK file.

    i replaced all your console.log commands with an alert because i dont see any console in the emulator not my phone, this is what i receive:

    - Going to start download
    - download error source http://www.w3.org/2011/web-apps-ws/papers/Nitobi.pdf
    - download error target //theFile.pdf
    - upload error code: 1

    thats it :(


    im stuck all day tryin to produce a "sync/download files app" for android, but no progress so far :(

    ReplyDelete
    Replies
    1. Yes, it does not work for me too, with the same error messages

      Delete