6

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

Sam
  • 3,628
  • 10
  • 36
  • 66
  • 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: http://stackoverflow.com/questions/19544352/phonegap-new-filetransfer-is-not-defined – Blauharley Mar 08 '15 at 18:40
  • @Blauharley I am not too sure what you mean by initializing FileTransfer object. Can you point me to where should I check this? – Sam Mar 08 '15 at 18:51
  • Forget this I do not think that's the problem because of your error-message. Did you try it again after installing file-plugin? – Blauharley Mar 08 '15 at 18:54
  • It was by default installed with file-transfer plugin – Sam Mar 08 '15 at 18:57
  • So output of file-object does not throw an error and is defined? – Blauharley Mar 08 '15 at 19:15
  • Where should I define it? Sorry I am very new to angular, so can you please point me to how to check it. – Sam Mar 08 '15 at 19:24
  • 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.... – Claies Mar 08 '15 at 20:11
  • @Claies I am on browser. If that is the case, then what should be used for filetransfer? – Sam Mar 08 '15 at 20:15
  • @Claies Also, do you have idea what should be the file path in upload function above? – Sam Mar 08 '15 at 20:20
  • actually, I'm reading the documentation on this plugin.... can you post a snippet of the code in `AppController.js`? – Claies Mar 08 '15 at 20:21
  • @Claies Please see Edit2 – Sam Mar 08 '15 at 20:33
  • 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. – Claies Mar 08 '15 at 20:47
  • Sorry about that. I was playing around with it. Updated in Edit2 link. – Sam Mar 08 '15 at 20:54

2 Answers2

4

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.

Blauharley
  • 3,936
  • 6
  • 25
  • 45
  • As I am using Ionic, will it not take care of deviceready? Please see Edit1. – Sam Mar 08 '15 at 19:52
  • Under the hood it does or it should do but nevertheless you can always attach deviceready-listener. – Blauharley Mar 08 '15 at 19:55
  • I use ionic too and use to install plugins following command "ionic plugin add org.cordova..." to include it into platform-folder(android, ios). – Blauharley Mar 08 '15 at 19:58
1

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.

Niraj Kumar Chauhan
  • 521
  • 6
  • 10