1

ギャラリーを持つ 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>

上記のように、2 つのモーダルがあります。Add Coverリンクをクリックすると#profile-changeモーダルが開きます。このモーダルにはボタンがありますChange。このボタンをクリックすると、2 番目のモーダル、つまり#album-add-coverモーダルが開きます。2番目のモーダルで、アップロードする画像を選択できます。写真を選択するとすぐに、最初のモーダルでフォームを送信するときにギャラリーのカバー写真を更新できるように、2 番目のモーダルで選択した値で最初のモーダルにリダイレクトする必要があります。

これは私が書いたスクリプトです：

 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();
});

上記のスクリプトは、選択したファイルを最初のモーダルに表示していますが、写真を保存すると次のエラーが表示されます。

Paperclip::AdapterRegistry::GalleriesController#update の NoHandlerError

最初のモーダルをロードせずにプロフィール写真を更新しています。誰でも私を助けることができますか？前もって感謝します。

4

0 に答える 0