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

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

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

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

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Q&A

解決済

1回答

5295閲覧

【Rails】画像データをドラッグ&ドロップでアップする方法

besuko

総合スコア16

Ruby

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

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

0グッド

3クリップ

投稿2016/12/30 04:01

編集2017/02/17 08:10

######ドラッグ&ドロップでのファイルアップロードに苦戦しています。

ファイルのアップロードは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(画像)モデル

idshop_idfile
11file

###該当箇所のコード
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>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

RoRの知識は持ち合わせてないためJS側のみの回答ですが、Dropzone.jsの設定で期待する動作を行わせることが可能と思います。
Wikiに書かれいるように、autoProcessQueue: falseに設定し、アップロードを行うボタンのイベントで myDropzone.processQueue();を行えば、D&D直後にはアップロードされずボタンクリックでアップロードが開始されるようです。

投稿2017/02/17 09:36

編集2017/02/18 02:32
turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

besuko

2017/02/18 02:31

有難うございます。 ご教示頂きました箇所の変更でデータを保存するタイミングの変更に成功致しました! JSの知識がなくどの部分を変更すれば良いのか分からずにいたので本当に助かりました。
siruku6

2018/01/15 02:24

関係ないところから失礼いたします。 turbgraphics200さんの回答にある、wikiが非常にわかりやすかったです。 turbgraphics200さん、貴重な情報ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問