Question

我创建了具有图库的rails应用程序。现在我愿意有画廊封面照片。我想用模态更新封面照片。上传照片我正在使用回形针。

这是我的模特：

class Gallery < ActiveRecord::Base
   has_attached_file :cover_url, :styles => { :small => "108x76" }

  validates_attachment_content_type :cover_url, :content_type => ['image/jpeg', 'image/jpg', 'image/png']
end

这是我的控制者：

def update
puts params
respond_to do |format|
  if @gallery.update(gallery_params)
    format.html { redirect_to galleries_galleryhome_path(id: params[:id]), notice: 'Gallery was successfully updated.' }
    format.json { render :show, status: :ok, location: @gallery }
  else
    format.html { render :edit }
    format.json { render json: @gallery.errors, status: :unprocessable_entity }
  end
end
end

def gallery_params
  params.require(:gallery).permit(:name, :shoot_date, :release_date, :expiration_date, :archive,:gallery_layout_id, :contact_id,:status, :cover_url).merge(brand_id: current_brand.id,user_id: current_user.id)
end

这是我的观点：

<div class="cover-photo default  pull-left">
          <% if @find_gallery.cover_url.present?%>
          <%=image_tag @find_gallery.cover_url.url(:small)%>
          <%end%>
        </div>
        <div class="icon-cta" data-toggle="modal" data-target="cover_modal">

          <% if @find_gallery.cover_url.present? %>
          <%=link_to "Add<br>Cover".html_safe, "#profile-change" ,'data-toggle': "modal", class: "change-cover"%>

          <% else %>
          <%=link_to "Add<br>Cover".html_safe, "#album-title-popup" ,'data-toggle': "modal", class: "change-cover"%>
          <% end %>

        </div>


<!-- Album Cover Modal -->
<div class="modal fade" id="profile-change" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Album Cover</h4>
  </div>
  <%= form_for @gallery_cover,html: {multipart: true}, url: {controller: "galleries", action: "update", id: params[:id]}, method: :patch do |f| %>
  <%= label_tag "photo"%>
  <div class="modal-body">
    <%= f.hidden_field :cover_url,id: "hidden_cover_url"%>
    <div class="empty stack">
      <%= image_tag @find_gallery.cover_url.url,size: "355x237",id: "changecover"%>
    </div>
  </div>
  <div class="modal-footer pull-left">
    <button data-toggle="modal" data-target="#album-title-popup" data-dismiss="modal" type="button" class="btn btn-default"><span class="fa fa-trash set-stack"></span>Remove</button>
    <button data-toggle="modal" data-target="#album-add-cover" data-dismiss="modal" type="button" class="btn btn-default"><span class="fa fa-picture-o set-stack"></span>Change</button>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <%= f.submit "Save"%>
  </div>
  <%end%>
</div>
 </div>
</div>



<!-- Add Album Photo Modal -->
<div class="modal fade" id="album-add-cover" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Add Cover</h4>
  </div>
  <div class="modal-body">

    <%= form_for @gallery_cover,html: {id: "Cover-Upload"}, url: {controller: "galleries", action: "update", id: params[:id]}, method: :patch do |f| %>
    <ul class="source-links">
      <li class="js-cover-flow-upload">
        <span class="btn btn-file">
          <p>Upload From Computer</p>
          <%=f.file_field :cover_url, id: "Computer-Upload", onchange: "document.getElementById('hidden_cover_url').val = window.URL.createObjectURL(this.files[0])" %>
          <%= f.hidden_field :id, value: params[:id]%>
        </span>
        <span class="fa  fa-caret-right pull-right"></span>
      </li>
      <li class="js-cover-flow-random">
        <span class="btn btn-file">
          <p>Choose From Gallery</p>
        </span>
        <span class="fa  fa-caret-right pull-right"></span>
      </li>
    </ul>
    <%= image_tag "image",id: "sample"%>
    <%= f.submit "Save", style: "display:none;",id: "Pc"%>
    <% end %>
  </div>
</div>

如上所示，有两种模态。点击Add Cover链接#profile-change模式将会打开。此模式具有按钮Change。点击此按钮，它将打开第二个模态，即#album-add-cover模态。在第二个模态我可以选择要上传的图像。一旦我选择了照片，我就应该重定向到第一个模态，并在第二个模态上选择值，以便我可以在第一个模态下提交表格时更新图库的封面照片。

这是我写的脚本：

 function updatecover(input){
  if (input.files) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function (e) {
  $("#changecover").attr('src', e.target.result);
    }
  }
}
$("#Computer-Upload").change(function(){
  updatecover(this);
  alert($(this).val());
  $("#changecover").attr("src",$(this).val());
  // $("#Pc").click();
});

上面的脚本在第一个模态上显示所选文件但是在保存照片时它给出了错误：

Paperleries中的Paperclip :: AdapterRegistry :: NoHandlerError＃update

它正在更新配置文件pic而不加载第一个模态。请任何人可以帮助我？提前谢谢。

使用模态上传配置文件pic

0 个答案: