FileTransfer not defined - AngularJS

Question

I am trying to implement file upload in angularjs (in Ionic), but getting some issues. I read a doc following which I ran below commands, while being in project directory -

bower install ngCordova
cordova plugin add org.apache.cordova.file-transfer

Then, I added the required reference in index.html -

<!-- ngCordova script -->
<script type="text/javascript" src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script type="text/javascript" src="cordova.js"></script>

Then, I injected the service into my controller -

angular.module('myApp').controller('AppController', ['$scope', $cordovaFileTransfer', function ($scope, $cordovaFileTransfer) 

But, when I try to use it like this -

var fileTransfer = new FileTransfer();
fileTransfer.upload("server url", "file path", options).then(function(result)...

I get an error -

Uncaught ReferenceError: FileTransfer is not defined AppController.js:35     
angular.module.controller.$scope.uploadFile AppController.js:22 (anonymous function)
n.event.dispatch jquery-2.1.3.min.js:3 
n.event.add.r.handle jquery-2.1.3.min.js:3 

I am new to AngularJS and not sure what is going wrong here. Am I missing a reference or somethin here? Can anyone help me out with this?

Thanks in advance.

Edit1

Here is how Ionic is initialized -

.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }
    });
})

Edit2

AppController.js code here

Solution 1

I just speak for myself but there can be two(ionic: three) reasons why FileTransfer is undefined. And you do not have to define these objects(FileTransfer, File) on your own, they are defined as soon as you installed both-plugins:

1. Issue

   Good approach:

   document.addEventListener("deviceready", onDeviceReady, false);
   
   function onDeviceReady() {
      // as soon as this function is called FileTransfer "should" be defined
      console.log(FileTransfer);
   }
   

   bad approach:

   // calling FileTransfer before deviceready
   var f = new FileTransfer();
   ...
   document.addEventListener("deviceready", onDeviceReady, false);
   ...
   ...
   

2. Issue

   File-Plugin must be installed as well. After deviceready-function is called File-Object "should" be defined:

   document.addEventListener("deviceready", onDeviceReady, false);
   
   function onDeviceReady() {
      // as soon as this function is called File "should" be defined
      console.log(File);
   }
   

3. Issue(Ionic)

   When using ionic following command is required to include plugins into a created platform(android, ios, blackberry):

   ionic plugin add org.apache.cordova.file
   ionic plugin add org.apache.cordova.file-transfer
   

Sometimes Ionic has got difficulties to build your project properly, in my case either deviceready is not fired at all or building a platform failed on the first place due to compile-issues.

Solution 2

I also got trapped in this problem while using this plugin in my IONIC project.

Suggestion: Check the Android manifest file for File Read and Write permission.

Adding permission in the manifest can solve your problem.