CODEWITHSUNDEEP
cssruby-on-railsformsruby-on-rails-4filefield
Thibaud Clement
Thibaud Clement

Reputation: 6897

Rails 4: how to apply custom CSS to Rails form file field

I have a Rails 4 app, that uses Rails' default form (I am NOT using Simple Form).

One of my forms allows users to upload an image (thanks to Paperclip):

<td>
  <%= f.file_field :image, value: "Choose a file" %>
</td>

I would like to style the "choose a file button" with custom CSS.

I tried to apply an id to my td, as follows:

<td id="upload_image">
  <%= f.file_field :image, value: "Choose a file" %>
</td>

and then I tried to style it with the following CSS code:

#upload_image input {
    background-color: #2c3e50;
    background-image: none;
    border: none;
    color: #FFF;
    padding: 5px 10px 5px 10px;
}

But this resulted in styling the td itself:

enter image description here

And I still get this ugly button with the default style.

—————

UPDATE: if styling the button itself is not possible, I would like to at least put the "no file chosen" label ("aucun fichier choisi" in French) under the button, since at the moment it is taking a lot of horizontal room on my page).

Is that even possible?

—————

How can I make this work?

Upvotes: 3

Views: 10300

Answers (4)

Kᴏɴsᴛᴀɴᴛɪɴ Sʜɪʟᴏᴠ
Kᴏɴsᴛᴀɴᴛɪɴ Sʜɪʟᴏᴠ

Reputation: 13056

Upload Photo button with Remove button:

.d-flex.flex-row
  - if @user.image.attached?
    = link_to image_tag(@user.image.variant(resize_to_limit: [100, 100])), rails_blob_path(@user.image, disposition: 'attachment'), alt: 'user'
  - else
    = image_tag 'profile.png'
  .ms-4
    .d-flex.flex-row
      label.btn.btn-primary
        | Upload Photo
        = image_tag 'Icon-Color.svg', alt: 'icon', class: 'ps-3'
        .d-none
          = f.file_field :image
      .ps-3
        - if @user.image.attached?
          = link_to registration_path({ user: { id: @user.id }, purge: true }), method: :put, local: true, class: 'btn btn-primary' do
            = image_tag 'Trash.svg', alt: 'icon'
    .mt-1.small Up to 1 MB (300x300 px)

Result:

enter image description here

Upvotes: 0

ThorstenC
ThorstenC

Reputation: 1304

This is my solution: just wrap a form field in a label and hide it. No javascript. 

<label class="btn btn-default btn-change-avatar">
    Upload new image
    <span style="display:none;">
      <%= form.file_field :avatar, id: "fileUploader"%>
    </span>
  </label>

Upvotes: 8

alex1sz
alex1sz

Reputation: 340

This works: 

<%= f.file_field :source, :class => "ui pink button" %>

As does: 

<%= f.file_field :source, class: "ui purple button" %>

You can apply styling this way. But again this, the clickable part is still going to be the default grey and say "Choose File". Aside from that, keep in mind the HTML file field is one of the least customizable up to you how much effort you want to expend trying to.

Upvotes: 2

Alexandre Voyer
Alexandre Voyer

Reputation: 819

why not had a div next to the file input.... and some basic javascript

example: 

<td id="upload_image">
  <%= f.file_field :image, value: "Choose a file" %>
  <div>Aucun fichier choisi</div>
</td>

javascript would be as follow (using jQuery):

$("#upload_image").on("change", "input", function(){
  if $(this).val() == ''
    $(this).closest("td").find("div").slideDown();
  else
    $(this).closest("td").find("div").slideUp(); 
});

There might be a few tweaks to do but that should get you started.

Bonne chance!

Upvotes: 0

Related Questions