1

I'm currently working on a Rails 7 application using Tailwindcss. What i'm trying to achieve is to style a file_field form field using a TailwindUI component. This is the code for the field component in tailwind: https://play.tailwindcss.com/B87tupVjOn

What I did is to replace the HTML input field

<input id="file-upload" name="file-upload" type="file" class="sr-only">

with the Rails form field and add a class hidden to it.

f.file_field :photo, multiple: false, class: "hidden"

This is the outcome it gave me: enter image description here

However, using the hidden class as suggested in this SO post doesn't work. I think is maybe because the browser recognizes the hidden class in an input file and doesn't allow the upload operation.

The area around the dashed border should be clickable but doesn't work either. When I inspect the input element, it is not selectable from the Upload a file section. Something else I tried is using opacity 0 to hide it but it doesn't work.

How can I replace <input id="file-upload" name="file-upload" type="file" class="sr-only"> with the Rails f.file_field so I'm able to use the upload a file component.

Steven Aguilar
  • 3,107
  • 5
  • 39
  • 89

1 Answers1

1

You are not clicking the input, you're clicking the label which doesn't match the input id anymore. Just replace <label> tag to match the input:

f.label :photo, "Upload a file", class: "label"
f.file_field :photo, multiple: false, class: "sr-only"

input is already hidden by sr-only class; visible only to screen readers.

Alex
  • 16,409
  • 6
  • 40
  • 56