Barış Ürüm Barış Ürüm - 5 months ago 24
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) {
//DBG
console.log('TEST'); //No TEST is logged to console at this point
Upload.upload({
url: '/file-upload',
data: {file: file}
}).then(function (resp) {
console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
}, function (resp) {
console.log('Error status: ' + resp.status);
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
});
};


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

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.

Comments