teratail
回答率
85.30%
質問するログイン新規登録
トップに関する質問【Rails】画像をドラッグ&ドロップでアップロード時に親モデルのIDを紐づける方法

編集履歴

質問編集履歴

2

訂正

2017/02/19 05:45

投稿

besuko
besuko

スコア16

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,5 @@
1
1
  ######引き続きドラッグ&ドロップでのファイルアップロードに苦戦しています。
2
2
 
3
-
4
3
  ファイルのアップロードはgem'Dropzonejs'を使っています。
5
4
 
6
5
  店舗を検索するサイトを作っており、住所等の店舗情報を入力するフォーム内に、同時に画像データも保存させるようにしたいと考えております。
@@ -24,11 +23,34 @@
24
23
  現状はshopをcreate後、生成されたshop_idを用いて@shop.images.buildしていますが、店舗情報登録画面と画像登録画面が別になっておりスマートな方法ではありません。
25
24
  何かヒントでもご教示頂けますと幸いです。
26
25
 
26
+
27
+ ###__《※2/19更新しました》__
28
+ turbgraphics200様のご助言頂きました[WIKI](https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone)と、[こちら](http://stackoverflow.com/questions/42225406/unable-to-combine-a-normal-form-with-dropzone-js)を参考にform_forへの組み込みは出来ました。
29
+ imageモデルへのshop_idを渡すところまで出来ましたが、肝心の「file（データ）」だけ渡されずにいます。
30
+ 出来る限りの事は試してみましたが、解決出来ずにおります。。
31
+ 誤った箇所を教えて頂けませんでしょうか。
32
+ なお、保存用ストレージはcloudinayを使っています。
33
+
34
+
35
+
36
+ ```console
37
+ (0.1ms) begin transaction
38
+ SQL (0.8ms) INSERT INTO "images" ("created_at", "updated_at") VALUES (?, ?) [["created_at", 2017-02-19 04:51:31 UTC], ["updated_at", 2017-02-19 04:51:31 UTC]]
39
+ (1.8ms) commit transaction
40
+ (0.2ms) begin transaction
41
+ SQL (0.6ms) INSERT INTO "shops" ("user_id", "name", "address", "created_at", "updated_at") VALUES (?, ?, ?, ?, ?) [["user_id", 2], ["name", "テスト"], ["address", "東京都港区赤坂1-1-1"], ["created_at", 2017-02-19 04:51:31 UTC], ["updated_at", 2017-02-19 04:51:31 UTC]]
42
+ SQL (0.2ms) INSERT INTO "images" ("shop_id", "created_at", "updated_at") VALUES (?, ?, ?) [["shop_id", 43], ["created_at", 2017-02-19 04:51:31 UTC], ["updated_at", 2017-02-19 04:51:31 UTC]]
43
+ SQL (0.1ms) UPDATE "images" SET "shop_id" = ?, "updated_at" = ? WHERE "images"."id" = ? [["shop_id", 43], ["updated_at", 2017-02-19 04:51:31 UTC], ["id", 41]]
44
+ (2.2ms) commit transaction
45
+ ```
46
+
47
+
27
48
  ###環境
28
49
  Ruby2.3.3
29
50
  Rails5.0.1
30
51
 
31
52
  ###Gem
53
+ gem 'cloudinary'
32
54
  gem 'dropzonejs-rails'
33
55
  ###モデル
34
56
  shopモデル→imageモデルをネストしています。
@@ -66,12 +88,16 @@
66
88
  ```ruby
67
89
  class ShopImage < ApplicationRecord
68
90
  belongs_to :shop, optional: true
91
+
69
92
  mount_uploader :file, ImageUploader
70
93
  end
71
94
  ```
72
95
 
73
96
  shops_controller.rb
74
97
  ```ruby
98
+ class ShopsController < ApplicationController
99
+ before_action :set_shop, only: [:show, :edit, :update, :destroy]
100
+
75
101
  def new
76
102
  @shop = Shop.new
77
103
  @shop.images.build(file: params['file'])
@@ -79,28 +105,31 @@
79
105
 
80
106
  def create
81
107
  @shop = current_user.shops.build(shop_params)
108
+ image = @shop.images.build
109
+ image.save!
82
110
  respond_to do |format|
83
111
  if @shop.save
84
112
  format.html { redirect_to @shop, notice: '登録しました' }
85
- #format.html { redirect_to "/shops/#{@shop.id}/images/new", notice: '画像を登録してください。' }
86
113
  format.json { render :show, status: :created, location: @shop }
87
114
  else
88
115
  format.html { render :new }
89
116
  format.json { render json: @shop.errors, status: :unprocessable_entity }
90
117
  end
91
118
  end
119
+
120
+ private
121
+ def set_shop
122
+ @shop = Shop.find(params[:id])
123
+ end
124
+
125
+ def shop_params
126
+ params.require(:shop).permit(:name, :address,
127
+ images_attributes: [:id, :file, :_destroy]
128
+ )
129
+ end
92
130
  end
93
131
  ```
94
132
 
95
- image_controller.rb
96
- ```ruby
97
- def upload
98
- @shop = Shop.find(params[:shop_id])
99
- image = @shop.images.build(file: params['file'])
100
- image.save!
101
- render status: 200, json: @shop.images
102
- end
103
- ```
104
133
 
105
134
  image_uploader.rb
106
135
  ```ruby
@@ -154,13 +183,17 @@
154
183
 
155
184
  shops/new.html.erb
156
185
  ```
186
+ <%= simple_form_for(@shop, :authenticity_token => true, html: { multipart: true, class: 'dropzone', id: 'new_post_form'}) do |f| %>
187
+
157
- <%= form_for (@shop) do |f| %>
188
+ <div class="form-group">
189
+ <%= f.label :images, :class => "col-sm-3 control-label" %>
190
+ <div class="dropzone-previews"></div>
158
191
  <div class="fallback">
159
- <%#= form_tag(upload_shop_images_path(@shop),
192
+ <%= f.fields_for :images do |image| %>
160
- :id => 'my-dropzone', :class => 'dropzone', method: :post) %>
161
- <!--※ ↓無理やりform_for形式にしてみましたが、やはり動きませんでした。-->
193
+ <%= image.input :file, :label => false %>
162
- <%= f.file_field :image, :id => 'my-dropzone', :class => 'dropzone', method: :post %>
194
+ <% end %>
163
195
  </div>
