前提

Ruby on Railsを用いてアプリ作成を行っております。ユーザー作成フォームで画像を選択できるようにしているのですが、不足情報があった場合は、renderで再度画面を表示されるようにしています。

わからないこと

ユーザー作成フォームで、情報に誤りがある場合、作成時に選択していた画像が未選択になってしまいます。入力情報を間違えるたびに、画像を再選択するのは面倒なので、画像はそのままにしておきたいです。

詳細

Ruby
1class UsersController < ApplicationController
2    def new
3    @user = User.new
4  end
5
6  def create
7    @user = User.new(user_params)
8    if @user.save
9      log_in @user
10      flash[:success] = "ユーザーが作成できました"
11      redirect_to @user
12    else
13      render :new
14    end
15  end
16end

slim
1.row.justify-content-center
2  .panel.panel-default
3    .panel-heading
4      | 会員情報
5    .panel-body
6      form
7      = form_with model: @user, local: true do |f|
8        = f.label :image
9        .form-group
10          .imagePreview
11          .input-group
12            label.input-group-btn
13              #user_image
14                = f.file_field :image
15        .form-group
16          = f.label :name
17          = f.text_field :name, class: 'form-control', id: 'user_name'
18          - if @user.errors.include?(:name)
19            p style=("color: red;") = @user.errors.full_messages_for(:name).first
20途中省略
21      = f.submit "登録", class: 'btn btn-primary'
22
23javascript:
24  $(document).on('change', ':file', function() {
25      var input = $(this),
26      numFiles = input.get(0).files ? input.get(0).files.length : 1,
27      label = input.val().replace(/\/g, '/').replace(/.*//, '');
28      input.parent().parent().next(':text').val(label);
29
30      var files = !!this.files ? this.files : [];
31      if (!files.length || !window.FileReader) return;
32      if (/^image/.test( files[0].type)){
33          var reader = new FileReader();
34          reader.readAsDataURL(files[0]);
35          reader.onloadend = function(){
36              input.parent().parent().parent().prev('.imagePreview').css("background-image", "url("+this.result+")");
37          }
38      }
39  });