Barış Ürüm Barış Ürüm - 1 year ago 70
AngularJS Question

ng-file-upload file browser not showing with datatables generated element

I'm generating a dynamic content with datatables and one of the table cells has a button. This button should trigger the file upload function of the page's controller. But nothing happens when I click it (even TEST is not logged the function doesn't fire).

Here is the file upload handler function:

$scope.uploadFile = function (file) {
console.log('TEST'); //No TEST is logged to console at this point
url: '/file-upload',
data: {file: file}
}).then(function (resp) {
console.log('Success ' + + 'uploaded. Response: ' +;
}, function (resp) {
console.log('Error status: ' + resp.status);
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded /;
console.log('progress: ' + progressPercentage + '% ' +;

And html is dynamically generated with datatables like this:

<button class="btn button btn-default button-table" ngf-select="uploadFile($file)"><i class="fa fa-plus-circle"></i></button>

I guess this is an issue with the click event not triggering file browser dynamically and I don't know how to force trigger the file selection event with this plugin.

Answer Source

I solved the issue by creating a static hidden button:

<button id="button-upload-real" style="display: none" ngf-select="uploadFile($file)"></button>

and triggering a click event from the buttons on dynamically generated datatables cells. Works like swiss clock now.