質問編集履歴
5
画像プレビュー機能を実装したJavaScriptのコードを追記しております。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -206,9 +206,47 @@
|
|
|
206
206
|
<% end %>
|
|
207
207
|
```
|
|
208
208
|
|
|
209
|
+
下記、プレビュー機能を実装したJavaScriptのコードです。
|
|
209
|
-
|
|
210
|
+
```javascript
|
|
211
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
212
|
+
if (document.getElementById('store_image')){
|
|
213
|
+
const ImageList = document.getElementById('image-list')
|
|
214
|
+
|
|
215
|
+
const createImageHTML = (blob) => {
|
|
216
|
+
const imageElement = document.createElement('div')
|
|
217
|
+
imageElement.setAttribute('class', "image-element")
|
|
218
|
+
let imageElementNum = document.querySelectorAll('.image-element').length
|
|
219
|
+
|
|
220
|
+
const blobImage = document.createElement('img')
|
|
221
|
+
blobImage.setAttribute('src', blob)
|
|
210
222
|
|
|
223
|
+
const inputHTML = document.createElement('input')
|
|
224
|
+
inputHTML.setAttribute('id', `store_image_${imageElementNum}`)
|
|
225
|
+
inputHTML.setAttribute('name', 'store[images][]')
|
|
226
|
+
inputHTML.setAttribute('type', 'file')
|
|
211
227
|
|
|
228
|
+
imageElement.appendChild(blobImage)
|
|
229
|
+
imageElement.appendChild(inputHTML)
|
|
230
|
+
ImageList.appendChild(imageElement)
|
|
231
|
+
|
|
232
|
+
inputHTML.addEventListener('change', (e) => {
|
|
233
|
+
file = e.target.files[0];
|
|
234
|
+
blob = window.URL.createObjectURL(file);
|
|
235
|
+
|
|
236
|
+
createImageHTML(blob)
|
|
237
|
+
})
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
document.getElementById('store_image').addEventListener('change', (e) => {
|
|
241
|
+
let file = e.target.files[0];
|
|
242
|
+
let blob = window.URL.createObjectURL(file);
|
|
243
|
+
|
|
244
|
+
createImageHTML(blob)
|
|
245
|
+
});
|
|
246
|
+
};
|
|
247
|
+
});
|
|
248
|
+
```
|
|
249
|
+
|
|
212
250
|
### 試したこと
|
|
213
251
|
|
|
214
252
|
モデル内のバリデーションにて:imagesのみ削除し、画像なしで投稿できるか試してみたところその他の情報は正しく保存され、またローカル環境でも正しく表示されていました。
|
4
Storeモデル、コントローラーの全記述とcreateアクションの際取得できるparamsの値を再掲載しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -50,42 +50,153 @@
|
|
|
50
50
|
end
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
-
下記はstores_controller.rb内の記述です。
|
|
53
|
+
下記はstores_controller.rb内の記述です。
|
|
54
54
|
```ruby
|
|
55
|
+
class StoresController < ApplicationController
|
|
55
|
-
def index
|
|
56
|
+
def index
|
|
56
57
|
@store = Store.includes(:user)
|
|
57
|
-
end
|
|
58
|
+
end
|
|
58
59
|
|
|
60
|
+
def new
|
|
61
|
+
@store = Store.new
|
|
62
|
+
end
|
|
63
|
+
|
|
59
|
-
def create
|
|
64
|
+
def create
|
|
60
65
|
@store = Store.new(post_params)
|
|
66
|
+
binding.pry
|
|
61
67
|
if @store.valid?
|
|
62
68
|
@store.save
|
|
63
69
|
redirect_to root_path
|
|
64
70
|
else
|
|
65
71
|
render :new
|
|
66
72
|
end
|
|
67
|
-
end
|
|
73
|
+
end
|
|
68
74
|
|
|
69
|
-
def show
|
|
75
|
+
def show
|
|
70
76
|
@comment = Comment.new
|
|
71
77
|
@store = Store.find(params[:id])
|
|
72
78
|
@comments = @store.comments.includes(:user)
|
|
73
|
-
end
|
|
79
|
+
end
|
|
74
80
|
|
|
81
|
+
def edit
|
|
82
|
+
@store = Store.find(params[:id])
|
|
83
|
+
end
|
|
84
|
+
|
|
85
|
+
def update
|
|
86
|
+
@store = Store.find(params[:id])
|
|
87
|
+
if @store.update(post_params)
|
|
88
|
+
redirect_to store_path(@store)
|
|
89
|
+
else
|
|
90
|
+
render :edit
|
|
91
|
+
end
|
|
92
|
+
end
|
|
93
|
+
|
|
94
|
+
def destroy
|
|
95
|
+
@store = Store.find(params[:id])
|
|
96
|
+
@store.destroy
|
|
97
|
+
redirect_to root_path
|
|
98
|
+
end
|
|
99
|
+
|
|
75
|
-
private
|
|
100
|
+
private
|
|
76
101
|
def post_params
|
|
102
|
+
params.require(:store).permit(:name, :address, :postal_code, :telephone, :url, :closing_day, :business_hour, :fee, :water, :temperature,
|
|
77
|
-
|
|
103
|
+
:roryu_status, :roryu_time, :air_bath, :break_place, :television, :bgm, :water_depth, images: [] ).merge(user_id: current_user.id)
|
|
78
104
|
end
|
|
105
|
+
end
|
|
79
106
|
```
|
|
80
107
|
|
|
81
108
|
以下投稿フォームの記述です。
|
|
82
109
|
```ruby
|
|
83
110
|
<%= form_with model: store, local: true do |f|%>
|
|
111
|
+
<div class="field">
|
|
112
|
+
<%= f.label :name, "店舗名" %><br />
|
|
113
|
+
<%= f.text_field :name, class: :form__text, id:"store_title" %>
|
|
114
|
+
</div>
|
|
84
115
|
|
|
116
|
+
<div class="field">
|
|
117
|
+
<%= f.label :postal_code, "郵便番号" %><br />
|
|
118
|
+
<%= f.text_field :postal_code, class: :form__text, id:"store_catch_copy" %>
|
|
85
|
-
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
<div class="field">
|
|
122
|
+
<%= f.label :address, "住所" %><br />
|
|
123
|
+
<%= f.text_field :address, class: :form__text, id:"store_concept" %>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
<div class="field">
|
|
127
|
+
<%= f.label :telephone, "電話番号" %><br />
|
|
128
|
+
<%= f.text_field :telephone, class: :form__text, id:"store_image" %>
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
<div class="field">
|
|
132
|
+
<%= f.label :url, "公式HP" %><br />
|
|
133
|
+
<%= f.text_field :url, class: :form__text, id:"store_concept" %>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
<div class="field">
|
|
137
|
+
<%= f.label :closing_day, "店休日" %><br />
|
|
138
|
+
<%= f.text_field :closing_day, class: :form__text, id:"store_concept" %>
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
<div class="field">
|
|
142
|
+
<%= f.label :business_hour, "営業時間" %><br />
|
|
143
|
+
<%= f.text_field :business_hour, class: :form__text, id:"store_concept" %>
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
<div class="field">
|
|
147
|
+
<%= f.label :fee, "入浴料" %><br />
|
|
148
|
+
<%= f.text_field :fee, class: :form__text, id:"store_concept" %>
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
<div class="field">
|
|
152
|
+
<%= f.label :roryu_status, "ロウリュ" %><br />
|
|
153
|
+
<%= f.text_field :roryu_status, class: :form__text, id:"store_concept" %>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
<div class="field">
|
|
157
|
+
<%= f.label :roryu_time, "ロウリュの時間" %><br />
|
|
158
|
+
<%= f.text_field :roryu_time, class: :form__text, id:"store_concept" %>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<div class="field">
|
|
162
|
+
<%= f.label :temperature, "サウナ室内の温度" %><br />
|
|
163
|
+
<%= f.text_field :temperature, class: :form__text, id:"store_concept" %>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
<div class="field">
|
|
167
|
+
<%= f.label :television, "サウナ室内のテレビ設置" %><br />
|
|
168
|
+
<%= f.text_field :television, class: :form__text, id:"store_concept" %>
|
|
169
|
+
</div>
|
|
170
|
+
|
|
171
|
+
<div class="field">
|
|
172
|
+
<%= f.label :water, "水風呂" %><br />
|
|
173
|
+
<%= f.text_field :water, class: :form__text, id:"store_concept" %>
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
<div class="field">
|
|
177
|
+
<%= f.label :water_depth, "水深" %><br />
|
|
178
|
+
<%= f.text_field :water_depth, class: :form__text, id:"store_concept" %>
|
|
179
|
+
</div>
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
<div class="field">
|
|
183
|
+
<%= f.label :air_bath, "外気浴" %><br />
|
|
184
|
+
<%= f.text_field :air_bath, class: :form__text, id:"store_concept" %>
|
|
185
|
+
</div>
|
|
186
|
+
|
|
187
|
+
<div class="field">
|
|
188
|
+
<%= f.label :break_place, "インターバル" %><br />
|
|
189
|
+
<%= f.text_field :break_place, class: :form__text, id:"store_concept" %>
|
|
190
|
+
</div>
|
|
191
|
+
|
|
192
|
+
<div class="field">
|
|
193
|
+
<%= f.label :bgm, "サウナ内BGM" %><br />
|
|
194
|
+
<%= f.text_field :bgm, class: :form__text, id:"store_concept" %>
|
|
195
|
+
</div>
|
|
196
|
+
|
|
86
197
|
<div class="field" >
|
|
87
198
|
<%= f.label :images, "店舗画像" %><br />
|
|
88
|
-
<%= f.file_field :images,
|
|
199
|
+
<%= f.file_field :images, id: "message_image", multiple: true %>
|
|
89
200
|
<div id="image-list"></div>
|
|
90
201
|
</div>
|
|
91
202
|
|
|
@@ -102,12 +213,12 @@
|
|
|
102
213
|
|
|
103
214
|
モデル内のバリデーションにて:imagesのみ削除し、画像なしで投稿できるか試してみたところその他の情報は正しく保存され、またローカル環境でも正しく表示されていました。
|
|
104
215
|
|
|
105
|
-
（
|
|
216
|
+
（追記）
|
|
106
217
|
Stores_controller.rb内のcreateアクションにて取得したparamsの中身を確認したところ、下記のように添付した画像2つは取得できているように思います。
|
|
107
|
-
|
|
218
|
+
しかしデータベースに保存されている画像は1枚のみです。
|
|
108
219
|
|
|
109
220
|
```
|
|
110
|
-
"
|
|
111
|
-
|
|
112
|
-
|
|
221
|
+
<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=#
|
|
222
|
+
<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=#
|
|
223
|
+
<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>
|
|
113
224
|
```
|
3
createアクションにて取得したparamsに変更しました。先程の追記分はupdateアクションで取得したparamsでした。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -107,6 +107,7 @@
|
|
|
107
107
|
ただ、保存されているDBを見るとID:5のレコードの中に1枚分の画像が保存されているだけのように見えました。
|
|
108
108
|
|
|
109
109
|
```
|
|
110
|
-
|
|
111
|
-
#<ActionDispatch::Http::UploadedFile:
|
|
110
|
+
"message"=>{"images"=>[
|
|
111
|
+
#<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">,
|
|
112
|
+
#<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>
|
|
112
113
|
```
|
2
createアクション内で取得されたparamsの中身について追記しています。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
情報不足であれば追加いたします。
|
|
14
14
|
よろしくお願いいたします。
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
|
|
17
17
|
### 現在発生しているエラー
|
|
18
18
|
エラー表示は出ていません。
|
|
19
19
|
投稿フォームの画像選択のほか全ての項目を埋め、送信ボタンを押すとバリデーションを通過できずにnewページがレンダリングされます。
|
|
@@ -78,7 +78,6 @@
|
|
|
78
78
|
end
|
|
79
79
|
```
|
|
80
80
|
|
|
81
|
-
（追記）
|
|
82
81
|
以下投稿フォームの記述です。
|
|
83
82
|
```ruby
|
|
84
83
|
<%= form_with model: store, local: true do |f|%>
|
|
@@ -96,6 +95,18 @@
|
|
|
96
95
|
<% end %>
|
|
97
96
|
```
|
|
98
97
|
|
|
98
|
+
（さらに追記分）
|
|
99
|
+
|
|
100
|
+
|
|
99
101
|
### 試したこと
|
|
100
102
|
|
|
101
|
-
モデル内のバリデーションにて:imagesのみ削除し、画像なしで投稿できるか試してみたところその他の情報は正しく保存され、またローカル環境でも正しく表示されていました。
|
|
103
|
+
モデル内のバリデーションにて:imagesのみ削除し、画像なしで投稿できるか試してみたところその他の情報は正しく保存され、またローカル環境でも正しく表示されていました。
|
|
104
|
+
|
|
105
|
+
（さらに追記）
|
|
106
|
+
Stores_controller.rb内のcreateアクションにて取得したparamsの中身を確認したところ、下記のように添付した画像2つは取得できているように思います。
|
|
107
|
+
ただ、保存されているDBを見るとID:5のレコードの中に1枚分の画像が保存されているだけのように見えました。
|
|
108
|
+
|
|
109
|
+
```
|
|
110
|
+
#<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">,
|
|
111
|
+
#<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>
|
|
112
|
+
```
|
1
現在発生しているエラー、投稿フォームのviewについて追記しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -13,8 +13,13 @@
|
|
|
13
13
|
情報不足であれば追加いたします。
|
|
14
14
|
よろしくお願いいたします。
|
|
15
15
|
|
|
16
|
+
（追記）
|
|
17
|
+
### 現在発生しているエラー
|
|
18
|
+
エラー表示は出ていません。
|
|
19
|
+
投稿フォームの画像選択のほか全ての項目を埋め、送信ボタンを押すとバリデーションを通過できずにnewページがレンダリングされます。
|
|
20
|
+
|
|
16
21
|
### 該当のソースコード
|
|
17
|
-
|
|
22
|
+
|
|
18
23
|
下記はトップページのviewです。
|
|
19
24
|
```ruby
|
|
20
25
|
<div class="messages">
|
|
@@ -23,7 +28,7 @@
|
|
|
23
28
|
<% end %>
|
|
24
29
|
</div>
|
|
25
30
|
```
|
|
26
|
-
|
|
31
|
+
|
|
27
32
|
こちらは詳細ページのviewです。
|
|
28
33
|
```ruby
|
|
29
34
|
<% @store.images.each do |image| %>
|
|
@@ -32,8 +37,8 @@
|
|
|
32
37
|
</div>
|
|
33
38
|
<% end %>
|
|
34
39
|
```
|
|
35
|
-
|
|
40
|
+
|
|
36
|
-
こちらは
|
|
41
|
+
こちらはstore.rb内の記述です。（バリデーションの記述が長いので一部省略しています。）
|
|
37
42
|
```ruby
|
|
38
43
|
has_many :comments, dependent: :destroy
|
|
39
44
|
has_many :goods, dependent: :destroy
|
|
@@ -44,9 +49,9 @@
|
|
|
44
49
|
validates :name, （中略） ,:bgm, :images
|
|
45
50
|
end
|
|
46
51
|
```
|
|
52
|
+
|
|
47
|
-
|
|
53
|
+
下記はstores_controller.rb内の記述です。（投稿と画像の反映に関係しそうなactionのみ記述しています。）
|
|
48
|
-
|
|
49
|
-
```ruby
|
|
54
|
+
```ruby
|
|
50
55
|
def index
|
|
51
56
|
@store = Store.includes(:user)
|
|
52
57
|
end
|
|
@@ -72,6 +77,25 @@
|
|
|
72
77
|
params.require(:store).permit(:name, {中略} ,:bgm, images: [] ).merge(user_id: current_user.id)
|
|
73
78
|
end
|
|
74
79
|
```
|
|
80
|
+
|
|
81
|
+
（追記）
|
|
82
|
+
以下投稿フォームの記述です。
|
|
83
|
+
```ruby
|
|
84
|
+
<%= form_with model: store, local: true do |f|%>
|
|
85
|
+
|
|
86
|
+
（中略）
|
|
87
|
+
<div class="field" >
|
|
88
|
+
<%= f.label :images, "店舗画像" %><br />
|
|
89
|
+
<%= f.file_field :images, name: 'message[images][]', id:"store_image" %>
|
|
90
|
+
<div id="image-list"></div>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
<div class="actions">
|
|
94
|
+
<%= f.submit "登録する", class: :form__btn %>
|
|
95
|
+
</div>
|
|
96
|
+
<% end %>
|
|
97
|
+
```
|
|
98
|
+
|
|
75
99
|
### 試したこと
|
|
76
100
|
|
|
77
101
|
モデル内のバリデーションにて:imagesのみ削除し、画像なしで投稿できるか試してみたところその他の情報は正しく保存され、またローカル環境でも正しく表示されていました。
|