Clever Geek Handbook

Storing an input file inside a Semantic-UI button

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

I have this button which looks ok but the input file is never called.

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


source to share


2 answers


I would recommend adding a label pointing to your hidden input. Shortcuts trigger typing on click. 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>
+4


source


I found a solution:

Put your file

input outside div

, add an id to the div, then add this JavaScript:



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

Here is a JSFiddle

+3


source






More articles:


All Articles