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

Grayling

When do you initialize FileTransfer-object first? I read some issues that even if deviceready is fired some plugins might not be present yet. Otherwise try to add file-plugin as well as it states here: #19544852 – Incalculable

@Incalculable I am not too sure what you mean by initializing FileTransfer object. Can you point me to where should I check this? – Grayling

Forget this I do not think that's the problem because of your error-message. Did you try it again after installing file-plugin? – Incalculable

It was by default installed with file-transfer plugin – Grayling

So output of file-object does not throw an error and is defined? – Incalculable

Where should I define it? Sorry I am very new to angular, so can you please point me to how to check it. – Grayling

are you accessing this function from a mobile device when you receive this error? because ionic isn't going to make a FileTransfer object available to a standard browser.... – Silvio

@Silvio I am on browser. If that is the case, then what should be used for filetransfer? – Grayling

@Silvio Also, do you have idea what should be the file path in upload function above? – Grayling

actually, I'm reading the documentation on this plugin.... can you post a snippet of the code in AppController.js? – Silvio

@Silvio Please see Edit2 – Grayling

is that code different? you stated that your error was with var fileTransfer = new FileTransfer(); fileTransfer.upload("server url", "file path", options).then(function(result)..., and the error says FileTransfer is not defined AppController.js but I don't see this anywhere in the link you provided for that file. – Silvio

Sorry about that. I was playing around with it. Updated in Edit2 link. – Grayling

Answer 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.

Incalculable

As I am using Ionic, will it not take care of deviceready? Please see Edit1. – Grayling

Under the hood it does or it should do but nevertheless you can always attach deviceready-listener. – Incalculable

I use ionic too and use to install plugins following command "ionic plugin add org.cordova..." to include it into platform-folder(android, ios). – Incalculable

Answer 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.

Ubald