Angular 1.x typescript "TypeError: "Uploader" must be an instance of FileUploader"

Question

I have been trying to use the angular-file-upload here https://github.com/nervgh/angular-file-upload with typescript, and I keep getting this error:

TypeError: "Uploader" must be an instance of FileUploader I have to put a declare module and export namespace on the actual angular-file-upload to use modules(since that is how our framework was built) but I can't seem to go past this error

Don't worry about the module initialization or namespace names etc I should put placeholders there to not show our actual code.

Code below:

/// <reference types="angular" />
/// <reference types="angular-ui-bootstrap" />
/// <reference types="angular-file-upload"/>

var bootbox: any;

module MyModule.module {
    export class MyController  {
      
                

        static $inject = [
            "$scope",
            "$q",
            "$state",           
            "FileUploader"
               
        ];

        constructor(private scope: any,
            private promiseService: angular.IQService,
            private stateService: angular.ui.IStateService,          
            private uploader: angular.file.upload.FileUploader
            )                      
        {

            this.uploader.url = "upload.php";

            this.scope.uploader = this.uploader
}

(function () {
"use strict";
angular.module("myApp").controller("app.mymodule.controller", Namespace.MyApp.MyController);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<input type="file" nv-file-select uploader="vm.uploader" /><br />

<ul>
  <li ng-repeat="item in uploader.queue">
    Name: <span ng-bind="item.file.name"></span><br />
    <button ng-click="item.upload()">upload</button>
  </li>
</ul>

knownasilya · Accepted Answer · 2017-10-19 19:53:27Z

0

Try instantiating the FileUploader with new angular.file.upload.FileUploader()

edited Oct 19, 2017 at 19:53

knownasilya

6,1614 gold badges41 silver badges59 bronze badges

answered Oct 19, 2017 at 19:13

wap300

2,7903 gold badges19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

newbie28 Over a year ago

on the private uploader under the constructor signature? if yes that does not work lol

wap300 Over a year ago

Whoops, my bad, did you try using new operator on the uploader in the class body? Or is the error happening on init?

newbie28 Over a year ago

yes I tried the one in the example but I guess since I am using example it is different, when I use the new I get an error that says Cannot use new with an expression whose type lacks a call or construct signature.

wap300 Over a year ago

And what is the value that this.uploader has?

newbie28 Over a year ago

it does seem to be the fileuploader that I am setting it to, which is exported from the library. I do see all the methods like uploadAll, isHtml5 etc when i do a "this.uploader."

|

newbie28 · Accepted Answer · 2017-10-20 16:52:05Z

0

I fixed my issue, I was not using the interfaces correctly. Here is the correct code:

constructor(private scope: any,
  private fileUploaderFactory: angular.file.upload.FileUploaderFactory) {


  this.scope.uploader = new fileUploaderFactory({
    url: 'upload.php'
  });
}

answered Oct 20, 2017 at 16:52

newbie28

14 bronze badges

Collectives™ on Stack Overflow

Angular 1.x typescript "TypeError: "Uploader" must be an instance of FileUploader"

2 Answers 2

12 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related