Custom "Choose file" button not working

[tab00]

When using a custom template for the "Choose file" button by creating a template as in the ReadMe example:

<template name="mySelectFileBtn">
  <button type="button" class="js-af-select-file">Upload file</button>
</template>

and setting selectFileBtnTemplate: 'mySelectFileBtn' in the schema, the button renders correctly. However a file dialog does not appear when clicked.

When I inspected the original "Choose file" HTML code, there is an input tag of type "file" in the button. So I tried to do the same in the custom template:

<template name="mySelectFileBtn">
  <button type="button" class="js-af-select-file">Upload file
<input type="file" class="js-file">
</button>
</template>

This opens the file dialog when clicked, however after choosing a file there is no result, nor is there any error message.

I should add that element input should not be nested inside element button, as that is invalid HTML.

Please fix the problem(s).

[isbjorn]

Try this:
#85 (comment)

[diegonc]

There's one more bit of code that's missing from the custom upload button example and it is activating the jQuery file upload plugin. In addition to what @isbjorn suggest, I had to add that bit:

Template.mySelectFileBtn.onRendered(function () {
  this.$(".js-file").fileupload();
});

The built-in button has that code here, which won't be executed with a custom template.