Tutorial How to Create Download File From Url On Ionic Framework

Seegatesite.com – An easy way to create a button download files from url using ionic framework. Continuing my previous tutorial How to Create Android Image Gallery with Ionic Framework and Web Services, if we want to create wallpaper application on the mobile app then it should add features download button. ngCordova has provided plugin to perform file transfer in ionic framework.

Easy Way Create Download File Button With Ionic Framework

What is ngCordova ?

ngCordova is a collection of scripts which are summarized for ease of function calls that exist in PhoneGap / Cordova. It gives you simple AngularJS wrappers , where you can take a picture, scan a barcode, download file, upload a file and much more with just a few lines of code.

ngCordova Installation Guide

It has been discussed in detail how to install ngCordova on the ngCordova official site. I’m just a little review of their main code. Instructions how to install ngcordova :

  1. You can install ngCordova through a bower or directly download the js file.

    bower install ngCordova


    Download ngCordova File Master

  2. Include ng-cordova.js or ng-cordova.min.js in your index.html file before cordova.js
  3. Add the plugin to your project using the Cordova CLI

    cordova plugin add plugin-name

  4. Inject as an Angular dependency

    angular.module('myApp', ['ngCordova'])

  5. Wrap each plugin call with the deviceready event – important !

    $ionicPlatform.ready(function() {
    $cordovaPlugin.someFunction().then(success, error);

Since we will make the downloading process , so we need a cordova-plugin-file-transfer plugin , here’s how to download the plugin

cordova plugin add cordova-plugin-file-transfer

For an explanation and detail usage please read from official site $cordovaFileTransfer

How to Create Download File From Url On Ionic Framework

  1. Create new ionic project and give name ionicdownloader.

    ionic start ionicdownloader blank

  2. Add ngCordova plugin transfer file

    cordova plugin add cordova-plugin-file-transfer

    Download Ngcordova Tranfer File Plugin Tutorial How To Create Download File From Url On Ionic Framework

  3. Then Add ng-cordova script to index.html (ionicdownloader > www > index.html)
    <!DOCTYPE html>
        <meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>Ionic Framework Download File</title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/ng-cordova.min.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
      <body ng-app="starter">
          <ion-header-bar class="bar-stable">
    <h1 class="title">Download file from url</h1>
          <ion-content ng-controller="DownloadController">
           <button class="button button-full button-positive" ng-click="Download()">Download it!</button>
             <span>Download progress : {{downloadProgress}} %</span>
           <img ng-src="{{mywallpaper}}" width="100%" />

    Don’t forget to add ngCordova.js to app folder

    Put Ngcordova.js To Js Folder Create Download File Button On Ionic Framework

  4. Edit app.js (js/app.js) and copy the following script
    angular.module('starter', ['ionic','ngCordova'])
    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        if(window.cordova && window.cordova.plugins.Keyboard) {
        if(window.StatusBar) {
    .controller('DownloadController', function($scope, $cordovaFileTransfer) {
      $scope.Download = function () {
                 var url = "http://3.bp.blogspot.com/-XchURXRz-5c/U5ApPOrPM9I/AAAAAAAADoo/YZEj4qeSlqo/s1600/Final-Fantasy-XV-Noctis-Red-Eyes.png";
                 var filename = url.split("/").pop();
                 var targetPath = cordova.file.externalRootDirectory + 'Pictures/' + filename;
                  $cordovaFileTransfer.download(url, targetPath, {}, true).then(function (result) {
                        $scope.hasil = 'Save file on '+targetPath+' success!';
                  }, function (error) {
                        $scope.hasil = 'Error Download file';
                  }, function (progress) {
                        $scope.downloadProgress = (progress.loaded / progress.total) * 100;

    Explanation :

    Don’t forget to add “ngCordova” syntax on angular module and “$cordovaFileTransfer” at controller to run the transfer file function on cordova.

    Before we start the download process, the app must ensure that android was ready to make the download process by adding the following script

    ionic.Platform.ready(function(){ ... }

    $cordovaFileTransfer has the following syntax

    $cordovaFileTransfer.download(url, targetPath, {}, true)

    – Url : file’s url to be downloaded

    – targetPath : the storage location of the downloaded file. In the experiment, using the syntax

    cordova.file.externalRootDirectory which means the files will be stored on the android storage (file:///storage/…….)

    – {} : an options (I never added option when downloading files)

    – true : trustAllHosts (If set to true – accepts all security certificates)

    After the download button press, the application will run the download process and when the download process is running, a progress bar will show the percentage of results that are downloaded on the following function

    function (progress) {
    $scope.downloadProgress = (progress.loaded / progress.total) * 100;

If you have finished adding all the above script, run the application on an emulator or build apk

ionic emulate android


ionic platform add android
ionic build android

If you try on the browser, downloaded files will not work and result in error “ReferenceError: cordova is not defined … ” ,because cordova can’t be run on computer’s browser

ReferenceError: Cordova Is Not Defined How To Resolve

Finish, you’ve managed to create a simple android application to download images

Easy Way Create Download File Button With Ionic Framework

I have not succeeded to create the stop button to stop the application when downloading files. If anyone could please help me :). Read my other ionic framework article here

Thus article about Tutorial How to Create Download File From Url On Ionic Framework, hope useful

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.


 Add your comment
  1. Alouane Nour-Eddine

    I tried, but I have this issue: FileTransferError.FILE_NOT_FOUND_ERR Any help?

  2. Hi,
    thanks for the tutorial. i tried it it downloaded successfully but on my view with a different controller i passed the $rootScope.targetfile and i output it i can see the address as


    but i in the image tag the i got a blank screen i.e the image is not displaying please help

  3. I download success, thanks, I want to creat a slide, in that, can swipe up or down for close showing image, can you help me ?

  4. error file downloading.. m getting this error

  5. Hi,
    i tried it it downloaded successfully but It is on working for video .Can you please help me how to download video ?
    this code is just for download images.
    Thanks in advance

  6. Hi,

    can I download this project anywhere?


Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.