• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Android » Tutorial How to Create Download File From Url On Ionic Framework

Tutorial How to Create Download File From Url On Ionic Framework

By Sigit Prasetya Nugroho ∙ February 25, 2016 ∙ Android ∙ 17 Comments

Share : TwitterFacebookTelegramWhatsapp

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

Table of Contents

    • 0.1 What is ngCordova ?
    • 0.2 ngCordova Installation Guide
  • 1 How to Create Download File From Url On Ionic Framework
    • 1.1 Thus article about Tutorial How to Create Download File From Url On Ionic Framework, hope useful

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 :

Related Articles :

  • Easily Download and Install Pokemon Go on Android in Unregistered Country
  • How to Create Android Image Gallery with Ionic Framework and Web Services
  • Ionic Framework – Introduction and Installation Tutorial on Windows and Ubuntu
  1. You can install ngCordova through a bower or directly download the js file.

    bower install ngCordova

    or

    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)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <!DOCTYPE html>
    <html>
      <head>
        <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>
      </head>
      <body ng-app="starter">
     
        <ion-pane>
          <ion-header-bar class="bar-stable">
     
     
    <h1 class="title">Download file from url</h1>
     
     
          </ion-header-bar>
          <ion-content ng-controller="DownloadController">
           <button class="button button-full button-positive" ng-click="Download()">Download it!</button>
             <span>Download progress : {{downloadProgress}} %</span>
     
     
    <div>
           {{hasil}}
           <img ng-src="{{mywallpaper}}" width="100%" />
            </div>
     
     
          </ion-content>
        </ion-pane>
      </body>
    </html>

    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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    angular.module('starter', ['ionic','ngCordova'])
     
    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
          cordova.plugins.Keyboard.disableScroll(true);
        }
        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
      });
    })
     
    .controller('DownloadController', function($scope, $cordovaFileTransfer) {
     
      $scope.Download = function () {
          ionic.Platform.ready(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!';
                        $scope.mywallpaper=targetPath;
                  }, 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

or

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

Another Android Related Post :

  • Easily Download and Install Pokemon Go on Android in Unregistered Country
  • How to Create Android Image Gallery with Ionic Framework and Web Services
  • Ionic Framework – Introduction and Installation Tutorial on Windows and Ubuntu
  • Android Tutorial – Display Image To Android Gridview From Url Using Picasso
  • Android Tutorial – Step By Step Learning Android Sqlite Database for Beginner
  • Android Tutorial – Using AsyncTask for Android With Simple Example for Beginners

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Comments

  1. Avatar for Alouane Nour-EddineAlouane Nour-Eddine says

    April 5, 2016 at 2:53 pm

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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      April 7, 2016 at 6:07 am

      http://goo.gl/Nhnv6C
      hope resolve your problem 🙂

      Reply
  2. Avatar for AliyuAliyu says

    June 16, 2016 at 6:53 am

    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

    file:///mnt/sdcard/Android/data/app.simagazine.mainapp/files/SIMagissues/issue2/issue2/1.jpg

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

    Reply
  3. Avatar for Xuan HoaXuan Hoa says

    June 28, 2016 at 12:45 pm

    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 ?

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      June 29, 2016 at 3:59 am

      Hello Xuan Hoa,

      Sorry, I never try it 🙂

      Reply
  4. Avatar for anjalianjali says

    September 25, 2016 at 7:41 am

    error file downloading.. m getting this error

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      September 26, 2016 at 1:22 am

      what an error ? try using on your mobile phone.. do not use simulator. CMIIW 🙂

      Reply
  5. Avatar for WarishaWarisha says

    September 30, 2016 at 5:55 am

    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

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      October 3, 2016 at 6:10 am

      Yes this code just for download image. For video, i’ve never tried. 🙂

      Reply
  6. Avatar for JoJo says

    October 17, 2016 at 6:02 am

    Hi,

    can I download this project anywhere?

    Greets

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      October 19, 2016 at 4:23 am

      yes, you can

      Reply
  7. Avatar for MarianMarian says

    October 27, 2016 at 11:13 am

    This is a great article. This method olso works for downloading: .doc, .pdf

    Reply
  8. Avatar for Johnny OinJohnny Oin says

    December 5, 2016 at 3:29 pm

    To cancel file transfer you just need to store a reference of your FileTransfer object and call abort() on it.

    Reply
  9. Avatar for TrovalostTrovalost says

    December 29, 2016 at 6:44 pm

    Great and useful tutorial, thanks for posting 🙂

    Reply
  10. Avatar for ShreyasShreyas says

    September 7, 2017 at 1:17 pm

    Hi

    Thanks for the article. Will this work in iOS as well? Will we need to change the file’s target path?

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      September 7, 2017 at 1:54 pm

      hello shreyas,
      im so sory, I have never tried on iOS 🙂

      Reply
  11. Avatar for RokyRoky says

    August 31, 2018 at 6:37 pm

    Hello author.
    This is what i am getting. >>>>> Error Download file.
    Do i have to create this folder, wat all changes i do have to make regarding to the PATH URL and TARGET PATH.

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      September 3, 2018 at 6:20 am

      This article is no longer updated. sory 🙁

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com