Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Sample code to download file from internet - Phonegap Wiki
<!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>
@mulhoon

This comment has been minimized.

Show comment Hide comment
@mulhoon

mulhoon May 16, 2012

Hi Nathan,
What is the dummy.html doing here? it seems like it is created and then removed immediately. Is there a reason for this?

mulhoon commented May 16, 2012

Hi Nathan,
What is the dummy.html doing here? it seems like it is created and then removed immediately. Is there a reason for this?

@nathanpc

This comment has been minimized.

Show comment Hide comment
@nathanpc

nathanpc May 16, 2012

It's just a mirror with syntax highlighting.

Owner

nathanpc commented May 16, 2012

It's just a mirror with syntax highlighting.

@mulhoon

This comment has been minimized.

Show comment Hide comment
@mulhoon

mulhoon May 16, 2012

Sorry, I mean "dummy.html" in lines 48-52
What does this do on the phone?

Thanks

mulhoon commented May 16, 2012

Sorry, I mean "dummy.html" in lines 48-52
What does this do on the phone?

Thanks

@nathanpc

This comment has been minimized.

Show comment Hide comment
@nathanpc

nathanpc May 16, 2012

Ahh, that's just a simple example of a file that will be created on the file system.

Owner

nathanpc commented May 16, 2012

Ahh, that's just a simple example of a file that will be created on the file system.

@mulhoon

This comment has been minimized.

Show comment Hide comment
@mulhoon

mulhoon May 16, 2012

Ah, ok.
Thanks

mulhoon commented May 16, 2012

Ah, ok.
Thanks

@Gowiem

This comment has been minimized.

Show comment Hide comment
@Gowiem

Gowiem May 18, 2012

Hey man, this is great thanks!
Couple quick questions:

  1. Does the "dummy.hmtl" file have to be created for a file to be instantiated or could we start the filesystem.root.getFile function with a new FileTransfer? Do we need to create the dummy file to get the path, is that why it's there? Or is it there just to show that we can create blank files if that is what we are looking to do?
  2. I noticed the LocalFilesystem.PERSISTENT. Does that mean that this file is stored locally forever or is it persistent till the app is closed/the phone is turned off or reset?

Gowiem commented May 18, 2012

Hey man, this is great thanks!
Couple quick questions:

  1. Does the "dummy.hmtl" file have to be created for a file to be instantiated or could we start the filesystem.root.getFile function with a new FileTransfer? Do we need to create the dummy file to get the path, is that why it's there? Or is it there just to show that we can create blank files if that is what we are looking to do?
  2. I noticed the LocalFilesystem.PERSISTENT. Does that mean that this file is stored locally forever or is it persistent till the app is closed/the phone is turned off or reset?
@dpatey

This comment has been minimized.

Show comment Hide comment
@dpatey

dpatey Jul 5, 2012

Would it be possible to save an image from an external URL to the Camera Roll using this method?

dpatey commented Jul 5, 2012

Would it be possible to save an image from an external URL to the Camera Roll using this method?

@nathanpc

This comment has been minimized.

Show comment Hide comment
@nathanpc

nathanpc Jul 5, 2012

@dpatey Sadly not. The only thing you can do is display the image and tell the user to click-and-hold so the default OS menu comes up and then he can click to save the photo, but I think there is a plugin for what you want.

Owner

nathanpc commented Jul 5, 2012

@dpatey Sadly not. The only thing you can do is display the image and tell the user to click-and-hold so the default OS menu comes up and then he can click to save the photo, but I think there is a plugin for what you want.

@dpatey

This comment has been minimized.

Show comment Hide comment
@dpatey

dpatey Jul 5, 2012

I appreciate the reply @nathanpc. I've been looking at Jesse McFadyen's imageHelper plugin but for some reason have been having a devil of a time getting it to work. I thought maybe I'd found a magic bullet with your script here - which worked exactly as advertised on the first try, by the way :) - but magic bullets very rarely exist in the PhoneGap universe I've found. Thanks again!

