Modifying the appearance of file upload buttons in ruby on rails or CSS

Question

The title says it all. How do you go about doing this? For example, editing the width of a file upload button results in this: https://i.sstatic.net/kNkC9.png For comparison, here's an ordinary file upload button: https://i.sstatic.net/ZrDiW.png

The red rectangle represents the area the button normally takes up. In addition, when you hover your cursor over that spot (except for where the red and blue rectangles overlap), your cursor will transform into a hand icon, indicating that something will happen when you click that area. However, nothing happens.

The blue rectangle represents what portion of the screen you can click (which is mostly invisible, and much smaller than usual) to make the file upload form appear.

Trying to edit the file upload button's height yields similar results, only vertically instead of horizontally.

For the sake of explaining what my goal is: I'd like to overly a transparent or invisible file upload button on top of user avatars on my website. So far I've pulled off the easy parts, making the file upload button transparent and overlaying it on top of a user's avatar, but I haven't figured out how to edit the usable dimensions of the file upload button. For a working example of this, if you have a facebook profile, go to your profile and hover your mouse over your avatar. The words "Update Profile Picture" will appear and you can click them to edit your avatar directly from your profile instead of having to go to a separate settings page.

This is not RubyOnRails related.

aBadAssCowboy
– aBadAssCowboy

2016-07-23 08:48:49 +00:00
Commented Jul 23, 2016 at 8:48 — aBadAssCowboy
– aBadAssCowboy, Commented Jul 23, 2016 at 8:48

Community · Accepted Answer · 2017-05-23 12:32:36Z

3

You can't style the file upload buttons, they are native to the browser and rendered differently in different browsers. All those styles file upload buttons are not actual file upload buttons but are simulating the file upload button's behaviour.

There are different approaches to this using CSS and Javascript. Most of them involve hiding the native button and placing a custom button on top it using position: absolute and opacity CSS properties and simulating the click on native button when clicked on the custom button.

As there are quite some solutions on the web to this, I will refer you to those instead of posting a solution here.

See below:

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Jul 23, 2016 at 8:56

aBadAssCowboy

2,5402 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Display Over a year ago

Thank you very much! All three of those solutions halfway work for me. However, now that I can edit the size and shape of the button using HTML and CSS, I no longer know how to associate the button with user avatars. Right now, that association is made through ruby using <%= f.file_field :avatar %>, but in HTML, it's <input type="file" class="upload" /> How do I recreate the association between this button and user avatars using HTML?

Display Over a year ago

Nevermind, I got it to work by wrapping some HTML around that one line of ruby. Thanks again!

aBadAssCowboy Over a year ago

Your file's input tag generated by <%= f.file_field :avatar %> will have a name attribute which determines how the parameters are submitted. For example: <input type="file" class="upload" name="user[avatar]" />. If you make sure you add same name attribute and value to your custom HTML file input tag, it will keep your association. If it doesn't have the name attribute generated, there is something wrong with your form generation logic.

avr-girl · Accepted Answer · 2020-06-18 20:16:36Z

0

I did it with an after element and an icon from FontAwesome

# your-page.html.erb

<div>
    <label class="button-image">
      <%= f.file_field :attachment, value: "", class: "active-storage-button" %>
    </label>
</div>

# app/assets/stylesheets/your-page.scss

.button-image:hover::after {
    content: "\f196";
    font: normal normal normal 100px/1 FontAwesome;
    color: #778899;
    padding: 10%;
    right: 10%;
    position: relative;
}

.active-storage-button{
    display: none;
}


# for hover effect
.button-image:hover::after {
    color: #5a5a5a;
    cursor: pointer;
}

answered Jun 18, 2020 at 20:16

avr-girl

5671 gold badge7 silver badges22 bronze badges

Collectives™ on Stack Overflow

Modifying the appearance of file upload buttons in ruby on rails or CSS

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related