Typescript version of the angular jquery-fileupload example?

Question

I'm trying to use the JQuery-FileUpload plugin from an AngularJS 1.6.2 application that is in addition also using Typescript. I'm using JQuery 1.12.4 to be able to use the plugin.

The JQuery-FileUpload plugin page includes a Javascript AngularJS example app.js and therein the DemoFileUploadController snippet which I can't find how to make it work using Typescript:

.controller('DemoFileUploadController', [
    '$scope', '$http', '$filter', '$window',
    function ($scope, $http) {
        $scope.options = {
            url: url
        };
        if (!isOnGitHub) {
            $scope.loadingFiles = true;
            $http.get(url)
                .then(
                    function (response) {
                        $scope.loadingFiles = false;
                        $scope.queue = response.data.files || [];
                    },
                    function () {
                        $scope.loadingFiles = false;
                    }
                );
        }
    }
])

My Typescript attempt is:

interface IUploadTSCtrlScope extends ng.IScope {
    options: any;
    queue: any;
    loadingFiles: boolean;

    // functions
    fileupload: any;
}

class UploadTSCtrl {
    constructor(private $scope:IUploadTSCtrlScope, private remoteServices: RemoteServices) {
        $scope.fileupload = function (url: string) {
            $scope.options = {
                url: url
            };
            $scope.loadingFiles = true;
            remoteServices.uploadFile(url)
                .then(
                    function (response: any) {
                        $scope.loadingFiles = false;
                        $scope.queue = response.data.files || [];
                    },
                    function () {
                        $scope.loadingFiles = false;
                    }
                );
        };
    }
}

but I always get the following error in the browser console:

  TypeError: Object doesn't support property or method 'fileupload'
     at Anonymous function (http://localhost:9000/assets/js/jquery.fileupload-angular.js:282:17)
     at invoke (http://localhost:9000/assets/js/angular.js:4862:9)
     at $controllerInit (http://localhost:9000/assets/js/angular.js:10717:11)
     at nodeLinkFn (http://localhost:9000/assets/js/angular.js:9594:13)
     at compositeLinkFn (http://localhost:9000/assets/js/angular.js:8903:13)
     at compositeLinkFn (http://localhost:9000/assets/js/angular.js:8906:13)
     at compositeLinkFn (http://localhost:9000/assets/js/angular.js:8906:13)
     at publicLinkFn (http://localhost:9000/assets/js/angular.js:8768:30)
     at link (http://localhost:9000/assets/js/angular-route.js:1222:7)
     at Anonymous function (http://localhost:9000/assets/js/angular.js:1290:11) <div class="ng-scope" ng-view="">

Answer 1

This was actually caused not because of Typescript but by using a newer version of AngularJS namely 1.6.2, and the OP issue goes away switching over to AngularJS version 1.3.15.