CODEWITHSUNDEEP
javascriptandroidiosangularjscordova
marank
marank

Reputation: 63

Download file with PhoneGap and use within AngularJS

I´m building a PhoneGap/Cordova app with AngularJS. I spent a huge amount of time on finding out how to successfully download a remote file to the device. Here´s my code:

download: function() {
    console.log('start download');
    var remoteFile = "http://remoteserver.domain";
    var localFileName = "file.json";

    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
        fileSystem.root.getFile(localFileName, {create: true}, function(fileEntry) {
            var localPath = fileEntry.toURL();
            var ft = new FileTransfer();
            ft.download(remoteFile,
                localPath, 
                function(entry){console.log(entry)}, 
                function(error){console.log(error.code)}
            );
        }, function(error){console.log(error.code)});
    }, function(error){console.log(error.code)});
}

For iOS, the native path of the file returned by the FileSystem API is the Documents folder of my app. But because I´m using AngularJS and it runs within the www folder inside the Appname.app folder, I have no clue how I can access that file from AngularJS so that it will also work out of the box with Android and other OS supported by PhoneGap.

So what I want to do is either tell the File API to save the file inside the Appname.app/www folder, or tell AngularJS to use ../Documents/ folder, but without being platform-specific. Maybe there´s a completely different solution I could use?

Upvotes: 3

Views: 1955

Answers (3)

Enrique Oriol
Enrique Oriol

Reputation: 1730

This AngularJS module uses cordova file API and don't require file-transfer plugin. You can create several queues to download files, and perform any operation after file downloads, and it's pretty well documented.

downgularJS - https://github.com/kaikcreator/downgularJS

Upvotes: 0

Keith
Keith

Reputation: 1185

There is also this ng service for downloading file in Cordova. Uses the cordova file api. Tested on Android and iOS. Provides methods for downloading single file or an array of files.

https://github.com/verico/ng-cordova-file-downloader

Upvotes: 0

Adarsh Nahar
Adarsh Nahar

Reputation: 319

We have implement similar functionality in our app, below code will give you idea of it

    $rootScope.download = function(ii,catalogs)
{
    var len = catalogs.length;
    if(ii==len)
    {
        localStorage.setItem("catalogdwnld", 1);

            if($rootScope.loadingmodal){
                $rootScope.loadingmodal.opened.then(function () {
                  $rootScope.loadingmodal.dismiss( "cancel" );
            });

        }

    }
    else if(ii < catalogs.length){


    var id = catalogs[ii].id;

    /**/

        if(catalogs[ii].parentId==0)
        {
            window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, fileSystemSuccess, fileSystemFail);
                function fileSystemSuccess(fileSystem) {
                var directoryEntry = fileSystem.root; // to get root path to directory
                            directoryEntry.getDirectory("catalogs", {create: true, exclusive: false}, onDirectorySuccess, onDirectoryFail);
                            // root directory path
                            var rootdir = fileSystem.root;
                            var fp = rootdir.toURL();
                            // storing images in catalogs folder
                            fp = fp+"/catalogs/"+id+".png";

                            var fileTransfer = new FileTransfer();

                            fileTransfer.download($window.service_url+"/catalog/cover/"+id+"",fp,  
                                function(entry) {
                                        var native_url = entry.toNativeURL();
                                /*****  Store it in db *******/ 

                                },
                                function(error) {
                                    navigator.notification.alert(
                                    'Download failed, please try again',
                                    null,         
                                    'Download Failed',   
                                    'OK');


                                }
                            );
                }
        }
}

to get root directory path you can use,

fileSystem.root;

we are storing native path in db so that we can use it later to show images. if you are not making your app for offline then you can use html4\5 localstorage.

we have tested above code in android and ios, so it shouls work on platforms.

Thanks..

Upvotes: 1

Related Questions