質問編集履歴

5

画像プレビュー機能を実装したJavaScriptのコードを追記しております。

2021/08/21 04:30

投稿

kawanoonigiri
kawanoonigiri

スコア14

test CHANGED
File without changes
test CHANGED
@@ -414,9 +414,85 @@
414
414
 
415
415
 
416
416
 
417
+ 下記、プレビュー機能を実装したJavaScriptのコードです。
418
+
417
- (さらに追記分)
419
+ ```javascript
420
+
418
-
421
+ document.addEventListener('DOMContentLoaded', function() {
422
+
419
-
423
+ if (document.getElementById('store_image')){
424
+
425
+ const ImageList = document.getElementById('image-list')
426
+
427
+
428
+
429
+ const createImageHTML = (blob) => {
430
+
431
+ const imageElement = document.createElement('div')
432
+
433
+ imageElement.setAttribute('class', "image-element")
434
+
435
+ let imageElementNum = document.querySelectorAll('.image-element').length
436
+
437
+
438
+
439
+ const blobImage = document.createElement('img')
440
+
441
+ blobImage.setAttribute('src', blob)
442
+
443
+
444
+
445
+ const inputHTML = document.createElement('input')
446
+
447
+ inputHTML.setAttribute('id', `store_image_${imageElementNum}`)
448
+
449
+ inputHTML.setAttribute('name', 'store[images][]')
450
+
451
+ inputHTML.setAttribute('type', 'file')
452
+
453
+
454
+
455
+ imageElement.appendChild(blobImage)
456
+
457
+ imageElement.appendChild(inputHTML)
458
+
459
+ ImageList.appendChild(imageElement)
460
+
461
+
462
+
463
+ inputHTML.addEventListener('change', (e) => {
464
+
465
+ file = e.target.files[0];
466
+
467
+ blob = window.URL.createObjectURL(file);
468
+
469
+
470
+
471
+ createImageHTML(blob)
472
+
473
+ })
474
+
475
+ }
476
+
477
+
478
+
479
+ document.getElementById('store_image').addEventListener('change', (e) => {
480
+
481
+ let file = e.target.files[0];
482
+
483
+ let blob = window.URL.createObjectURL(file);
484
+
485
+
486
+
487
+ createImageHTML(blob)
488
+
489
+ });
490
+
491
+ };
492
+
493
+ });
494
+
495
+ ```
420
496
 
421
497
 
422
498
 

4

Storeモデル、コントローラーの全記述とcreateアクションの際取得できるparamsの値を再掲載しました。

2021/08/21 04:30

投稿

kawanoonigiri
kawanoonigiri

スコア14

test CHANGED
File without changes
test CHANGED
@@ -102,58 +102,112 @@
102
102
 
103
103
    
104
104
 
105
- 下記はstores_controller.rb内の記述です。(投稿と画像の反映に関係しそうなactionのみ記述しています。)
105
+ 下記はstores_controller.rb内の記述です。
106
106
 
107
107
  ```ruby
108
108
 
109
+ class StoresController < ApplicationController
110
+
109
- def index
111
+ def index
110
112
 
111
113
  @store = Store.includes(:user)
112
114
 
115
+ end
116
+
117
+
118
+
119
+ def new
120
+
121
+ @store = Store.new
122
+
123
+ end
124
+
125
+
126
+
127
+ def create
128
+
129
+ @store = Store.new(post_params)
130
+
131
+ binding.pry
132
+
133
+ if @store.valid?
134
+
135
+ @store.save
136
+
137
+ redirect_to root_path
138
+
139
+ else
140
+
141
+ render :new
142
+
143
+ end
144
+
145
+ end
146
+
147
+
148
+
149
+ def show
150
+
151
+ @comment = Comment.new
152
+
153
+ @store = Store.find(params[:id])
154
+
155
+ @comments = @store.comments.includes(:user)
156
+
157
+ end
158
+
159
+
160
+
161
+ def edit
162
+
163
+ @store = Store.find(params[:id])
164
+
165
+ end
166
+
167
+
168
+
169
+ def update
170
+
171
+ @store = Store.find(params[:id])
172
+
173
+ if @store.update(post_params)
174
+
175
+ redirect_to store_path(@store)
176
+
177
+ else
178
+
179
+ render :edit
180
+
181
+ end
182
+
183
+ end
184
+
185
+
186
+
187
+ def destroy
188
+
189
+ @store = Store.find(params[:id])
190
+
191
+ @store.destroy
192
+
193
+ redirect_to root_path
194
+
195
+ end
196
+
197
+
198
+
199
+ private
200
+
201
+ def post_params
202
+
203
+ params.require(:store).permit(:name, :address, :postal_code, :telephone, :url, :closing_day, :business_hour, :fee, :water, :temperature,
204
+
205
+ :roryu_status, :roryu_time, :air_bath, :break_place, :television, :bgm, :water_depth, images: [] ).merge(user_id: current_user.id)
206
+
207
+ end
208
+
113
209
  end
114
210
 
115
-
116
-
117
- def create
118
-
119
- @store = Store.new(post_params)
120
-
121
- if @store.valid?
122
-
123
- @store.save
124
-
125
- redirect_to root_path
126
-
127
- else
128
-
129
- render :new
130
-
131
- end
132
-
133
- end
134
-
135
-
136
-
137
- def show
138
-
139
- @comment = Comment.new
140
-
141
- @store = Store.find(params[:id])
142
-
143
- @comments = @store.comments.includes(:user)
144
-
145
- end
146
-
147
-
148
-
149
- private
150
-
151
- def post_params
152
-
153
- params.require(:store).permit(:name, {中略}  ,:bgm, images: [] ).merge(user_id: current_user.id)
154
-
155
- end
156
-
157
211
  ```
