【Rails JS】フォームで画像ファイルのプレビューをeditでも表示したい

###環境
Ruby(2.3.3)
Ruby on Rails(5.0.1)

gem
carrierwave（アップローダー）
cocoon（ネストフォーム）

###保存されている画像ファイルを更新時に取得したい

こちらを参照してRailsの画像アップロードフォームにプレビューを表示させました。

新規登録時はこのままで問題ないのですが、現状edit(更新)画面では空欄のままとなっており事前に保存されている画像を枠内に表示させたいと考えております。

以下のJSファイルを編集が必要かと思いますが、どの部分を変更すれば良いのか教えて頂けませんでしょうか。。
なお、image(画像)モデルはshop(店舗)モデルにネストされています。

JavaScript
1$(document).on('change', ':file', function() {
2    var input = $(this),
3    numFiles = input.get(0).files ? input.get(0).files.length : 1,
4    label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
5    input.parent().parent().next(':text').val(label);
6
7    var files = !!this.files ? this.files : [];
8    if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
9    if (/^image/.test( files[0].type)){ // only image file
10        var reader = new FileReader(); // instance of the FileReader
11        reader.readAsDataURL(files[0]); // read the local file
12        reader.onloadend = function(){ // set image data as background of div
13            input.parent().parent().parent().prev('.imagePreview').css("background-image", "url("+this.result+")");
14        }
15    }
16});

サーバーサイドはこのようになっております

ruby
1class Shop < ApplicationRecord
2  has_many :images, dependent: :destroy
3  accepts_nested_attributes_for :images, allow_destroy: true

ruby
1class Image < ApplicationRecord
2  belongs_to :shop, optional: true
3  mount_uploader :file, ImageUploader
4end

Ruby
1  def new
2    @shop = Shop.new
3    @shop.build_close_date
4    2.times { @shop.images.build }
5  end
6
7  def edit
8    @shop.close_date = CloseDate.new if @shop.close_date.blank?
9  end
10
11  def create
12      @shop = current_user.shops.build(shop_params)
13      respond_to do |format|
14        if @shop.save
15          format.html { redirect_to @shop, notice: '店舗情報を登録しました' }
16          format.json { render :show, status: :created, location: @shop }
17        else
18          format.html { render :new }
19          format.json { render json: @shop.errors, status: :unprocessable_entity }
20        end
21      end
22  end
23
24  def update
25    if @shop.update(shop_params)
26      format.html { redirect_to @shop, notice: '店舗情報を更新しました' }
27      format.json { render :show, status: :uploded, location: @shop }
28    else
29      format.html { render :edit }
30      format.json { render json: @shop.errors, status: :unprocessable_entity }
31    end
32  end
33end

HTML
1<%= simple_form_for(@shop, :authenticity_token => true, html: { multipart: true }) do |f| %>
2<div class="nested-field">
3    <%= f.simple_fields_for :images do |image| %>
4        <%= render partial: 'image_fields', locals: {f: image} %>
5    <% end %>
6    <%= link_to_add_association "画像を追加", f, :images, :class => 'btn btn-primary' %>
7</div>
8<% end %>

HTML
1<div class="nested-fields form_time_selects imgInput">
2    <div class="col-sm-2">
3          <div class="input-group">
4              <label class="input-group-btn">
5                  <span class="btn btn-primary">
6                      選択<%= f.file_field :file, :class => "uploadFile", :style => "display:none" %>
7                        <%= link_to_remove_association("削除", f, {}) %>
8                    </span>
9                </label>
10            <input type="text" class="form-control" readonly="">
11        </div>
12    </div>
13        <%#= link_to_remove_association("削除", f, {}) %>
14</div>

moke

2017/02/21 02:04

ちょうどタイムリーに似たようなシステムを作っています。 Bootstrap File Input とfields_forを使って実装中なので、jsを1,2行に収めれると思います。需要があればコードを書きますが。。。

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

関連した質問