jQueryを使えば動的にfile_fieldを生成できそう

やりたい事

<%= f.file_field :pictures, multiple: true %>と同様な動きをするファイルアップformを動的に複製する事

確認事項

前回の記事でnested_form_fieldsというgemではできない
現在の開発段階では<%= f.file_field :pictures, multiple: true %>を複数設置するだけで設置した分だけ画像を投稿する事ができる

実現できそうなやり方

jQuery DOM要素追加メソッドまとめから

<%= f.file_field :pictures, multiple: true %>のhtmlの出力結果と同じものを上記のDOM要素追加メソッドを使う事で実現できそう

以下は<%= f.file_field :pictures, multiple: true %>のhtml出力結果

  <span class="picture">
    <input multiple="multiple" type="file" name="micropost[pictures][]" id="micropost_pictures" />
  </span>

jQueryで要素を追加するappendの使用方法まとめから

<button type="button" id="appendTest">追加</button>

$("#appendTest").click(function(){
　　//div内に追加
    $('div').append('<p><strong>要素の追加テストです。</strong></p>')
});

を使えば押されたボタンをフックしてhtmlの要素を追加できそう

現時点で見える課題点

画像の枚数制限
jQueryの初級レベルを理解できていない