dpatey commented Jul 5, 2012

I appreciate the reply @nathanpc. I've been looking at Jesse McFadyen's imageHelper plugin but for some reason have been having a devil of a time getting it to work. I thought maybe I'd found a magic bullet with your script here - which worked exactly as advertised on the first try, by the way :) - but magic bullets very rarely exist in the PhoneGap universe I've found. Thanks again!

@amirudin

This comment has been minimized.

Show comment Hide comment
@amirudin

amirudin Nov 22, 2012

@Gowiem

1- The dummy.html is there for the fileEntry to be instantiated.
2- The file will be stored locally forever

Glad this code getting evolved.

@Gowiem

1- The dummy.html is there for the fileEntry to be instantiated.
2- The file will be stored locally forever

Glad this code getting evolved.

@MeganSime

This comment has been minimized.

Show comment Hide comment
@MeganSime

MeganSime Feb 18, 2013

hay, thanks a lot for this :) I was just wondering - i have already coded a file to be written to the localFileSystem and was going to tell the computer to retrieve the file from memory and download that. how would i alter the code to suit that? do i just replace "dummy.html" with my file name? (Sorry if this is a little stupid-sounding, i'm new to all this) xx

hay, thanks a lot for this :) I was just wondering - i have already coded a file to be written to the localFileSystem and was going to tell the computer to retrieve the file from memory and download that. how would i alter the code to suit that? do i just replace "dummy.html" with my file name? (Sorry if this is a little stupid-sounding, i'm new to all this) xx

@moa7ed

This comment has been minimized.

Show comment Hide comment
@moa7ed

moa7ed Apr 16, 2013

Failed to load webpage with error: The requested URL was not found on this server.

moa7ed commented Apr 16, 2013

Failed to load webpage with error: The requested URL was not found on this server.

@nielsentomazini

This comment has been minimized.

Show comment Hide comment
@nielsentomazini

nielsentomazini May 7, 2013

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.

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

This comment has been minimized.

Show comment Hide comment
@sharmapankaj75

sharmapankaj75 Jul 16, 2013

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..?

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

This comment has been minimized.

Show comment Hide comment
@andrecaribe

andrecaribe Aug 10, 2013

Ty for code! :)

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

Ty for code! :)

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

@sahilanand

This comment has been minimized.

Show comment Hide comment
@sahilanand

sahilanand Aug 15, 2013

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

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

@emreX

This comment has been minimized.

Show comment Hide comment
@emreX

emreX 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...

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

This comment has been minimized.

Show comment Hide comment
@ishristov

ishristov Sep 24, 2013

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.

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

This comment has been minimized.

Show comment Hide comment
@niaonlinetest

niaonlinetest Nov 14, 2013

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

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

@artiveng

This comment has been minimized.

Show comment Hide comment
@artiveng

artiveng 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.

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

This comment has been minimized.

Show comment Hide comment
@hillsng

hillsng Jan 23, 2014

Hi Guys,

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

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

This comment has been minimized.

Show comment Hide comment
@menaemil

menaemil Feb 12, 2014

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

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

This comment has been minimized.

Show comment Hide comment
@abou-emish

abou-emish Feb 20, 2014

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)

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)

@torrmal

This comment has been minimized.

Show comment Hide comment
@torrmal

torrmal 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

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

This comment has been minimized.

Show comment Hide comment
@parthdevmurari91

parthdevmurari91 Feb 21, 2015

- 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);
        }
    );
}
- 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

This comment has been minimized.

Show comment Hide comment
@caiooaugusto

caiooaugusto Jun 7, 2016

thx parthdevmurari91, it works!

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

thx parthdevmurari91, it works!

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

@s-muntazir

This comment has been minimized.

Show comment Hide comment
@s-muntazir

s-muntazir Jun 10, 2016

thax parthdevmurari91

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

thax parthdevmurari91

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

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