Hi, I have been looking for a way to enable downloads in my project but can’t seem to succeed.
I have installed:
cordova plugin add org.apache.cordova.file
cordova plugin add org.apache.cordova.file-transfer
This is my view
<!DOCTYPE html>
<html ng-app="music">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ng-cordova-mocks.js"></script>
<script src="lib/ng-cordova.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<style>
ul, ol {
list-style-type: none;
}
</style>
</head>
<body ng-controller="MainCtrl">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-title>
</ion-nav-title>
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-tabs class="tabs-positive tabs-icon-only">
<ion-tab title="Home" icon-on="ion-ios7-home" icon-off="ion-ios7-home-outline">
<div class="bar bar-subheader">
<h1 class="title positive"><i style="font-size:2em" class="ion-ios7-home"></i></h1>
</div>
<ion-content padding="true" has-bouncing="true">
<div class="list card">
<div class="item item-avatar">
<img src="avatar.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
<div class="item item-body">
<img src="cover.jpg">
</div>
<a class="item item-icon-left assertive" ng-click="download()" href="#">
<i class="icon ion-ios7-filing"></i>
Download
</a>
</div>
</ion-content>
</ion-tab>
<ion-tab title="About" icon-on="ion-ios7-search-strong" icon-off="ion-ios7-search">
<div class="bar bar-subheader">
<h1 class="title positive"><i style="font-size:2em" class="ion-ios7-search-strong"></i></h1>
</div>
<ion-content padding="true" has-bouncing="true">
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search">
</label>
</div>
<div class="list card">
<div class="item item-avatar">
<img src="avatar.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
<div class="item item-body">
<img src="cover.jpg">
</div>
<a class="item item-icon-left assertive" href="#">
<i class="icon ion-ios7-filing"></i>
Download
</a>
</div>
</ion-content>
</ion-tab>
<ion-tab title="Settings" icon-on="ion-ios7-star" icon-off="ion-ios7-star-outline">
<div class="bar bar-subheader">
<h1 class="title positive"><i style="font-size:2em" class="ion-ios7-star"></i></h1>
</div>
<ion-content padding="true" has-bouncing="true">
<div class="list card">
<div class="item item-avatar">
<img src="avatar.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
<div class="item item-body">
<img src="cover.jpg">
</div>
<a class="item item-icon-left assertive" href="#">
<i class="icon ion-ios7-filing"></i>
Download
</a>
</div>
</ion-content>
</ion-tab>
</ion-tabs>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-positive">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-href="#/home"><i class="icon ion-home"> Home</i></ion-item>
</ion-list>
<ion-list>
<ion-item ng-href="#/search"><i class="icon ion-search"> Search</i></ion-item>
</ion-list>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
and my app.js
angular.module('music', ['ionic', 'ngCordova'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// Set the statusbar to use the default style, tweak this to
// remove the status bar on iOS or change it to use white instead of dark colors.
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider) {
$stateProvider
.state('index', {
url: '/',
templateUrl: '../views/home.html'
})
.state('list', {
url: '/list',
templateUrl: '../views/list.html'
})
.state('track', {
url: '/track',
templateUrl: '../views/track.html'
});
})
.config(function ($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
})
.controller("MainCtrl", function ($scope, $ionicNavBarDelegate, $ionicPlatform, $timeout, $cordovaFileTransfer, $ionicLoading) {
$scope.myGoBack = function () {
$ionicNavBarDelegate.back();
};
$ionicPlatform.ready(function() {
var url = "https://www.dropbox.com/s/zdpyu5mnod5pli7/Capture.PNG";
var targetPath = '/' + "testImage.png";
var trustHosts = true
var options = {};
$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
.then(function(result) {
condole.log(targetPath + result)
}, function(err) {
condole.log(err)
}, function (progress) {
$timeout(function () {
$scope.downloadProgress = (progress.loaded / progress.total) * 100;
})
});
});
})
i get Uncaught ReferenceError: FileTransfer is not defined in my console. What could I have done wrong.
Thanks