圖片上傳預覽

class WebsiteFormBuilder < ActionView::Helpers::FormBuilder


  def enclosure_image
    file = objectify_options(options)[:object].file_url
    file.blank? ? 'logo-grey.png' : file
  end

end

.nested-fields
  .form-group
    .field.d-inline
      %label.newbtn
        = image_tag f.enclosure_image, :class => "blah"
        = f.file_field :file, :accept => "image/png, image/jpeg, image/gif", :class => "select-file", :onchange => "readURL(this);"
  -#
    = link_to_remove_association "刪除", f, :class => "btn btn-danger btn-sm d-inline"

$('.newbtn').bind("click" , function () {
  file = $(this).find(".select-file")[0]
  $(file).click();
});
 
function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      $(input).siblings('.blah').attr('src', e.target.result);
    };

    reader.readAsDataURL(input.files[0]);
  }
}

.select-file{
  display:none;
}

.newbtn{
  cursor: pointer;
}
.blah{
  max-width:100px;
  height:100px;
}

 = form_for @website, :builder => WebsiteFormBuilder, :url => { :controller => 'newsites', :action => 'update'} do |f|
      
        .form-group.row
          = f.label "Logo圖", :class => "col-sm-2 control-label"
          .col-sm-10
            = f.fields_for :enclosures do |enclosure|
              = render 'enclosure_fields', f: enclosure
            .links
              = link_to_add_association "添加logo", f, :enclosures, :class => "btn btn-info"