1

Ok so Ive been trying to figure out how to style the file field for rails for hours and have found nothing. I would like to style my file field using css and js and so far I am not able to style it in rails. I have listed what I have so far down below.

form

  <div class="field uploader blue">
    <%= f.text_field :photo, class: "filename", readonly: "readonly" %>
    <%= f.file_field :photo %>
  </div>

Javascript

jQuery("input[type=file]").change(function(){$(this).parents(".uploader").find(".filename").val(jQuery(this).val());});
jQuery("input[type=file]").each(function(){
    if(jQuery(this).val()==""){jQuery(this).parents(".uploader").find(".filename").val("No file selected...");}
});

Works using html not rails

<div class="uploader blue">
  <input type="text" class="filename" readonly="readonly"/>
  <input type="button" name="file" class="button" value="Browse..."/>
  <input type="file" size="30"/>
</div>

Are there any helpers for the file field in rails or a way where I can split the upload & input button using a helper so i can get the code just like the html code?

coletrain
  • 2,809
  • 35
  • 43
  • Have you looked at the HTML that Rails produces? – varatis Oct 07 '12 at 16:22
  • @varatis yes its produces this``. I do not see a button tag that I can style individually. – coletrain Oct 07 '12 at 16:27
  • Does this page help? http://stackoverflow.com/questions/7037154/customising-the-look-of-f-file-field-in-rails – joelparkerhenderson Oct 07 '12 at 17:09
  • @joelparkerhenderson I checked that out before posting this and It didnt seem to solve me problem. I wanted to create a helper or find a way to split the file field int multiple parts such as field, button etc. – coletrain Oct 07 '12 at 17:54

0 Answers0