Sam Sam - 4 months ago 27
AngularJS Question

FileTransfer not defined - AngularJS

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

Answer

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.