前提・実現したいこと
web版のツイッターのように、投稿一覧画面の一番上のフォームとサイドバーを押すと出てくるモーダルの方のフォームの両方を[写真選択]というボタンではなくアイコンにしたいです。
発生している問題・エラーメッセージ
railsでrefileを使用しています。
投稿の一覧ページでツイッターのように投稿一覧の一番上とサイドバーのボタンを押すとモーダルが出てきて投稿できるような仕様にしています。
両方とも写真選択をアイコンにすることはできるのですが、アイコンにするとモーダルの方では画像投稿できるのですが、投稿一覧の一番上のフォームで写真選択をしても画像が入らなくなってしまいます。
attachment_fieldをアイコンに装飾しなければ問題なく使えます。アイコンにすると片方しか使えなくなる原因がわかる方がいたら教えてほしいです。
該当のソースコード
<!-- モーダル --> <div class="modal fade mt-5" id="Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header py-0"> <div> <%= link_to user_path(current_user), class: "btn left-btn" do %> <%= attachment_image_tag current_user, :profile_image, size: "50x50", fallback: 'no_image.jpg', format: 'jpeg', class: "rounded-circle" %> <span><%= current_user.name %></span> <% end %> </div> <button type="button" class="close py-4" data-dismiss="modal" aria-label="閉じる"> <span aria-hidden="true">×</span> </button> </div> <%= form_with model: post, remote: true do |f| %> <div class="modal-body"> <%= render "layouts/errors", model: post %> <%= f.text_area :content, placeholder: "今何してる?", class: "textarea" %> </div> <div class="modal-footer"> <%= f.label :post_image, class: "image-camera" do %> <i class="fas fa-camera mr-3"></i> <%= f.attachment_field :post_image %> <% end %> <%= f.submit('投稿', class: "btn btn-outline-primary post-btn rounded-pill") %> </div> <% end %> </div> </div> </div> 一番上においてあるフォーム <div class="py-3 mb-4"> <%= form_with model: post, remote: true do |f| %> <%= render "layouts/errors", model: post %> <%= f.label :post_image, class: "image-camera" do %> <i class="fas fa-camera"></i> <%= f.attachment_field :post_image %> <% end %> <%= f.text_area :content, placeholder: "入力してください", class: 'content' %> <div class="text-right mt-3 pb-2"> <%= f.submit('投稿', class: "btn btn-outline-primary post-btn rounded-pill") %> </div> <% end %> </div>
試したこと
attachment_fieldをアイコンに装飾しなければ両方とも問題なく投稿できる。
テキストは問題なく投稿できる
補足情報(FW/ツールのバージョンなど)
Rails 5.2.4.4
あなたの回答
tips
プレビュー