158
212
 
159
213
    
@@ -164,15 +218,183 @@
164
218
 
165
219
  <%= form_with model: store, local: true do |f|%>
166
220
 
167
-
221
+ <div class="field">
222
+
168
-
223
+ <%= f.label :name, "店舗名" %><br />
224
+
225
+ <%= f.text_field :name, class: :form__text, id:"store_title" %>
226
+
169
- (中略)
227
+ </div>
228
+
229
+
230
+
231
+ <div class="field">
232
+
233
+ <%= f.label :postal_code, "郵便番号" %><br />
234
+
235
+ <%= f.text_field :postal_code, class: :form__text, id:"store_catch_copy" %>
236
+
237
+ </div>
238
+
239
+
240
+
241
+ <div class="field">
242
+
243
+ <%= f.label :address, "住所" %><br />
244
+
245
+ <%= f.text_field :address, class: :form__text, id:"store_concept" %>
246
+
247
+ </div>
248
+
249
+
250
+
251
+ <div class="field">
252
+
253
+ <%= f.label :telephone, "電話番号" %><br />
254
+
255
+ <%= f.text_field :telephone, class: :form__text, id:"store_image" %>
256
+
257
+ </div>
258
+
259
+
260
+
261
+ <div class="field">
262
+
263
+ <%= f.label :url, "公式HP" %><br />
264
+
265
+ <%= f.text_field :url, class: :form__text, id:"store_concept" %>
266
+
267
+ </div>
268
+
269
+
270
+
271
+ <div class="field">
272
+
273
+ <%= f.label :closing_day, "店休日" %><br />
274
+
275
+ <%= f.text_field :closing_day, class: :form__text, id:"store_concept" %>
276
+
277
+ </div>
278
+
279
+
280
+
281
+ <div class="field">
282
+
283
+ <%= f.label :business_hour, "営業時間" %><br />
284
+
285
+ <%= f.text_field :business_hour, class: :form__text, id:"store_concept" %>
286
+
287
+ </div>
288
+
289
+
290
+
291
+ <div class="field">
292
+
293
+ <%= f.label :fee, "入浴料" %><br />
294
+
295
+ <%= f.text_field :fee, class: :form__text, id:"store_concept" %>
296
+
297
+ </div>
298
+
299
+
300
+
301
+ <div class="field">
302
+
303
+ <%= f.label :roryu_status, "ロウリュ" %><br />
304
+
305
+ <%= f.text_field :roryu_status, class: :form__text, id:"store_concept" %>
306
+
307
+ </div>
308
+
309
+
310
+
311
+ <div class="field">
312
+
313
+ <%= f.label :roryu_time, "ロウリュの時間" %><br />
314
+
315
+ <%= f.text_field :roryu_time, class: :form__text, id:"store_concept" %>
316
+
317
+ </div>
318
+
319
+
320
+
321
+ <div class="field">
322
+
323
+ <%= f.label :temperature, "サウナ室内の温度" %><br />
324
+
325
+ <%= f.text_field :temperature, class: :form__text, id:"store_concept" %>
326
+
327
+ </div>
328
+
329
+
330
+
331
+ <div class="field">
332
+
333
+ <%= f.label :television, "サウナ室内のテレビ設置" %><br />
334
+
335
+ <%= f.text_field :television, class: :form__text, id:"store_concept" %>
336
+
337
+ </div>
338
+
339
+
340
+
341
+ <div class="field">
342
+
343
+ <%= f.label :water, "水風呂" %><br />
344
+
345
+ <%= f.text_field :water, class: :form__text, id:"store_concept" %>
346
+
347
+ </div>
348
+
349
+
350
+
351
+ <div class="field">
352
+
353
+ <%= f.label :water_depth, "水深" %><br />
354
+
355
+ <%= f.text_field :water_depth, class: :form__text, id:"store_concept" %>
356
+
357
+ </div>
358
+
359
+
360
+
361
+
362
+
363
+ <div class="field">
364
+
365
+ <%= f.label :air_bath, "外気浴" %><br />
366
+
367
+ <%= f.text_field :air_bath, class: :form__text, id:"store_concept" %>
368
+
369
+ </div>
370
+
371
+
372
+
373
+ <div class="field">
374
+
375
+ <%= f.label :break_place, "インターバル" %><br />
376
+
377
+ <%= f.text_field :break_place, class: :form__text, id:"store_concept" %>
378
+
379
+ </div>
380
+
381
+
382
+
383
+ <div class="field">
384
+
385
+ <%= f.label :bgm, "サウナ内BGM" %><br />
386
+
387
+ <%= f.text_field :bgm, class: :form__text, id:"store_concept" %>
388
+
389
+ </div>
390
+
391
+
170
392
 
