Hiding an input file inside a button Semantic-UI

Question

Is there a way to make this work using Semantic-ui?

I have this button, which look OK, but the input file never gets called.

<div class="ui icon big button">
        <i class="cloud icon"></i>
        <input type="file" id="hidde-new-file" style="display: none">
 </div>

Answer 1

I found a solution :

Put your file input outside the div, add an ID to the div, then add this JavaScript :

$("#divUpload").on("click", function() {
   $('#hidde-new-file').click(); 
});

Here is the JSFiddle

Answer 2

I'd recommend adding a label pointing to your hidden input. Labels trigger their input when clicked. All native without JS.

<div>
  <label for="hidden-new-file" class="ui icon button">
    <i class="cloud icon"></i>
    Open File
  </label>
  <input type="file" id="hidden-new-file" style="display: none">
</div>