nervgh / angular-file-upload

[ALMOST NOT MAINTAINED] Angular File Upload is a module for the AngularJS framework
MIT License
3.43k stars 1.13k forks source link

this.element.bind is not a function #774

Open Nokel81 opened 7 years ago

Nokel81 commented 7 years ago

I have injected the module with browserify (if that matters) and my html is the following:

<input type="file" nv-file-select="" uploader="uploader" multiple class="btn btn-info">

and my controller has the following code:

var uploader = $scope.uploader = new FileUploader({
    url: AppSettings.apiUrl + "/message/attachments"
});

uploader.filters.push({
    name: 'syncFilter',
    fn: function(item /*{File|FileLikeObject}*/, options) {
        console.log('syncFilter');
        return this.queue.length < 10;
    }
});

uploader.filters.push({
    name: 'asyncFilter',
    fn: function(item /*{File|FileLikeObject}*/ , options, deferred) {
        console.log('asyncFilter');
        setTimeout(deferred.resolve, 1e3);
    }
});

uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/ , filter, options) {
    console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function(fileItem) {
    console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function(addedFileItems) {
    console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function(item) {
    console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function(fileItem, progress) {
    console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function(progress) {
    console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
    console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function(fileItem, response, status, headers) {
    console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function(fileItem, response, status, headers) {
    console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function(fileItem, response, status, headers) {
    console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function() {
    console.info('onCompleteAll');
};

console.info('uploader', uploader);

I get the following error in the console:

TypeError: this.element.bind is not a function
    at FileSelect.bind (app.js:18560)
    at FileSelect.FileDirective (app.js:18550)
    at new FileSelect (app.js:18660)
    at Object.link (app.js:19062)
    at app.js:28335
    at invokeLinkFn (app.js:37470)
    at nodeLinkFn (app.js:36859)
    at compositeLinkFn (app.js:36099)
    at compositeLinkFn (app.js:36102)
    at compositeLinkFn (app.js:36102) "<input type="file" nv-file-select="" uploader="uploader" multiple="" class="btn btn-info">"
alexand34 commented 7 years ago

Same issue here after upgrading from angular 1.2 to angular 1.6 scope.uploader.bind is not a function

scope.uploader.bind('afteraddingfile', function(event, item) {
            console.log('After adding a file', item.file);
          });