質問編集履歴
5
試してみたことを追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
どうすればこのコールバックがきちんと呼ばれるようになるか、アドバイスをお願いいたします。
|
|
22
22
|
|
|
23
23
|
**【追記】s3へのアップロードが完了しないまま、ページが遷移してしまうことが原因のようです。submitボタンをクリックした際に、js側でs3へのアップロードを完了させたあとに、フォームをサーバーに提出させるには、どうすればいいでしょうか？**
|
|
24
|
-
|
|
24
|
+
→**【追記2】formのsubmitを一度中断し、アップロード完了後に再開させるという処理を思いつきました。**中断はできるのですが、再開がうまくできません。「試したこと」欄に詳述するので、アドバイスいただきたいです。
|
|
25
25
|
### 該当のソースコード
|
|
26
26
|
|
|
27
27
|
```javascript
|
|
@@ -140,52 +140,62 @@
|
|
|
140
140
|
```
|
|
141
141
|
|
|
142
142
|
#試してみたこと
|
|
143
|
+
submitボタンがクリックされた際に、一度formのsubmitを中断
|
|
144
|
+
→画像のアップロード完了後に再開、という手段を試みました。
|
|
143
|
-
以下のように
|
|
145
|
+
以下のようにコードを修正し、中断させることには成功しましたが、画像のアップロード完了後にformのsubmitをもう一度有効化することができていません。
|
|
146
|
+
何故有効化できないのでしょうか？ご意見をいただきたいです。
|
|
144
147
|
|
|
145
148
|
```javascript
|
|
146
149
|
$(function() {
|
|
150
|
+
...
|
|
151
|
+
add: function(e, data){
|
|
152
|
+
...
|
|
153
|
+
submitButton.on('click', function(){
|
|
154
|
+
//一度submitを中断させる
|
|
155
|
+
$('form').submit(function(){
|
|
156
|
+
return false;
|
|
157
|
+
});
|
|
158
|
+
// crop のデータを取得
|
|
159
|
+
$('#crop_img').cropper('getCroppedCanvas').toBlob(function (blob){
|
|
160
|
+
data.files[0] = new File([blob], data.files[0].name);
|
|
161
|
+
data.originalFiles[0] = data.files[0];
|
|
162
|
+
data.submit();
|
|
163
|
+
})
|
|
164
|
+
});
|
|
165
|
+
},
|
|
166
|
+
|
|
147
167
|
...
|
|
148
|
-
|
|
168
|
+
|
|
149
169
|
done: function(e, data) {
|
|
150
|
-
|
|
170
|
+
submitButton.prop('disabled', false);
|
|
151
|
-
.
|
|
171
|
+
progressBar.text("Uploading done");
|
|
172
|
+
|
|
152
173
|
// extract key and generate URL from response
|
|
153
174
|
var key = $(data.jqXHR.responseXML).find("Key").text();
|
|
154
175
|
var url = '//' + form.data('host') + '/' + key;
|
|
155
176
|
|
|
156
177
|
// create hidden field
|
|
157
|
-
var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url })
|
|
178
|
+
var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url })
|
|
158
|
-
$("#post_remote_image_url").val(url); //hidden_field内のremote_image_urlの値にURLを入れる
|
|
159
179
|
form.append(input);
|
|
180
|
+
//submitを再開させたいが、うまくいきません
|
|
181
|
+
$('form').submit(function(){
|
|
182
|
+
return true;
|
|
183
|
+
});
|
|
184
|
+
$('.directUpload').submit();
|
|
185
|
+
console.log("upload done!!") //このログが表示されるため、doneコールバックはきちんと呼ばれています。
|
|
160
186
|
},
|
|
187
|
+
|
|
188
|
+
fail: function(e, data) {
|
|
189
|
+
submitButton.prop('disabled', false);
|
|
190
|
+
|
|
191
|
+
progressBar.
|
|
192
|
+
css("background", "red").
|
|
193
|
+
text("Failed");
|
|
194
|
+
}
|
|
161
|
-
|
|
195
|
+
});
|
|
162
|
-
|
|
196
|
+
});
|
|
163
197
|
});
|
|
164
|
-
```
|
|
165
198
|
|
|
166
|
-
```Ruby
|
|
167
|
-
class PostsController < ApplicationController
|
|
168
|
-
...
|
|
169
|
-
def new
|
|
170
|
-
@post = Post.new
|
|
171
|
-
end
|
|
172
|
-
|
|
173
|
-
def create
|
|
174
|
-
post = params.require(:post).permit(
|
|
175
|
-
:user_id,
|
|
176
|
-
:image_name,
|
|
177
|
-
:remote_image_url,
|
|
178
|
-
:detail
|
|
179
|
-
)
|
|
180
|
-
post[:image_name]= post[:remote_image_url] //image_nameの値にURLを入れる
|
|
181
|
-
post[:remote_image_url] = "" //remote_image_urlを空白に
|
|
182
|
-
@post = Post.new(post)
|
|
183
|
-
if @post.save
|
|
184
|
-
...
|
|
185
|
-
end
|
|
186
|
-
end
|
|
187
|
-
...
|
|
188
|
-
end
|
|
189
199
|
```
|
|
190
200
|
|
|
191
201
|
|
4
タイトルを修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
[
|
|
1
|
+
[Rails5]JavaScript側でのアップロードが完了してから、createアクションに移るようにしたい
|
body
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
**デバックしてみたところ、以下のjavascriptコードの、`fileUpload`関数内の`done`コールバックが呼ばれていないようです。**
|
|
21
21
|
どうすればこのコールバックがきちんと呼ばれるようになるか、アドバイスをお願いいたします。
|
|
22
22
|
|
|
23
|
-
**【追記】s3へのアップロードが完了しないまま、ページが遷移してしまうことが原因のようです。submitボタンをクリックした
|
|
23
|
+
**【追記】s3へのアップロードが完了しないまま、ページが遷移してしまうことが原因のようです。submitボタンをクリックした際に、js側でs3へのアップロードを完了させたあとに、フォームをサーバーに提出させるには、どうすればいいでしょうか？**
|
|
24
24
|
|
|
25
25
|
### 該当のソースコード
|
|
26
26
|
|
3
問題点を追記・変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -20,6 +20,8 @@
|
|
|
20
20
|
**デバックしてみたところ、以下のjavascriptコードの、`fileUpload`関数内の`done`コールバックが呼ばれていないようです。**
|
|
21
21
|
どうすればこのコールバックがきちんと呼ばれるようになるか、アドバイスをお願いいたします。
|
|
22
22
|
|
|
23
|
+
**【追記】s3へのアップロードが完了しないまま、ページが遷移してしまうことが原因のようです。submitボタンをクリックした時に、アップロードを完了させたあとに、フォームをサーバーに提出させるには、どうすればいいでしょうか？**
|
|
24
|
+
|
|
23
25
|
### 該当のソースコード
|
|
24
26
|
|
|
25
27
|
```javascript
|
2
コードをさらに修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -122,6 +122,7 @@
|
|
|
122
122
|
post = params.require(:post).permit(
|
|
123
123
|
:user_id,
|
|
124
124
|
:image_name,
|
|
125
|
+
:remote_image_url;
|
|
125
126
|
:detail
|
|
126
127
|
)
|
|
127
128
|
@post = Post.new(post)
|
1
コードを修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
var url = '//' + form.data('host') + '/' + key;
|
|
77
77
|
|
|
78
78
|
// create hidden field
|
|
79
|
-
//
|
|
79
|
+
$("#post_remote_image_url").val(url); //hidden_field内のremote_image_urlの値にURLを入れる
|
|
80
80
|
var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url });
|
|
81
81
|
form.append(input);
|
|
82
82
|
},
|
|
@@ -95,10 +95,12 @@
|
|
|
95
95
|
<%= f.label("アイテム画像（必須）") %>
|
|
96
96
|
<%= f.file_field :image_name %>
|
|
97
97
|
|
|
98
|
+
<%= f.hidden_field :remote_image_url %>
|
|
99
|
+
|
|
98
100
|
<div class="preview"><img id="crop_img" /></div>
|
|
99
101
|
<div class="clear_float"></div>
|
|
100
102
|
|
|
101
|
-
<%= f.hidden_field :
|
|
103
|
+
<%= f.hidden_field :user_id, :value => current_user.id %>
|
|
102
104
|
<div class="clear_float"></div>
|
|
103
105
|
|
|
104
106
|
<%= f.label("コメント") %>
|
|
@@ -167,7 +169,7 @@
|
|
|
167
169
|
|
|
168
170
|
def create
|
|
169
171
|
post = params.require(:post).permit(
|
|
170
|
-
:
|
|
172
|
+
:user_id,
|
|
171
173
|
:image_name,
|
|
172
174
|
:remote_image_url,
|
|
173
175
|
:detail
|