railsアプリケーションでなぜか特定の状況時のみ、画像データをサーバに送れなかった件

## 環境
rails 5.0.6
mysql
gem "carrierwave"
gem "minimagick"
accepts_nested_attributes_forメソッドを使用して、科目モデルインスタンスと単語モデルインスタンスを同時に保存

##　どんなアプリか

単語帳アプリ
英語という科目を登録し、同時にその科目に紐づく単語（表と裏）も登録することで、のちに単語帳のように見返せるアプリ。

![スクリーンショット 2018-05-19 15.33.46.png](https://qiita-image-store.s3.amazonaws.com/0/252596/b3913720-c45d-4ce7-5579-f1aa188e15a9.png)

## 何で詰まったのか
特定の状況時のみfileタグで指定した画像がparameterにきちんと入らない

データを送信する状況一覧
１.　 new画面からcreate(デフォルトで５つのtext_fieldが入っている)
![スクリーンショット 2018-05-19 15.40.19.png](https://qiita-image-store.s3.amazonaws.com/0/252596/43a45fea-c7fe-62a1-6043-4c1513bb5661.png)

2.  単語データが入っているedit画面からカードを追加

![スクリーンショット 2018-05-19 15.42.35.png](https://qiita-image-store.s3.amazonaws.com/0/252596/025e4f6e-7d48-9925-0c0b-d9040381233a.png)

3. 単語が１つも入っていないedit画面からカードを追加
![スクリーンショット 2018-05-19 15.44.02.png](https://qiita-image-store.s3.amazonaws.com/0/252596/8d70f4a7-c2e6-8def-b9c3-f4c43614c51a.png)

３版においてのみ、なぜかimageカラムのパラメーターに、Viewでセットした画像ファイルの名前しか入っていない

![スクリーンショット 2018-05-19 15.47.04.png](https://qiita-image-store.s3.amazonaws.com/0/252596/c866c534-a6df-839b-37cf-2812f6f0fb32.png)

１番と２番の状況では、
![スクリーンショット 2018-05-19 15.50.11.png](https://qiita-image-store.s3.amazonaws.com/0/252596/77d69b58-c51a-8336-9bb6-c59392309b95.png)
のようになる。ご覧の通り、なぜか3番の時だけimageカラムに画像ファイルではなく、画像ファイルの名前しか入らない

## 結論
画像や音声データなどを送る際は、multipart: trueというオプションをformタグにつける必要があり、そうすればViewに
```
 enctype="multipart/form-data"
```
という属性が入り、無事パラメータに画像データを格納できる。
そしてform_forでは自動でmultipart: trueというオプションがつくのだが、先ほどの３番の状況では、画面を形成しているViewファイルのコードに、file_fieldタグが存在していなかった。（その科目に紐づく単語インスタンスが１つもなかったため、form_forタグの後ろに書かれた
```
 <%= f.fields_for :words, word do |s| %>
```
以下のコードを辿らず、file_fieldタグを読み込まなかったため)

するとHTML内にfileを指定するタグがなくなるので、form_forからすればこの人は画像データを送る気はないのだなと考え、自動でmultipart: trueオプションをつけてくれず、出力されたhtmlのformタグにenctype="multipart/form-data"属性が入らず、画像ファイルの名前だけが送られてくるという特異な状況が発生した。

下にViewのコードを記載する。

```erb
<div class="subject_new_display">
  <%= form_for @subject, html: { multipart: true } do |f| %> //このmultipartをつけてやる事で解決
  <div class="make-subject">
    <% if @subject.title.nil? %>
      <h2>新しい学習セットを作成する</h2>
    <% end %>
    <%= f.text_field :title %><br>
  </div>
  <div class="word_boxes" data-count="5">
    <% @subject.words.each_with_index do |word, index| %>
      <%= f.fields_for :words, word do |s| %>
        <div class="word_set">
          <span class="word_box__index">
            <%= index + 1 %>
          </span>
          <div class="word_box__left">
            <%= s.text_field :face, class: "word_box" %>
            表
          </div>
          <div class="word_box__right">
            <div class="word_box__right--content">
              <%= s.text_field :flip, class: "word_box" %>
              <label>
                <i class="fa fa-picture-o"  aria-hidden="true"></i>
                <%= s.file_field :image, class: "image-picture" %>
              </label>
            </div>
            裏
          </div>
        </div>
      <% end %>
    <% end %>
  </div>
    <div class="add_card">
      <div class="add_card__wrapper">
        <span>カードを追加</span>
      </div>
    </a>
    <% if @subject.title.nil? %>
      <%= f.submit "作成する", class: "button--create-subject"%>
    <% else %>
      <%= f.submit "編集する", class: "button--create-subject"%>
    <% end %>
  <% end %>
</div>

```


## 理想だった思考回路
1.
コントローラでbinding.pryをしてparamsを覗くと、その時点でimageカラムに格納されているデータがおかしかったので、原因はView側にあると断定。

2
New画面と、既に単語データが入っているEdit画面の時（最初は単語データがあったが、それを全て消してデータが１つもない状態にし、そこからまた単語を入力して送信した時を含む）は、きちんと画像を送ることができる。

それに対して、単語データが最初から一つも入っていないEdit画面の時は画像データの名前だけを送ってしまう。

3
データをきちんと送れている状況に共通しているのは、画面に最初から単語のデータがあった時。 逆に送れていなかった時は、最初から単語データをViewで読み込んでいないので、コードにあるfile_fieldが反応しておらず、それが悪さをしている可能性があり、画像データを送るのに必要な設定が書かれた属性が記述されない。だから各状況において検証ツールを使ってformタグの属性に違いはないか見てみよう。

4
なんだこのenctype="multipart/form-data"っつーのは。

5
解決。