TypeError: "Uploader" must be an instance of FileUploader when using ControllerAs

[GoFightNguyen]

I began switching to using controllerAs, and now I am getting the TypeError: "Uploader" must be an instance of FileUploader.

The following worked:
Controller: $scope.uploader = new fileUploader({ url: "Document/uploadFile" });
Html: uploader="uploader"

But with controllerAs, these have changed to:
Controller: documentVm.uploader = new fileUploader({ url: "Document/uploadFile" });
Html: uploader="documentVm.uploader" or uploader="uploader"

[maxenz]

i don't know really if the problem comes with the controllerAs property, but in my case i was getting this error because uploader was undefined at the time of creating the template.

so my solution was to include an ng-if="uploader" to the divs where the uploader was involved.

for instance

`

`

[josencv]

I am using controllerAs: 'vm' and i dont't have any problems at all.

Controller:

angular
    .module('app.dashboard')
    .controller('DashboardController', DashboardController);

DashboardController.$inject = ['FileUploader'];
/* @ngInject */
function DashboardController(FileUploader) {
    var vm = this;
    var uploader = new FileUploader();
    vm.uploader = uploader;
}

You can even bind the uploader directly without problems:

var vm = this;
vm.uploader = new FileUploader();

You have to make sure that all references to the uploader in the html are 'documentVm.uploader'

[GoFightNguyen]

Thanks @josencv

Setting all references in html to be documentVm.uploader resolved the issue

[CJYate]

Please could you confirm what "setting all references" means?

There's only one reference in the HTML and it's in my input field:

  <input class="form-control ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" ng-model="model[options.key]" id="formly_1_upload_photo_8" name="formly_1_upload_photo_8" formly-custom-validation="" required="true" type="file" nv-file-select="userVm.fileUploader">

However... it must be noted, this input field is created by Formly... I'm not sure who the cuplrit is.

[josencv]

I need more information

Are you using "controllerAs: 'userVm'"?
Where do you instantiate the uplaoder?
How is your application structured?

[MoatazAbdAlmageed]

//use ng-if to make sure that vm.uploader already initialized

vm.uploader = new FileUploader( ...

// HTML will not render until FileUploader okay
vm.uploaderDone = true; // HTML will rendered