スクールのカリキュラムで少しだけ知識を入れた程度の者です。
現在、写真投稿のフォームを作成しています。
そこで、写真投稿ボタンをlabelで覆って、関連付けたタグをクリックしたら、写真投稿のボタンを押した扱いにできる
機能を実装しようとしています。
カリキュラムの段階では以下のコードで実装が出来ており、アイコンをクリックしたら写真投稿が出来ました。
=form_for [@group, @message] do |f| =f.label :image, class: 'input-box__image' do =f.file_field :image, class: 'none' =icon('fas', 'image') ※fontawesomeを入れてあります。
今回は写真の複数投稿が出来るようにfields_forを使って実装をしたいと思い、以下のようにコードを組みました。
=form_with model:@item, url:items_path, local: true do |exh| .ex__image--upload--area#image-box =exh.fields_for :item_images do |img| =exh.label :item_images do .js-file_group{"data-index": "#{img.index}"} =img.file_field :item_images, class: 'js-file none' .ex__image--upload--string 写真を投稿する
6行目のfile_fieldにはCSSでdisplay:noneが適用されるnoneクラスをつけています。
このように実装したところ画面上は枠の中に「写真を投稿する」が表示されるのですが、クリックしても写真選択の画面が出てきません。3行目と4行目が逆だったのかと思って入れ替えたのですがうまくいきませんでした。原因はどのあたりにあるのでしょうか?
よろしくお願いいたします。
あなたの回答
tips
プレビュー