171
393
  <div class="field" >
172
394
 
173
395
  <%= f.label :images, "店舗画像" %><br />
174
396
 
175
- <%= f.file_field :images, name: 'message[images][]', id:"store_image" %>
397
+ <%= f.file_field :images, id: "message_image", multiple: true %>
176
398
 
177
399
  <div id="image-list"></div>
178
400
 
@@ -206,20 +428,20 @@
206
428
 
207
429
    
208
430
 
209
- さらに追記)
431
+ (追記)
210
432
 
211
433
  Stores_controller.rb内のcreateアクションにて取得したparamsの中身を確認したところ、下記のように添付した画像2つは取得できているように思います。
212
434
 
213
- ただ、保存されているDBを見るとID:5のレコードの中に1枚画像が保存されているだけのように見えました
214
-
215
-
216
-
217
- ```
218
-
219
- "message"=>{"images"=>[
220
-
221
- #<ActionDispatch::Http::UploadedFile:0x00007fec0999ef38 @tempfile=#<Tempfile:/var/folders/8c/bzvqv8g14h9fsrkg93q1kjx40000gn/T/RackMultipart20210819-9041-14byoem.jpeg>, @original_filename="8C7BBE13-CD6C-4D01-B878-B46EF9A2C53F.jpeg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"message[images][]\"; filename=\"8C7BBE13-CD6C-4D01-B878-B46EF9A2C53F.jpeg\"\r\nContent-Type: image/jpeg\r\n">,
222
-
223
- #<ActionDispatch::Http::UploadedFile:0x00007fec0999eec0 @tempfile=#<Tempfile:/var/folders/8c/bzvqv8g14h9fsrkg93q1kjx40000gn/T/RackMultipart20210819-9041-1xyvg8a.jpeg>, @original_filename="8BACB604-C5B2-4FC5-9878-39F82E0B1C29.jpeg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"message[images][]\"; filename=\"8BACB604-C5B2-4FC5-9878-39F82E0B1C29.jpeg\"\r\nContent-Type: image/jpeg\r\n">]}, "commit"=>"登録する", "controller"=>"stores", "action"=>"create"} permitted: false>
224
-
225
- ```
435
+ しかしデータベースに保存されている画像は1枚のみです
436
+
437
+
438
+
439
+ ```
440
+
441
+ <ActionController::Parameters {"authenticity_token"=>"CuKTE0J3Va0ohKVkCyvbutsgYI08W5k42v9ybDmbb2d5xGiU6yueUvWuVFH8NF02uPkilKl16TooYEPLanjNqA==", "store"=><ActionController::Parameters {"name"=>"熱い湯", "postal_code"=>"123-4567", "address"=>"県", "telephone"=>"無", "url"=>"無", "closing_day"=>"無", "business_hour"=>"無", "fee"=>"200", "roryu_status"=>"無", "roryu_time"=>"無", "temperature"=>"100", "television"=>"無", "water"=>"10", "water_depth"=>"100", "air_bath"=>"無", "break_place"=>"無", "bgm"=>"無", "images"=>[#<ActionDispatch::Http::UploadedFile:0x00007fa67a60c048 @tempfile=#
442
+
443
+ <Tempfile:/var/folders/8c/bzvqv8g14h9fsrkg93q1kjx40000gn/T/RackMultipart20210820-1656-4p688y.png>, @original_filename="200x200.png", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"store[images][]\"; filename=\"200x200.png\"\r\nContent-Type: image/png\r\n">]} permitted: false>, "message"=>{"images"=>[#<ActionDispatch::Http::UploadedFile:0x00007fa67a617bf0 @tempfile=#
444
+
445
+ <Tempfile:/var/folders/8c/bzvqv8g14h9fsrkg93q1kjx40000gn/T/RackMultipart20210820-1656-7kbbi8.png>, @original_filename="200x200.png", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"message[images][]\"; filename=\"200x200.png\"\r\nContent-Type: image/png\r\n">]}, "commit"=>"登録する", "controller"=>"stores", "action"=>"create"} permitted: false>
446
+
447
+ ```

