分からないこと

railsを使用し、newアクションでユーザの新規作成ページを作っています。
imagePreviwクラスを用意し、その中でファイル選択ボタンを押すと、画像と、どのファイル名が表示されるようにしています。他の名前やEメール領域と同様、f.submitを押した際に、データがサーバ側に送られるようにしたいです。以下に記載したシンプルな形式に対し、画像が表示されるのが理想です。なお画像アップロードには、carrierwaveとmini_magickを使用しています。

以下の形式ですと、登録するボタンを押した際に、画像がDBに保存されます。

.form-group
  = f.label :image
  = f.file_field :image, id: 'user_image'

ソース詳細

slim
1    .panel.panel-default
2      .panel-heading
3        | 会員情報
4      .panel-body
5        form
6        = form_with model: @user, local: true do |f|
7          .form-group
8            .imagePreview
9            .input-group
10              label.input-group-btn
11                span.btn.btn-primary
12                  | ファイル選択
13                  input#user_image.uploadFile style="display:none" name="user[image]" type="file"
14              input.form-control readonly="readonly" type="text"
15          .form-group
16            = f.text_field :name, class: 'form-control', id: 'user_name', placeholder: "名前"
17          .form-group
18            = f.email_field :email, class: 'form-control', id: 'user_email', placeholder: "Eメール"
19          .form-group
20            = f.password_field :password, class: 'form-control', id: 'user_password', placeholder: "パスワード"
21          .form-group
22            = f.password_field :password_confirmation, class: 'form-control', id: 'user_password_confirmation', placeholder: "パスワード確認"
23          = f.submit nil, class: 'btn btn-primary'
24
25javascript:
26  $(document).on('change', ':file', function() {
27      var input = $(this),
28      numFiles = input.get(0).files ? input.get(0).files.length : 1,
29      label = input.val().replace(/\/g, '/').replace(/.*//, '');
30      input.parent().parent().next(':text').val(label);
31
32      var files = !!this.files ? this.files : [];
33      if (!files.length || !window.FileReader) return;
34      if (/^image/.test( files[0].type)){
35          var reader = new FileReader();
36          reader.readAsDataURL(files[0]);
37          reader.onloadend = function(){
38              input.parent().parent().parent().prev('.imagePreview').css("background-image", "url("+this.result+")");
39          }
40      }
41  });

Application.scssは以下です。

scss
1.imagePreview {
2  width: 50px;
3  height: 50px;
4  background-position: center center;
5  background-size: cover;
6  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
7  display: inline-block;
8}

詳細

Rails 5.2.4
Ruby 2.7.2

行動規範の内容に同意します

回答1件

自己解決

自己解決しました。全く同様の記法ではないですが、以下にソースを記載します。

slim
1.panel.panel-default
2  .panel-heading
3    | 会員情報
4  .panel-body
5    form
6    = form_with model: @user, local: true do |f|
7      .form-group
8        .imagePreview
9        .input-group
10          label.input-group-btn
11            #user_image
12              = f.file_field :image, id: 'user_image'
13      .form-group
14        = f.text_field :name, class: 'form-control', id: 'user_name', placeholder: "名前"
15・
16・以下省略
17・