0

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.stack.imgur.com/kNkC9.png For comparison, here's an ordinary file upload button: https://i.stack.imgur.com/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.

Display
  • 89
  • 2
  • 9

2 Answers2

2

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:

Community
  • 1
  • 1
aBadAssCowboy
  • 2,440
  • 2
  • 23
  • 38
  • 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 `` How do I recreate the association between this button and user avatars using HTML? – Display Jul 23 '16 at 09:08
  • Nevermind, I got it to work by wrapping some HTML around that one line of ruby. Thanks again! – Display Jul 23 '16 at 09:14
  • 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: ``. 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. – aBadAssCowboy Jul 23 '16 at 09:15
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;
}
gl3yn
  • 301
  • 1
  • 3
  • 13