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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

受付中

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

besuko
besuko

総合スコア16

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2回答

0評価

0クリップ

6770閲覧

投稿2017/02/21 00:48

編集2022/01/12 10:55

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

gem
carrierwave(アップローダー)
cocoon(ネストフォーム)

保存先
Cloudinary

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

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

枠内にプレビュー表示されます

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

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

JavaScript

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

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

ruby

class Shop < ApplicationRecord has_many :images, dependent: :destroy accepts_nested_attributes_for :images, allow_destroy: true

ruby

class Image < ApplicationRecord belongs_to :shop, optional: true mount_uploader :file, ImageUploader end

Ruby

def new @shop = Shop.new @shop.build_close_date 2.times { @shop.images.build } end def edit @shop.close_date = CloseDate.new if @shop.close_date.blank? end def create @shop = current_user.shops.build(shop_params) respond_to do |format| if @shop.save format.html { redirect_to @shop, notice: '店舗情報を登録しました' } format.json { render :show, status: :created, location: @shop } else format.html { render :new } format.json { render json: @shop.errors, status: :unprocessable_entity } end end end def update if @shop.update(shop_params) format.html { redirect_to @shop, notice: '店舗情報を更新しました' } format.json { render :show, status: :uploded, location: @shop } else format.html { render :edit } format.json { render json: @shop.errors, status: :unprocessable_entity } end end end

HTML

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

HTML

<div class="nested-fields form_time_selects imgInput"> <div class="col-sm-2"> <div class="input-group"> <label class="input-group-btn"> <span class="btn btn-primary"> 選択<%= f.file_field :file, :class => "uploadFile", :style => "display:none" %> <%= link_to_remove_association("削除", f, {}) %> </span> </label> <input type="text" class="form-control" readonly=""> </div> </div> <%#= link_to_remove_association("削除", f, {}) %> </div>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

moke

2017/02/21 02:04

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

2017/02/21 02:10

有難うございます。コードのご掲載をお願いしても宜しいでしょうか。
moke

2017/02/21 02:56

まだ完成してないので少々お待ちをorz
moke

2017/02/23 04:23 編集

すみません急な用事が入って、報告が遅れました。一応完成しました。確認ですが、besuko様はuploadしたイメージがuploadした後も見えてそのままの画面で追加削除ができるようにしたいのですよね。 後気づかなかったのですがCarrierWaveを使っているのですか?
besuko

2017/02/23 04:30

いえ、全然問題ございません。はい、アップローダーはCarrierWaveを使っております。その後も試行錯誤をしていますが未だ解決出来ておりませんので、ご教示頂けますと幸いです。
moke

2017/02/23 04:44 編集

おお素早い回答、お待たせしてすみません、一応確認なのですが、uploadする画像が2つになっているのは区別するためなんですか?例えば外観と店長の写真とか?関係なければ、一つに複数アップロード可能とか、外観、内装、商品、店員とかカテゴリー分けかつ複数登録可能とかできますが。 あと当方attachementを使ってるので、読み替えていただく必要があるかもしれません
besuko

2017/02/23 04:52

初期状態で2つフォームがあるのは特に意味はございません。複数枚アップロード出来るようにしておりますが、現時点ではカテゴリー分けや決まったルールはございません。ただ保存出来る枚数に制限が無い状態にしてあります。
moke

2017/02/23 05:38

一応CarrierWave仕様で書いてみました。CarrierWaveを使ったことがないので間違ってたらすみません

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。