angular-file-upload
angular-file-upload copied to clipboard
this.element.bind is not a function
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">"
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);
});