Skip to content

Instantly share code, notes, and snippets.

@nathanpc

nathanpc/phonegap_download_example.html

Created April 22, 2012 13:11
Show Gist options
  • Save nathanpc/2464060 to your computer and use it in GitHub Desktop.
Save nathanpc/2464060 to your computer and use it in GitHub Desktop.
Download ZIP
Sample code to download file from internet - Phonegap Wiki
Raw
phonegap_download_example.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Android
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">-->
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="/ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/iphone.css" type="text/css" />
-->
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript">
// If you want to prevent dragging, uncomment this section
/*
function preventBehavior(e)
{
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, false);
*/
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
for more details -jm */
/*
function handleOpenURL(url)
{
// TODO: do something with the url passed in.
}
*/
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
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("ready");
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);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
for more details -jm */
function onDeviceReady()
{
// do your thing!
downloadFile();
}
</script>
</head>
<body onload="onBodyLoad()">
<h1>Hey, it's PhoneGap!</h1>
<p>Don't know how to get started? Check out <em><a target="_blank" href="/http://www.phonegap.com/start">PhoneGap Start</a><em>
</p>
<br />
<p>
DOWNLOADING FILE...<br />
<span id="ready"></span>
</p>
</body>
</html>
@nielsentomazini
Copy link

Thank you so much for the code Nathan.
I wonder if you could give me any hint with a further step on your script.
How do I retrieve the file to display content?
I was able to go through your script and it is working fine. However, after downloading the file I would like to go to another HTML page in which the content of the downloaded XML file would be displayed. I have not being able to do that. How can I find the downloaded file in the device? I have tried a lot of approaches but I cannot get the file in another page.
I thank anyone in advance for any help.

@sharmapankaj75
Copy link

i want to use internal storage ( /data/data//app_database) of the application to store the file.so that the file is only accessible within the application. not for other application.
how can i use store the file in application storage area..?

@andrecaribe
Copy link

Ty for code! :)

Phonegap/Cordova 3.0.0:
Method toURI() is deprecated. Use toURL(); instead of toURI();

@sahilanand
Copy link

shows download complete but nothing happens when we click on "Ready , click to open". Please help out what to do

@emreX
Copy link

emreX commented Sep 22, 2013

hi, thank you for your example, but I HAVE A PROBLEM WİTH STORAGE !!!!!

when I turn off the wifi(internet) or close the app , my downloaded file removes !

what can I do, thanks for your comments already, dear masters...

@ishristov
Copy link

How can i get to the downloaded image in iOS (6+)? It's nowhere to be found. For Android it is downloaded to the root of the sdcard.

@niaonlinetest
Copy link

Many thanks, is this works on ios too ?
also please let me know how can I add my directory name in download location

@artiveng
Copy link

artiveng commented Jan 7, 2014

The code snippet is working. but somehow the file is not downloading, it is creating a dummy file with the same name (specified name). The file is just a piece of junk and not a real file i need. Can anyone please help me out.

@hillsng
Copy link

hillsng commented Jan 23, 2014

Hi Guys,

Any help to get this code work on Phonegap 3.X.X, precisely using phonegap Build. Thanks in advance

@menaemil
Copy link

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

@abou-emish
Copy link

Dear Sir thank you So much, i used ur work with PhoneGap 3.0 and it works great, but now i couldn't make it work with PhoneGap 3.3 the line fileSystem.root.getFile always give me Exception

02-20 12:24:34.997: W/System.err(32109): java.net.MalformedURLException: No installed handlers for this URL
02-20 12:24:34.997: W/System.err(32109): at org.apache.cordova.file.FileUtils.getFile(FileUtils.java:684)
02-20 12:24:35.007: W/System.err(32109): at org.apache.cordova.file.FileUtils.access$5(FileUtils.java:679)
02-20 12:24:35.007: W/System.err(32109): at org.apache.cordova.file.FileUtils$16.run(FileUtils.java:349)
02-20 12:24:35.017: W/System.err(32109): at org.apache.cordova.file.FileUtils$24.run(FileUtils.java:473)
02-20 12:24:35.017: W/System.err(32109): at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1112)
02-20 12:24:35.017: W/System.err(32109): at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:587)
02-20 12:24:35.017: W/System.err(32109): at java.lang.Thread.run(Thread.java:841)

@claudiojs
Copy link

Updated to PhoneGap 3.3.0:
https://gist.github.com/claudiojs/9207048

...as suggested here:
http://stackoverflow.com/questions/21750113/phonegap-3-3-0-crashes-on-urlforfilesystempath-selector

@torrmal
Copy link

torrmal commented Apr 5, 2014

Maybe you'd like to try this:

new FileManager().download_file('http://url','target_path',Log('downloaded success'));

target_path: can include directory (example: dira/dirb/file.html) and the directories will be created recursively.

https://github.com/torrmal/cordova-simplefilemanagement

@parthdevmurari91
Copy link 

- Download file from url to your device using phonegap
- It is working 3.0 and up to for iOS and android 


var folderName = 'xyz';
var fileName;

function downloadFile(URL) {
    //step to request a file system 
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, fileSystemSuccess, fileSystemFail);

    function fileSystemSuccess(fileSystem) {
        var download_link = encodeURI(URL);
        fileName = download_link.substr(download_link.lastIndexOf('/') + 1); //Get filename of URL
        var directoryEntry = fileSystem.root; // to get root path of directory
        directoryEntry.getDirectory(folderName, {
            create: true,
            exclusive: false
        }, onDirectorySuccess, onDirectoryFail); // creating folder in sdcard
        var rootdir = fileSystem.root;
        var fp = fileSystem.root.toNativeURL(); // Returns Fullpath of local directory

        fp = fp + "/" + folderName + "/" + fileName; // fullpath and name of the file which we want to give
        // download function call
        filetransfer(download_link, fp);
    }

    function onDirectorySuccess(parent) {
        // Directory created successfuly
    }

    function onDirectoryFail(error) {
        //Error while creating directory
        alert("Unable to create new directory: " + error.code);

    }

    function fileSystemFail(evt) {
        //Unable to access file system
        alert(evt.target.error.code);
    }
}

function filetransfer(download_link, fp) {
    var fileTransfer = new FileTransfer();
    // File download function with URL and local path
    fileTransfer.download(download_link, fp,
        function(entry) {
            alert("download complete: " + entry.fullPath);
        },
        function(error) {
            //Download abort errors or download failed errors
            alert("download error source " + error.source);
        }
    );
}

@caiooaugusto
Copy link

thx parthdevmurari91, it works!

just change "toNativeURL()" deprecated
var fp = fileSystem.root.toNativeURL();
with "toURL()"
var fp = fileSystem.root.toURL();

@s-muntazir
Copy link

thax parthdevmurari91

just one question, how do you pass the URL to downloadFile(URL) function

@iecompattest
Copy link

test

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment