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="">

[Mixing angular and jQuery is mostly a bad idea](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background). *Don't even use jQuery. Don't even include it. It will hold you back. And when you come to a problem that you think you know how to solve in jQuery already, before you reach for the $, try to think about how to do it within the confines the AngularJS. If you don't know, ask! 19 times out of 20, the best way to do it doesn't need jQuery and to try to solve it with jQuery results in more work for you.* — Liam, Mar 16 '17 at 10:40

score 0 · Accepted Answer · answered Mar 16 '17 at 10:35

0

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.

answered Mar 16 '17 at 10:35

SkyWalker

13,729
18
91
187

Typescript version of the angular jquery-fileupload example?

1 Answers1