196
+ </div>
164
197
 
165
198
  <div class="form-group">
166
199
  <%= f.label :name, :class => "col-sm-3 control-label" %>
@@ -179,21 +212,24 @@
179
212
  <% end %>
180
213
 
181
214
  <script type="text/javascript">
182
- Dropzone.options.myDropzone = {
215
+ Dropzone.options.newPostForm = {
183
- autoProcessQueue: false,
216
+ autoProcessQueue: false,
217
+ uploadMultiple: true,
218
+ parallelUploads: 100,
219
+ maxFiles: 100,
220
+ paramName: 'images[file]',
221
+ params:'images[shop_id]',
184
222
 
185
223
  init: function() {
186
- var submitButton = document.querySelector("#submit-all")
187
- myDropzone = this;
224
+ var myDropzone = this;
188
225
 
189
- submitButton.addEventListener("click", function() {
226
+ $("#submit-all").click(function (e) {
227
+ e.preventDefault();
228
+ e.stopPropagation();
190
- myDropzone.processQueue();
229
+ myDropzone.processQueue();
191
- });
230
+ });
192
-
193
- this.on("addedfile", function() {
194
- });
195
231
  }
196
- };
232
+ }
197
233
  </script>
198
234
 
199
235
  ```

1

修正

2017/02/19 05:45

投稿

besuko
besuko

スコア16

title CHANGED
File without changes
body CHANGED
@@ -72,6 +72,11 @@
72
72
 
73
73
  shops_controller.rb
74
74
  ```ruby
75
+ def new
76
+ @shop = Shop.new
77
+ @shop.images.build(file: params['file'])
78
+ end
79
+
75
80
  def create
76
81
  @shop = current_user.shops.build(shop_params)
77
82
  respond_to do |format|