customize file_field button ruby on rails

Question

I'm trying to get rid of the ugly button rails has as default for the file upload. i want to add a glyphicon

  <%= f.file_field :image_url, class:"glyphicon glyphicon-camera" %>

This didn't work and I have tried other things in different post i saw on this page, but they don't attach the file.

Check this http://stackoverflow.com/questions/1944267/how-to-change-the-button-text-of-input-type-file — Pavan, Apr 19 '16 at 05:17
I saw this answer before but where exactly is my :image_url, I tried to put it in different places and the picture didn't get uploaded @Pavan — Patricio Vargas, Apr 19 '16 at 05:22

score 10 · Accepted Answer · answered Apr 19 '16 at 07:37

10

You can do it using css.

HTML:

<div class="image-upload">
   <label for="file-input">
     <span class="glyphicon glyphicon-camera"></span>
   </label>

   <%= f.file_field :image_url, id:"file-input" %>
</div>

CSS:

.image-upload > input
{
   display: none;
}
.image-upload > label{
  cursor:pointer;
}

You can find the working example here

answered Apr 19 '16 at 07:37

usmanali

2,028
2
27
38

This replaces everything by an icon (good) bad has no ui feedback (bad) so the user can't see a file is already attached for upload. In my opinion, for this to be a valid solution it should include a way to trigger the upload automatically (so no extra feedback is needed) or show which file is ready to be uploaded – estani Sep 18 '19 at 08:27
Just find out that adding `onchange: "this.form.submit()"` to `file_field` will auto-upload on selection. – estani Sep 18 '19 at 09:05
@estani the (bad) part can be taken care of with some JS which isn't included in the answer because the OP didn't ask for it – usmanali Sep 18 '19 at 15:26
1

sure, I just think is better to know what the limitations of such a solution are beforehand. The OP does want to have something that works, so he/she will need to find a solution, so I think it's just best to say it. My 2c. – estani Sep 19 '19 at 17:31
no problem, I just clarified my stance, I don't mind suggestions. Cheers! – usmanali Sep 24 '19 at 11:35
@estani , this example provides a more advanced file selection: [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) – askrynnikov Oct 03 '21 at 09:14

score 3 · Answer 2 · answered Apr 19 '16 at 05:59

As suggested here Bootstrap Filestyle, you can use Bootstrap's Filestyle to style your file upload buttons.

Step-1: Add this to your layout application.html.erb

I have added the Bootstrap Filestyle library from CDN. You should make sure that you have both JQuery and Boostrap loaded.

<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.filestyle/1.1.0/js/bootstrap-filestyle.min.js"> </script>

Step-2: Add this to the corresponding js file:

$(":file").filestyle({input: false});

Step-3: Then your image_url file field could look like as follows:

<%= f.file_field :image_url,class: "filestyle", "data-input" => false %>

score 2 · Answer 3 · answered Apr 19 '16 at 06:25

you can use also:-

   add file field and hide this field :-
     <%= f.file_field :image_url ,:onchange=>"loadFile(event)",id: "upload-it", class: "hide_input"%>

add one div with class:"glyphicon glyphicon-camera" :-
 <div class="glyphicon glyphicon-camera" id="image-output",:onclick="upload_it(event)"></div>

use script:-
<script>
  var loadFile = function(event) {
    var output = document.getElementById('image-output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
  function upload_it(){
    $("#upload-it").click();
  };
</script>

customize file_field button ruby on rails

3 Answers3

Linked