rails 画像アップロード 画像選択ウインドウが表示されない

Question

https://whatsupguys.net/programming-school-dive-into-code-learning-88/

この記事を参考に画像アップロードとプレユー表示の機能を実装しようとしています。
クリックして画像ファイル選択ウインドウを表示させる仕様にしたいのですが、
選択ウインドウが出てきません。ご教示ください。
carrierwaveとmini_magickはインストール済みです。

g_infosコントローラ、editアクション、view↓

```ここに言語を入力
  <div id="img_field" onClick="$('#file').click()" >
   <% if @g_info.picture.present? %>
    <%= image_tag(@g_info.picture) %>
    <% else %>
    <i class="fas fa-image"></i><i class="fas fa-file-upload add"></i>
    <%= form.file_field :picture, class: "image", style: "display:none;", id: "file"%>
   <% end %>
  </div>

models/g_info.rb

  belongs_to :user
  mount_uploader :image, ImageUploader
end

js

  $fileField = $('#file')

  // 選択された画像を取得し表示
  $($fileField).on('change', $fileField, function(e) {
    file = e.target.files[0]
    reader = new FileReader(),
    $preview = $("#img_field");

    reader.onload = (function(file) {
      return function(e) {
        $preview.empty();
        $preview.append($('<img>').attr({
          src: e.target.result,
          width: "100%",
          class: "preview",
          title: file.name
        }));
      };
    })(file);
    reader.readAsDataURL(file);
  });
});

css

  width: 330px;
  height: 230px;
  margin-bottom: 5px;
  font-size: 15px;
  border: solid 1px rgb(164, 179, 239);
  color: #666;
  position: relative;
  padding: 0;
  border-radius: 5px;
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #fff;
  overflow: hidden;
  box-sizing: border-box;
  transition: 0.3s ease-out;
  z-index: 10;
}

#img_field i {
  font-size: 100px;
  color: #aaa;
  line-height: 230px;
  width: 330px;
  transition: 0.3s ease-out;
}

#img_field i.add {
  display: none;
  font-size: 50px;
  position: absolute;
  top: -90px;
  right: 15px;
}

#img_field :hover {
  color: white;
  background-image: linear-gradient(-225deg, rgba(38,87,235,0.8) 10%, rgba(110, 222, 239, 0.8) 80%);
  transition: 0.3s ease-out;
  opacity: 0.7;
}

#img_field :hover i {
  transition: 0.3s ease-out;
  display: block;
  color: #fff;
}

Answer 1

<%= form.file_field :picture, class: "image", style: "display:none;", id: "file"%>  
<% end %> 

の位置が間違ってました。
img_fieldの外に出して解決しました。