3

I have a button that I want to perform the action generated by a file_field in Rails. Here is the erb code I have right now:

<label for='file-input'>
  <span class='btn btn-success' style='max-width: 300px;'>
    <img src=<%= image_path('button-upload-white.svg')%>></img> Upload from computer
  </span>
</label>

<%= f.file_field :files, multiple: true, name: 'attachment[file]', id: 'file-input'%>

I was following the pattern in this question with the associated CSS:

.file-input > input
{
 display: none;
}

.file-input > label{
  cursor: pointer;
}

but it does not seem to work and generates the following:

not desired

Desired output would be the same with the choose files input hidden or somehow connected to the button itself. Thanks, please let me know if I should post more code or I'm thinking about this in the wrong way.

AJwr
  • 506
  • 1
  • 4
  • 22

1 Answers1

-1

Try this to 'hide' the input element

Width and height are set to 0.1px instead of just 0px. Setting the property values to zero ends up throwing the element out of tab party in some browsers. And position: absolute guarantees the element does not interfere with the sibling elements. 

  .file-input > input {
        width: 0.1px;
        height: 0.1px;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }

Credit

Nicolas Aoki
  • 78
  • 1
  • 7
  • hmm I followed the exact HTML and CSS for both `label` and `input` as described in the post and it did not work. clicking on the label did not open any file input – AJwr Mar 15 '19 at 14:07
  • 1
    OK I looked up a similar solution to the link and found [this](https://coderwall.com/p/uer3ow/total-input-type-file-style-control-with-pure-css) which did what I want after some tweaking! the answers were very similar though – AJwr Mar 15 '19 at 14:14
  • NEVER position: absolute; an type="file". This will lead to horribly hard to find overflow/ top/ scrolling bugs – Tom Aug 29 '19 at 12:49