######ドラッグ&ドロップでのファイルアップロードに苦戦しています。
ファイルのアップロードはgem'Dropzonejs'を使っています。
店舗を検索するサイトを作っており、住所等の店舗情報を入力するフォーム内に、同時に画像データも保存させるようにしたいと考えております。
ただ残念ながらDropzonejsはデフォルトではデータをドラッグしたタイミングに保存されるようになっています。
そのため、shop.newの時点でshop_idを持たないimageをそのまま保存することが出来ない状況です。
現状、shopをcreate後、shoop_idを用いて@shop.images.buildしてnewページを出していますが、店舗情報と画像登録画面が別になっておりスマートな方法ではありません。
これをドラッグしたタイミング→データの保持、保存ボタンを押したタイミング→データを保存というように変更したいと考えています。
①Dropzonejsのjsファイルをカスタマイズする
②Dropzonejsは使わずに、独自でドラッグ&ドロップフォームを作る
のいずれかが解決方法となるかと思います。
グーグルで検索しても目ぼしい情報が得られずにいますので、ご教示頂けますと幸いです。
###環境
Ruby2.3.3
Rails5.0.1
###Gem
gem 'dropzonejs-rails'
###モデル
Shop→imageをネストしています。
shop(店舗)モデル
|id|name|address||
|:--:|:--:|:--:|
|1|店舗名|住所|
image(画像)モデル
id | shop_id | file |
---|---|---|
1 | 1 | file |
###該当箇所のコード
routes.rb
ruby
1resources :shops, only: [:show] do 2 resources :images, only: [:new, :create, :destroy] do 3 collection do 4 post :upload 5 end 6 end 7 end
shop.rb
ruby
1class Shop < ApplicationRecord 2 has_many :images, dependent: :destroy 3end
image.rb
ruby
1class ShopImage < ApplicationRecord 2 belongs_to :shop, optional: true 3 mount_uploader :file, ImageUploader 4end
shops_controller.rb
ruby
1 def create 2 @shop = current_user.shops.build(shop_params) 3 respond_to do |format| 4 if verify_recaptcha(model: @shop) && @shop.save 5 format.html { redirect_to "/shops/#{@shop.id}/images/new", notice: '画像を登録してください。' } 6 format.json { render :show, status: :created, location: @shop } 7 else 8 format.html { render :new } 9 format.json { render json: @shop.errors, status: :unprocessable_entity } 10 end 11 end 12 end
image_controller.rb
ruby
1 def upload 2 @shop = Shop.find(params[:shop_id]) 3 image = @shop.images.build(file: params['file']) 4 image.save! 5 render status: 200, json: @shop.images 6 end
images/new.html.erb
<h1>画像の登録</h1> <%= render 'form' %> <% @shop.images.each do |image| %> <div id="image_<%=image.id%>"> <%= image_tag(image.file.url, :width => '200px') %> <%= link_to content_tag(:i, '', class: 'fa fa-trash'), image_path(@shop, image), method: :delete, data: { confirm: "本当に削除してもよろしいですか" }, class: "image_delete", remote: true %> </div> <% end %>
images/_form.html.erb
html
1<div class="fallback"> 2 <%= form_tag(upload_shop_images_path(@shop, remote: true), 3 :id => 'upload-dropzone', :class => 'dropzone', method: :post) %> 4</div>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/18 02:31
2018/01/15 02:24