質問編集履歴
3
内容訂正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
【Rails】
|
|
1
|
+
【Rails】画像データをドラッグ&ドロップでアップする方法
|
body
CHANGED
|
@@ -1,210 +1,110 @@
|
|
|
1
|
+
######ドラッグ&ドロップでのファイルアップロードに苦戦しています。
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
ファイルのアップロードはgem'Dropzonejs'を使っています。
|
|
5
|
+
|
|
6
|
+
店舗を検索するサイトを作っており、住所等の店舗情報を入力するフォーム内に、同時に画像データも保存させるようにしたいと考えております。
|
|
7
|
+
|
|
8
|
+
ただ残念ながらDropzonejsはデフォルトではデータをドラッグしたタイミングに保存されるようになっています。
|
|
9
|
+
そのため、shop.newの時点でshop_idを持たないimageをそのまま保存することが出来ない状況です。
|
|
10
|
+
|
|
11
|
+
現状、shopをcreate後、shoop_idを用いて@shop.images.buildしてnewページを出していますが、店舗情報と画像登録画面が別になっておりスマートな方法ではありません。
|
|
12
|
+
これをドラッグしたタイミング→データの保持、保存ボタンを押したタイミング→データを保存というように変更したいと考えています。
|
|
13
|
+
|
|
14
|
+
①Dropzonejsのjsファイルをカスタマイズする
|
|
15
|
+
②Dropzonejsは使わずに、独自でドラッグ&ドロップフォームを作る
|
|
16
|
+
のいずれかが解決方法となるかと思います。
|
|
17
|
+
グーグルで検索しても目ぼしい情報が得られずにいますので、ご教示頂けますと幸いです。
|
|
1
18
|
###環境
|
|
2
19
|
Ruby2.3.3
|
|
3
20
|
Rails5.0.1
|
|
4
21
|
|
|
5
22
|
###Gem
|
|
6
23
|
gem 'dropzonejs-rails'
|
|
24
|
+
###モデル
|
|
25
|
+
Shop→imageをネストしています。
|
|
7
26
|
|
|
27
|
+
shop(店舗)モデル
|
|
28
|
+
|id|name|address||
|
|
29
|
+
|:--:|:--:|:--:|
|
|
8
|
-
|
|
30
|
+
|1|店舗名|住所|
|
|
9
|
-
Railsのファイルのアップロードでgem'Dropzonejs'を使っています。
|
|
10
|
-
店舗を検索するサイトを作っており、店舗名や住所データと同時に画像データも保存させるようにしたいと考えております。
|
|
11
|
-
なお、店舗モデル(shop)と画像モデル(shop_image)を分けており、リレーションは「shop has_many shop_images」としています。
|
|
12
31
|
|
|
13
|
-
|
|
32
|
+
image(画像)モデル
|
|
14
|
-
|
|
33
|
+
|id|shop_id|file|
|
|
15
|
-
|
|
34
|
+
|:--:|:--:|:--:|
|
|
35
|
+
|1|1|file|
|
|
16
36
|
|
|
37
|
+
###該当箇所のコード
|
|
38
|
+
routes.rb
|
|
39
|
+
```ruby
|
|
40
|
+
resources :shops, only: [:show] do
|
|
17
|
-
|
|
41
|
+
resources :images, only: [:new, :create, :destroy] do
|
|
18
|
-
|
|
42
|
+
collection do
|
|
43
|
+
post :upload
|
|
44
|
+
end
|
|
45
|
+
end
|
|
46
|
+
end
|
|
47
|
+
```
|
|
19
48
|
|
|
49
|
+
shop.rb
|
|
50
|
+
```ruby
|
|
51
|
+
class Shop < ApplicationRecord
|
|
52
|
+
has_many :images, dependent: :destroy
|
|
53
|
+
end
|
|
54
|
+
```
|
|
20
55
|
|
|
56
|
+
image.rb
|
|
57
|
+
```ruby
|
|
58
|
+
class ShopImage < ApplicationRecord
|
|
59
|
+
belongs_to :shop, optional: true
|
|
60
|
+
mount_uploader :file, ImageUploader
|
|
61
|
+
end
|
|
62
|
+
```
|
|
21
63
|
|
|
22
|
-
|
|
64
|
+
shops_controller.rb
|
|
23
|
-
```
|
|
65
|
+
```ruby
|
|
24
|
-
Dropzone.prototype.defaultOptions = {
|
|
25
|
-
url: null,
|
|
26
|
-
method: "post",
|
|
27
|
-
withCredentials: false,
|
|
28
|
-
parallelUploads: 2,
|
|
29
|
-
uploadMultiple: false,
|
|
30
|
-
maxFilesize: 256,
|
|
31
|
-
paramName: "file",
|
|
32
|
-
createImageThumbnails: true,
|
|
33
|
-
maxThumbnailFilesize: 10,
|
|
34
|
-
thumbnailWidth: 120,
|
|
35
|
-
thumbnailHeight: 120,
|
|
36
|
-
filesizeBase: 1000,
|
|
37
|
-
maxFiles: null,
|
|
38
|
-
params: {},
|
|
39
|
-
clickable: true,
|
|
40
|
-
ignoreHiddenFiles: true,
|
|
41
|
-
acceptedFiles: null,
|
|
42
|
-
acceptedMimeTypes: null,
|
|
43
|
-
autoProcessQueue: true,
|
|
44
|
-
autoQueue: true,
|
|
45
|
-
addRemoveLinks: false,
|
|
46
|
-
previewsContainer: null,
|
|
47
|
-
hiddenInputContainer: "body",
|
|
48
|
-
capture: null,
|
|
49
|
-
renameFilename: null,
|
|
50
|
-
dictDefaultMessage: "Drop files here to upload",
|
|
51
|
-
dictFallbackMessage: "Your browser does not support drag'n'drop file uploads.",
|
|
52
|
-
dictFallbackText: "Please use the fallback form below to upload your files like in the olden days.",
|
|
53
|
-
dictFileTooBig: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
|
|
54
|
-
dictInvalidFileType: "You can't upload files of this type.",
|
|
55
|
-
dictResponseError: "Server responded with {{statusCode}} code.",
|
|
56
|
-
dictCancelUpload: "Cancel upload",
|
|
57
|
-
dictCancelUploadConfirmation: "Are you sure you want to cancel this upload?",
|
|
58
|
-
dictRemoveFile: "Remove file",
|
|
59
|
-
dictRemoveFileConfirmation: null,
|
|
60
|
-
dictMaxFilesExceeded: "You can not upload any more files.",
|
|
61
|
-
accept: function(file, done) {
|
|
62
|
-
return done();
|
|
63
|
-
},
|
|
64
|
-
init: function() {
|
|
65
|
-
return noop;
|
|
66
|
-
},
|
|
67
|
-
forceFallback: false,
|
|
68
|
-
fallback: function() {
|
|
69
|
-
var child, messageElement, span, _i, _len, _ref;
|
|
70
|
-
this.element.className = "" + this.element.className + " dz-browser-not-supported";
|
|
71
|
-
_ref = this.element.getElementsByTagName("div");
|
|
72
|
-
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
|
|
73
|
-
child = _ref[_i];
|
|
74
|
-
if (/(^| )dz-message($| )/.test(child.className)) {
|
|
75
|
-
messageElement = child;
|
|
76
|
-
child.className = "dz-message";
|
|
77
|
-
continue;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
if (!messageElement) {
|
|
81
|
-
messageElement = Dropzone.createElement("<div class=\"dz-message\"><span></span></div>");
|
|
82
|
-
this.element.appendChild(messageElement);
|
|
83
|
-
}
|
|
84
|
-
span = messageElement.getElementsByTagName("span")[0];
|
|
85
|
-
|
|
66
|
+
def create
|
|
86
|
-
if (span.textContent != null) {
|
|
87
|
-
span.textContent = this.options.dictFallbackMessage;
|
|
88
|
-
} else if (span.innerText != null) {
|
|
89
|
-
|
|
67
|
+
@shop = current_user.shops.build(shop_params)
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
return this.element.appendChild(this.getFallbackForm());
|
|
93
|
-
},
|
|
94
|
-
|
|
68
|
+
respond_to do |format|
|
|
95
|
-
var info, srcRatio, trgRatio;
|
|
96
|
-
info = {
|
|
97
|
-
srcX: 0,
|
|
98
|
-
srcY: 0,
|
|
99
|
-
srcWidth: file.width,
|
|
100
|
-
srcHeight: file.height
|
|
101
|
-
};
|
|
102
|
-
srcRatio = file.width / file.height;
|
|
103
|
-
info.optWidth = this.options.thumbnailWidth;
|
|
104
|
-
info.optHeight = this.options.thumbnailHeight;
|
|
105
|
-
if (
|
|
69
|
+
if verify_recaptcha(model: @shop) && @shop.save
|
|
106
|
-
info.optWidth = info.srcWidth;
|
|
107
|
-
info.optHeight = info.srcHeight;
|
|
108
|
-
} else if (info.optWidth == null) {
|
|
109
|
-
info.optWidth = srcRatio * info.optHeight;
|
|
110
|
-
} else if (info.optHeight == null) {
|
|
111
|
-
|
|
70
|
+
format.html { redirect_to "/shops/#{@shop.id}/images/new", notice: '画像を登録してください。' }
|
|
112
|
-
}
|
|
113
|
-
trgRatio = info.optWidth / info.optHeight;
|
|
114
|
-
|
|
71
|
+
format.json { render :show, status: :created, location: @shop }
|
|
115
|
-
info.trgHeight = info.srcHeight;
|
|
116
|
-
info.trgWidth = info.srcWidth;
|
|
117
|
-
|
|
72
|
+
else
|
|
118
|
-
if (srcRatio > trgRatio) {
|
|
119
|
-
|
|
73
|
+
format.html { render :new }
|
|
120
|
-
info.srcWidth = info.srcHeight * trgRatio;
|
|
121
|
-
} else {
|
|
122
|
-
info.srcWidth = file.width;
|
|
123
|
-
|
|
74
|
+
format.json { render json: @shop.errors, status: :unprocessable_entity }
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
info.srcX = (file.width - info.srcWidth) / 2;
|
|
127
|
-
info.srcY = (file.height - info.srcHeight) / 2;
|
|
128
|
-
return info;
|
|
129
|
-
|
|
75
|
+
end
|
|
76
|
+
end
|
|
77
|
+
end
|
|
78
|
+
```
|
|
130
79
|
|
|
131
|
-
/*
|
|
132
|
-
Those functions register themselves to the events on init and handle all
|
|
133
|
-
the user interface specific stuff. Overwriting them won't break the upload
|
|
134
|
-
but can break the way it's displayed.
|
|
135
|
-
You can overwrite them if you don't like the default behavior. If you just
|
|
136
|
-
want to add an additional event handler, register it on the dropzone object
|
|
137
|
-
and don't overwrite those options.
|
|
138
|
-
*/
|
|
139
|
-
drop: function(e) {
|
|
140
|
-
return this.element.classList.remove("dz-drag-hover");
|
|
141
|
-
},
|
|
142
|
-
dragstart: noop,
|
|
143
|
-
|
|
80
|
+
image_controller.rb
|
|
81
|
+
```ruby
|
|
82
|
+
def upload
|
|
83
|
+
@shop = Shop.find(params[:shop_id])
|
|
144
|
-
|
|
84
|
+
image = @shop.images.build(file: params['file'])
|
|
85
|
+
image.save!
|
|
86
|
+
render status: 200, json: @shop.images
|
|
145
|
-
|
|
87
|
+
end
|
|
88
|
+
```
|
|
89
|
+
|
|
146
|
-
|
|
90
|
+
images/new.html.erb
|
|
91
|
+
```
|
|
92
|
+
<h1>画像の登録</h1>
|
|
93
|
+
|
|
94
|
+
<%= render 'form' %>
|
|
95
|
+
|
|
147
|
-
|
|
96
|
+
<% @shop.images.each do |image| %>
|
|
148
|
-
},
|
|
149
|
-
dragover: function(e) {
|
|
150
|
-
return this.element.classList.add("dz-drag-hover");
|
|
151
|
-
},
|
|
152
|
-
dragleave: function(e) {
|
|
153
|
-
return this.element.classList.remove("dz-drag-hover");
|
|
154
|
-
},
|
|
155
|
-
paste: noop,
|
|
156
|
-
reset: function() {
|
|
157
|
-
|
|
97
|
+
<div id="image_<%=image.id%>">
|
|
98
|
+
<%= image_tag(image.file.url, :width => '200px') %>
|
|
99
|
+
<%= link_to content_tag(:i, '', class: 'fa fa-trash'), image_path(@shop, image), method: :delete, data: { confirm: "本当に削除してもよろしいですか" }, class: "image_delete", remote: true %>
|
|
100
|
+
</div>
|
|
101
|
+
<% end %>
|
|
158
|
-
|
|
102
|
+
```
|
|
103
|
+
|
|
159
|
-
|
|
104
|
+
images/_form.html.erb
|
|
160
|
-
var node, removeFileEvent, removeLink, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _results;
|
|
161
|
-
|
|
105
|
+
```html
|
|
162
|
-
|
|
106
|
+
<div class="fallback">
|
|
163
|
-
}
|
|
164
|
-
if (this.previewsContainer) {
|
|
165
|
-
file.previewElement = Dropzone.createElement(this.options.previewTemplate.trim());
|
|
166
|
-
file.previewTemplate = file.previewElement;
|
|
167
|
-
this.previewsContainer.appendChild(file.previewElement);
|
|
168
|
-
_ref = file.previewElement.querySelectorAll("[data-dz-name]");
|
|
169
|
-
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
|
|
170
|
-
node = _ref[_i];
|
|
171
|
-
node.textContent = this._renameFilename(file.name);
|
|
172
|
-
}
|
|
173
|
-
_ref1 = file.previewElement.querySelectorAll("[data-dz-size]");
|
|
174
|
-
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
|
|
175
|
-
node = _ref1[_j];
|
|
176
|
-
node.innerHTML = this.filesize(file.size);
|
|
177
|
-
}
|
|
178
|
-
if (this.options.addRemoveLinks) {
|
|
179
|
-
file._removeLink = Dropzone.createElement("<a class=\"dz-remove\" href=\"javascript:undefined;\" data-dz-remove>" + this.options.dictRemoveFile + "</a>");
|
|
180
|
-
file.previewElement.appendChild(file._removeLink);
|
|
181
|
-
}
|
|
182
|
-
removeFileEvent = (function(_this) {
|
|
183
|
-
return function(e) {
|
|
184
|
-
e.preventDefault();
|
|
185
|
-
e.stopPropagation();
|
|
186
|
-
if (file.status === Dropzone.UPLOADING) {
|
|
187
|
-
return Dropzone.confirm(_this.options.dictCancelUploadConfirmation, function() {
|
|
188
|
-
return _this.removeFile(file);
|
|
189
|
-
});
|
|
190
|
-
} else {
|
|
191
|
-
if (_this.options.dictRemoveFileConfirmation) {
|
|
192
|
-
return Dropzone.confirm(_this.options.dictRemoveFileConfirmation, function() {
|
|
193
|
-
return _this.removeFile(file);
|
|
194
|
-
});
|
|
195
|
-
} else {
|
|
196
|
-
return _this.removeFile(file);
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
};
|
|
200
|
-
})(this);
|
|
201
|
-
_ref2 = file.previewElement.querySelectorAll("[data-dz-remove]");
|
|
202
|
-
_results = [];
|
|
203
|
-
for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
|
|
204
|
-
removeLink = _ref2[_k];
|
|
205
|
-
|
|
107
|
+
<%= form_tag(upload_shop_images_path(@shop, remote: true),
|
|
206
|
-
|
|
108
|
+
:id => 'upload-dropzone', :class => 'dropzone', method: :post) %>
|
|
207
|
-
|
|
109
|
+
</div>
|
|
208
|
-
}
|
|
209
|
-
},
|
|
210
110
|
```
|
2
モデルのリレーションについて追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,8 +7,11 @@
|
|
|
7
7
|
|
|
8
8
|
###問題
|
|
9
9
|
Railsのファイルのアップロードでgem'Dropzonejs'を使っています。
|
|
10
|
-
|
|
10
|
+
店舗を検索するサイトを作っており、店舗名や住所データと同時に画像データも保存させるようにしたいと考えております。
|
|
11
|
+
なお、店舗モデル(shop)と画像モデル(shop_image)を分けており、リレーションは「shop has_many shop_images」としています。
|
|
12
|
+
|
|
11
|
-
な
|
|
13
|
+
残念ながらDropzonejsはデフォルトではデータをドラッグしたタイミングに保存されるようになっています。
|
|
14
|
+
そのため、shop_idを持たないshop_imageをそのまま保存することが出来ない状況です。
|
|
12
15
|
これをドラッグしたタイミング→データの保持、保存ボタンを押したタイミング→データを保存というように変更したいと考えています。
|
|
13
16
|
|
|
14
17
|
以下JSファイルのどこかを編集すれば良いのだと思いますが、当方JSの知識がほぼゼロでございます。。
|
1
誤字を訂正しました。
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
【Rails】
|
|
1
|
+
【Rails】Dropzonejsでデータを保存するタイミングの変更方法
|
body
CHANGED
|
@@ -1,155 +1,207 @@
|
|
|
1
|
+
###環境
|
|
2
|
+
Ruby2.3.3
|
|
1
|
-
|
|
3
|
+
Rails5.0.1
|
|
2
4
|
|
|
5
|
+
###Gem
|
|
3
|
-
|
|
6
|
+
gem 'dropzonejs-rails'
|
|
4
7
|
|
|
8
|
+
###問題
|
|
9
|
+
Railsのファイルのアップロードでgem'Dropzonejs'を使っています。
|
|
10
|
+
フォーム内で他のデータと同じタイミングで画像データを保存できるようにしたいです。
|
|
5
|
-
|
|
11
|
+
なお、デフォルトではデータをドラッグしたタイミング→保存されるようになっています。
|
|
6
|
-
|
|
12
|
+
これをドラッグしたタイミング→データの保持、保存ボタンを押したタイミング→データを保存というように変更したいと考えています。
|
|
7
13
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
ActionView::MissingTemplate (Missing template shops/create, application/create with {:locale=>[:en], :formats=>[:all], :variants=>[], :handlers=>[:erb, :builder, :raw, :ruby, :coffee, :arb, :jbuilder]}. Searched in:
|
|
11
|
-
```
|
|
12
|
-
とありますので、テンプレートが見つからないが原因部分かと見ています。
|
|
13
|
-
その対策としてコントローラに挙動を指定しました。
|
|
14
|
-
```Ruby
|
|
15
|
-
format.any
|
|
16
|
-
format.html { render html: @shop }
|
|
17
|
-
format.json { render json: @shop }
|
|
18
|
-
```
|
|
14
|
+
以下JSファイルのどこかを編集すれば良いのだと思いますが、当方JSの知識がほぼゼロでございます。。
|
|
15
|
+
グーグルで検索しても目ぼしい情報が得られずにいますので、ご教示頂けますと幸いです。
|
|
19
16
|
|
|
20
|
-
ですが、上記のエラーは変わらずに出てしまいます。
|
|
21
|
-
恐れ入りますが不足している点を教えていただけませんでしょうか。
|
|
22
17
|
|
|
23
18
|
|
|
24
|
-
---
|
|
25
|
-
|
|
26
|
-
以下元ファイルです。
|
|
27
|
-
```
|
|
28
|
-
#Gemをインストール
|
|
29
|
-
gem 'dropzonejs-rails', '~> 0.7.3'
|
|
30
|
-
```
|
|
31
|
-
|
|
19
|
+
###恐らく編集すべきファイル「dropzone.js」のこの部分であろう一部を抜粋
|
|
32
20
|
```JavaScript
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
21
|
+
Dropzone.prototype.defaultOptions = {
|
|
22
|
+
url: null,
|
|
23
|
+
method: "post",
|
|
24
|
+
withCredentials: false,
|
|
25
|
+
parallelUploads: 2,
|
|
26
|
+
uploadMultiple: false,
|
|
27
|
+
maxFilesize: 256,
|
|
28
|
+
paramName: "file",
|
|
29
|
+
createImageThumbnails: true,
|
|
30
|
+
maxThumbnailFilesize: 10,
|
|
31
|
+
thumbnailWidth: 120,
|
|
32
|
+
thumbnailHeight: 120,
|
|
33
|
+
filesizeBase: 1000,
|
|
34
|
+
maxFiles: null,
|
|
35
|
+
params: {},
|
|
36
|
+
clickable: true,
|
|
37
|
+
ignoreHiddenFiles: true,
|
|
38
|
+
acceptedFiles: null,
|
|
39
|
+
acceptedMimeTypes: null,
|
|
40
|
+
autoProcessQueue: true,
|
|
41
|
+
autoQueue: true,
|
|
42
|
+
addRemoveLinks: false,
|
|
43
|
+
previewsContainer: null,
|
|
44
|
+
hiddenInputContainer: "body",
|
|
45
|
+
capture: null,
|
|
46
|
+
renameFilename: null,
|
|
47
|
+
dictDefaultMessage: "Drop files here to upload",
|
|
48
|
+
dictFallbackMessage: "Your browser does not support drag'n'drop file uploads.",
|
|
49
|
+
dictFallbackText: "Please use the fallback form below to upload your files like in the olden days.",
|
|
50
|
+
dictFileTooBig: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
|
|
51
|
+
dictInvalidFileType: "You can't upload files of this type.",
|
|
52
|
+
dictResponseError: "Server responded with {{statusCode}} code.",
|
|
53
|
+
dictCancelUpload: "Cancel upload",
|
|
54
|
+
dictCancelUploadConfirmation: "Are you sure you want to cancel this upload?",
|
|
55
|
+
dictRemoveFile: "Remove file",
|
|
56
|
+
dictRemoveFileConfirmation: null,
|
|
57
|
+
dictMaxFilesExceeded: "You can not upload any more files.",
|
|
58
|
+
accept: function(file, done) {
|
|
59
|
+
return done();
|
|
60
|
+
},
|
|
61
|
+
init: function() {
|
|
62
|
+
return noop;
|
|
63
|
+
},
|
|
64
|
+
forceFallback: false,
|
|
65
|
+
fallback: function() {
|
|
66
|
+
var child, messageElement, span, _i, _len, _ref;
|
|
67
|
+
this.element.className = "" + this.element.className + " dz-browser-not-supported";
|
|
68
|
+
_ref = this.element.getElementsByTagName("div");
|
|
69
|
+
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
|
|
70
|
+
child = _ref[_i];
|
|
71
|
+
if (/(^| )dz-message($| )/.test(child.className)) {
|
|
72
|
+
messageElement = child;
|
|
73
|
+
child.className = "dz-message";
|
|
74
|
+
continue;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
if (!messageElement) {
|
|
78
|
+
messageElement = Dropzone.createElement("<div class=\"dz-message\"><span></span></div>");
|
|
79
|
+
this.element.appendChild(messageElement);
|
|
80
|
+
}
|
|
81
|
+
span = messageElement.getElementsByTagName("span")[0];
|
|
82
|
+
if (span) {
|
|
83
|
+
if (span.textContent != null) {
|
|
84
|
+
span.textContent = this.options.dictFallbackMessage;
|
|
85
|
+
} else if (span.innerText != null) {
|
|
86
|
+
span.innerText = this.options.dictFallbackMessage;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
return this.element.appendChild(this.getFallbackForm());
|
|
90
|
+
},
|
|
91
|
+
resize: function(file) {
|
|
92
|
+
var info, srcRatio, trgRatio;
|
|
93
|
+
info = {
|
|
94
|
+
srcX: 0,
|
|
95
|
+
srcY: 0,
|
|
96
|
+
srcWidth: file.width,
|
|
97
|
+
srcHeight: file.height
|
|
98
|
+
};
|
|
99
|
+
srcRatio = file.width / file.height;
|
|
100
|
+
info.optWidth = this.options.thumbnailWidth;
|
|
101
|
+
info.optHeight = this.options.thumbnailHeight;
|
|
102
|
+
if ((info.optWidth == null) && (info.optHeight == null)) {
|
|
103
|
+
info.optWidth = info.srcWidth;
|
|
104
|
+
info.optHeight = info.srcHeight;
|
|
105
|
+
} else if (info.optWidth == null) {
|
|
106
|
+
info.optWidth = srcRatio * info.optHeight;
|
|
107
|
+
} else if (info.optHeight == null) {
|
|
108
|
+
info.optHeight = (1 / srcRatio) * info.optWidth;
|
|
109
|
+
}
|
|
110
|
+
trgRatio = info.optWidth / info.optHeight;
|
|
111
|
+
if (file.height < info.optHeight || file.width < info.optWidth) {
|
|
112
|
+
info.trgHeight = info.srcHeight;
|
|
113
|
+
info.trgWidth = info.srcWidth;
|
|
114
|
+
} else {
|
|
115
|
+
if (srcRatio > trgRatio) {
|
|
116
|
+
info.srcHeight = file.height;
|
|
117
|
+
info.srcWidth = info.srcHeight * trgRatio;
|
|
118
|
+
} else {
|
|
119
|
+
info.srcWidth = file.width;
|
|
120
|
+
info.srcHeight = info.srcWidth / trgRatio;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
info.srcX = (file.width - info.srcWidth) / 2;
|
|
124
|
+
info.srcY = (file.height - info.srcHeight) / 2;
|
|
125
|
+
return info;
|
|
126
|
+
},
|
|
57
127
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
)
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT 1 [["id", 1]]
|
|
138
|
-
Unpermitted parameter: name_en
|
|
139
|
-
(0.1ms) begin transaction
|
|
140
|
-
SQL (0.5ms) INSERT INTO "shops" ("name", "user_id", "created_at", "updated_at") VALUES (?, ?, ?, ?) [["name", "テスト"], ["user_id", 1], ["created_at", "2016-12-30 03:47:00.724796"], ["updated_at", "2016-12-30 03:47:00.724796"]]
|
|
141
|
-
(2.3ms) commit transaction
|
|
142
|
-
Completed 500 Internal Server Error in 51ms (ActiveRecord: 3.3ms)
|
|
143
|
-
|
|
144
|
-
ActionView::MissingTemplate (Missing template shops/create, application/create with {:locale=>[:en], :formats=>[:all], :variants=>[], :handlers=>[:erb, :builder, :raw, :ruby, :coffee, :arb, :jbuilder]}. Searched in:
|
|
145
|
-
* "/Users/yousukesatou/projects/HerokuApp/app/views"
|
|
146
|
-
* "/Users/yousukesatou/projects/HerokuApp/vendor/bundle/ruby/2.3.0/bundler/gems/active_admin-4f494073c6c0/app/views"
|
|
147
|
-
* "/Users/yousukesatou/projects/HerokuApp/vendor/bundle/ruby/2.3.0/gems/twitter-bootstrap-rails-3.2.2/app/views"
|
|
148
|
-
* "/Users/yousukesatou/projects/HerokuApp/vendor/bundle/ruby/2.3.0/gems/devise-3.5.1/app/views"
|
|
149
|
-
* "/Users/yousukesatou/projects/HerokuApp/vendor/bundle/ruby/2.3.0/gems/kaminari-0.15.1/app/views"
|
|
150
|
-
):
|
|
151
|
-
app/controllers/shops_controller.rb:60:in `create'
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
Rendered vendor/bundle/ruby/2.3.0/gems/actionpack-4.2.4/lib/action_dispatch/middleware/templates/rescues/missing_template.text.erb (0.4ms)
|
|
128
|
+
/*
|
|
129
|
+
Those functions register themselves to the events on init and handle all
|
|
130
|
+
the user interface specific stuff. Overwriting them won't break the upload
|
|
131
|
+
but can break the way it's displayed.
|
|
132
|
+
You can overwrite them if you don't like the default behavior. If you just
|
|
133
|
+
want to add an additional event handler, register it on the dropzone object
|
|
134
|
+
and don't overwrite those options.
|
|
135
|
+
*/
|
|
136
|
+
drop: function(e) {
|
|
137
|
+
return this.element.classList.remove("dz-drag-hover");
|
|
138
|
+
},
|
|
139
|
+
dragstart: noop,
|
|
140
|
+
dragend: function(e) {
|
|
141
|
+
return this.element.classList.remove("dz-drag-hover");
|
|
142
|
+
},
|
|
143
|
+
dragenter: function(e) {
|
|
144
|
+
return this.element.classList.add("dz-drag-hover");
|
|
145
|
+
},
|
|
146
|
+
dragover: function(e) {
|
|
147
|
+
return this.element.classList.add("dz-drag-hover");
|
|
148
|
+
},
|
|
149
|
+
dragleave: function(e) {
|
|
150
|
+
return this.element.classList.remove("dz-drag-hover");
|
|
151
|
+
},
|
|
152
|
+
paste: noop,
|
|
153
|
+
reset: function() {
|
|
154
|
+
return this.element.classList.remove("dz-started");
|
|
155
|
+
},
|
|
156
|
+
addedfile: function(file) {
|
|
157
|
+
var node, removeFileEvent, removeLink, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _results;
|
|
158
|
+
if (this.element === this.previewsContainer) {
|
|
159
|
+
this.element.classList.add("dz-started");
|
|
160
|
+
}
|
|
161
|
+
if (this.previewsContainer) {
|
|
162
|
+
file.previewElement = Dropzone.createElement(this.options.previewTemplate.trim());
|
|
163
|
+
file.previewTemplate = file.previewElement;
|
|
164
|
+
this.previewsContainer.appendChild(file.previewElement);
|
|
165
|
+
_ref = file.previewElement.querySelectorAll("[data-dz-name]");
|
|
166
|
+
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
|
|
167
|
+
node = _ref[_i];
|
|
168
|
+
node.textContent = this._renameFilename(file.name);
|
|
169
|
+
}
|
|
170
|
+
_ref1 = file.previewElement.querySelectorAll("[data-dz-size]");
|
|
171
|
+
for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
|
|
172
|
+
node = _ref1[_j];
|
|
173
|
+
node.innerHTML = this.filesize(file.size);
|
|
174
|
+
}
|
|
175
|
+
if (this.options.addRemoveLinks) {
|
|
176
|
+
file._removeLink = Dropzone.createElement("<a class=\"dz-remove\" href=\"javascript:undefined;\" data-dz-remove>" + this.options.dictRemoveFile + "</a>");
|
|
177
|
+
file.previewElement.appendChild(file._removeLink);
|
|
178
|
+
}
|
|
179
|
+
removeFileEvent = (function(_this) {
|
|
180
|
+
return function(e) {
|
|
181
|
+
e.preventDefault();
|
|
182
|
+
e.stopPropagation();
|
|
183
|
+
if (file.status === Dropzone.UPLOADING) {
|
|
184
|
+
return Dropzone.confirm(_this.options.dictCancelUploadConfirmation, function() {
|
|
185
|
+
return _this.removeFile(file);
|
|
186
|
+
});
|
|
187
|
+
} else {
|
|
188
|
+
if (_this.options.dictRemoveFileConfirmation) {
|
|
189
|
+
return Dropzone.confirm(_this.options.dictRemoveFileConfirmation, function() {
|
|
190
|
+
return _this.removeFile(file);
|
|
191
|
+
});
|
|
192
|
+
} else {
|
|
193
|
+
return _this.removeFile(file);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
};
|
|
197
|
+
})(this);
|
|
198
|
+
_ref2 = file.previewElement.querySelectorAll("[data-dz-remove]");
|
|
199
|
+
_results = [];
|
|
200
|
+
for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
|
|
201
|
+
removeLink = _ref2[_k];
|
|
202
|
+
_results.push(removeLink.addEventListener("click", removeFileEvent));
|
|
203
|
+
}
|
|
204
|
+
return _results;
|
|
205
|
+
}
|
|
206
|
+
},
|
|
155
207
|
```
|