3

createアクションにて取得したparamsに変更しました。先程の追記分はupdateアクションで取得したparamsでした。

2021/08/20 09:07

投稿

kawanoonigiri
kawanoonigiri

スコア14

test CHANGED
File without changes
test CHANGED
@@ -216,8 +216,10 @@
216
216
 
217
217
  ```
218
218
 
219
- #<ActionDispatch::Http::UploadedFile:0x00007fec09aca6f0 @tempfile=#<Tempfile:/var/folders/8c/bzvqv8g14h9fsrkg93q1kjx40000gn/T/RackMultipart20210819-9041-10m9lkn.jpeg>, @original_filename="8C7BBE13-CD6C-4D01-B878-B46EF9A2C53F.jpeg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"message[images][]\"; filename=\"8C7BBE13-CD6C-4D01-B878-B46EF9A2C53F.jpeg\"\r\nContent-Type: image/jpeg\r\n">,
220
-
221
- #<ActionDispatch::Http::UploadedFile:0x00007fec09aca600 @tempfile=#<Tempfile:/var/folders/8c/bzvqv8g14h9fsrkg93q1kjx40000gn/T/RackMultipart20210819-9041-1c5uhv1.jpeg>, @original_filename="8B3B5414-6D5F-475A-BA53-AD488CB90E2A.jpeg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"message[images][]\"; filename=\"8B3B5414-6D5F-475A-BA53-AD488CB90E2A.jpeg\"\r\nContent-Type: image/jpeg\r\n">]}, "commit"=>"登録する", "controller"=>"stores", "action"=>"update", "id"=>"5"} permitted: false>
222
-
223
- ```
219
+ "message"=>{"images"=>[
220
+
221
+ #<ActionDispatch::Http::UploadedFile:0x00007fec0999ef38 @tempfile=#<Tempfile:/var/folders/8c/bzvqv8g14h9fsrkg93q1kjx40000gn/T/RackMultipart20210819-9041-14byoem.jpeg>, @original_filename="8C7BBE13-CD6C-4D01-B878-B46EF9A2C53F.jpeg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"message[images][]\"; filename=\"8C7BBE13-CD6C-4D01-B878-B46EF9A2C53F.jpeg\"\r\nContent-Type: image/jpeg\r\n">,
222
+
223
+ #<ActionDispatch::Http::UploadedFile:0x00007fec0999eec0 @tempfile=#<Tempfile:/var/folders/8c/bzvqv8g14h9fsrkg93q1kjx40000gn/T/RackMultipart20210819-9041-1xyvg8a.jpeg>, @original_filename="8BACB604-C5B2-4FC5-9878-39F82E0B1C29.jpeg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"message[images][]\"; filename=\"8BACB604-C5B2-4FC5-9878-39F82E0B1C29.jpeg\"\r\nContent-Type: image/jpeg\r\n">]}, "commit"=>"登録する", "controller"=>"stores", "action"=>"create"} permitted: false>
224
+
225
+ ```

2

createアクション内で取得されたparamsの中身について追記しています。

2021/08/19 02:15

投稿

kawanoonigiri
kawanoonigiri

スコア14

test CHANGED
File without changes
test CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
 
30
30
 
31
- (追記)
31
+
32
32
 
33
33
  ### 現在発生しているエラー
34
34
 
@@ -158,8 +158,6 @@
158
158
 
159
159
    
160
160
 
161
- (追記)
162
-
163
161
  以下投稿フォームの記述です。
164
162
 
165
163
  ```ruby
@@ -194,8 +192,32 @@
194
192
 
195
193
 
196
194
 
195
+ (さらに追記分)
196
+
197
+
198
+
199
+
200
+
197
201
  ### 試したこと
198
202
 
199
203
 
200
204
 
201
205
  モデル内のバリデーションにて:imagesのみ削除し、画像なしで投稿できるか試してみたところその他の情報は正しく保存され、またローカル環境でも正しく表示されていました。
206
+
207
+   
208
+
209
+ (さらに追記)
210
+
211
+ Stores_controller.rb内のcreateアクションにて取得したparamsの中身を確認したところ、下記のように添付した画像2つは取得できているように思います。
212
+
213
+ ただ、保存されているDBを見るとID:5のレコードの中に1枚分の画像が保存されているだけのように見えました。
214
+
215
+
216
+
217
+ ```
218
+
219
+ #<ActionDispatch::Http::UploadedFile:0x00007fec09aca6f0 @tempfile=#<Tempfile:/var/folders/8c/bzvqv8g14h9fsrkg93q1kjx40000gn/T/RackMultipart20210819-9041-10m9lkn.jpeg>, @original_filename="8C7BBE13-CD6C-4D01-B878-B46EF9A2C53F.jpeg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"message[images][]\"; filename=\"8C7BBE13-CD6C-4D01-B878-B46EF9A2C53F.jpeg\"\r\nContent-Type: image/jpeg\r\n">,
220
+
221
+ #<ActionDispatch::Http::UploadedFile:0x00007fec09aca600 @tempfile=#<Tempfile:/var/folders/8c/bzvqv8g14h9fsrkg93q1kjx40000gn/T/RackMultipart20210819-9041-1c5uhv1.jpeg>, @original_filename="8B3B5414-6D5F-475A-BA53-AD488CB90E2A.jpeg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"message[images][]\"; filename=\"8B3B5414-6D5F-475A-BA53-AD488CB90E2A.jpeg\"\r\nContent-Type: image/jpeg\r\n">]}, "commit"=>"登録する", "controller"=>"stores", "action"=>"update", "id"=>"5"} permitted: false>
222
+
223
+ ```

1

現在発生しているエラー、投稿フォームのviewについて追記しました。

2021/08/19 02:05

投稿

kawanoonigiri
kawanoonigiri

スコア14

test CHANGED
File without changes
test CHANGED
@@ -28,9 +28,19 @@
28
28
 
29
29
 
30
30
 
31
+ (追記)
32
+
33
+ ### 現在発生しているエラー
34
+
35
+ エラー表示は出ていません。
36
+
37
+ 投稿フォームの画像選択のほか全ての項目を埋め、送信ボタンを押すとバリデーションを通過できずにnewページがレンダリングされます。
38
+
39
+
40
+
31
41
  ### 該当のソースコード
32
42
 
33
-
43
+   
34
44
 
35
45
  下記はトップページのviewです。
36
46
 
@@ -48,7 +58,7 @@
48
58
 
49
59
  ```
50
60
 
51
-
61
+   
52
62
 
53
63
  こちらは詳細ページのviewです。
54
64
 
@@ -66,9 +76,9 @@
66
76
 
67
77
  ```
68
78
 
69
-
70
-
79
+   
80
+
71
- こちらはモデル内の記述です。
81
+ こちらはstore.rb内の記述です。(バリデーションの記述が長いので一部省略しています。)
72
82
 
73
83
  ```ruby
74
84
 
@@ -90,11 +100,11 @@
90
100
 
91
101
  ```
92
102
 
103
+   
104
+
93
-
105
+ 下記はstores_controller.rb内の記述です。(投稿と画像の反映に関係しそうなactionのみ記述しています。)
94
-
95
-
96
-
106
+
97
- ```ruby
107
+ ```ruby
98
108
 
99
109
  def index
100
110
 
@@ -146,6 +156,44 @@
146
156
 
147
157
  ```
148
158
 
159
+   
160
+
161
+ (追記)
162
+
163
+ 以下投稿フォームの記述です。
164
+
165
+ ```ruby
166
+
167
+ <%= form_with model: store, local: true do |f|%>
168
+
169
+
170
+
171
+ (中略)
172
+
173
+ <div class="field" >
174
+
175
+ <%= f.label :images, "店舗画像" %><br />
176
+
177
+ <%= f.file_field :images, name: 'message[images][]', id:"store_image" %>
178
+
179
+ <div id="image-list"></div>
180
+
181
+ </div>
182
+
183
+
184
+
185
+ <div class="actions">
186
+
187
+ <%= f.submit "登録する", class: :form__btn %>
188
+
189
+ </div>
190
+
191
+ <% end %>
192
+
193
+ ```
194
+
195
+
196
+
149
197
  ### 試したこと
150
198
 
151
199