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

Issue

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>

Solution

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 By – newbie28

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.