質問編集履歴
5
試してみたことを追記
test
CHANGED
File without changes
|
test
CHANGED
@@ -44,7 +44,7 @@
|
|
44
44
|
|
45
45
|
**【追記】s3へのアップロードが完了しないまま、ページが遷移してしまうことが原因のようです。submitボタンをクリックした際に、js側でs3へのアップロードを完了させたあとに、フォームをサーバーに提出させるには、どうすればいいでしょうか?**
|
46
46
|
|
47
|
-
|
47
|
+
→**【追記2】formのsubmitを一度中断し、アップロード完了後に再開させるという処理を思いつきました。**中断はできるのですが、再開がうまくできません。「試したこと」欄に詳述するので、アドバイスいただきたいです。
|
48
48
|
|
49
49
|
### 該当のソースコード
|
50
50
|
|
@@ -282,7 +282,13 @@
|
|
282
282
|
|
283
283
|
#試してみたこと
|
284
284
|
|
285
|
+
submitボタンがクリックされた際に、一度formのsubmitを中断
|
286
|
+
|
287
|
+
→画像のアップロード完了後に再開、という手段を試みました。
|
288
|
+
|
285
|
-
以下のように
|
289
|
+
以下のようにコードを修正し、中断させることには成功しましたが、画像のアップロード完了後にformのsubmitをもう一度有効化することができていません。
|
290
|
+
|
291
|
+
何故有効化できないのでしょうか?ご意見をいただきたいです。
|
286
292
|
|
287
293
|
|
288
294
|
|
@@ -290,15 +296,51 @@
|
|
290
296
|
|
291
297
|
$(function() {
|
292
298
|
|
299
|
+
...
|
300
|
+
|
301
|
+
add: function(e, data){
|
302
|
+
|
303
|
+
...
|
304
|
+
|
305
|
+
submitButton.on('click', function(){
|
306
|
+
|
307
|
+
//一度submitを中断させる
|
308
|
+
|
309
|
+
$('form').submit(function(){
|
310
|
+
|
311
|
+
return false;
|
312
|
+
|
313
|
+
});
|
314
|
+
|
315
|
+
// crop のデータを取得
|
316
|
+
|
317
|
+
$('#crop_img').cropper('getCroppedCanvas').toBlob(function (blob){
|
318
|
+
|
319
|
+
data.files[0] = new File([blob], data.files[0].name);
|
320
|
+
|
321
|
+
data.originalFiles[0] = data.files[0];
|
322
|
+
|
323
|
+
data.submit();
|
324
|
+
|
325
|
+
})
|
326
|
+
|
327
|
+
});
|
328
|
+
|
329
|
+
},
|
330
|
+
|
331
|
+
|
332
|
+
|
293
333
|
...
|
294
334
|
|
295
|
-
|
335
|
+
|
296
336
|
|
297
337
|
done: function(e, data) {
|
298
338
|
|
299
|
-
|
339
|
+
submitButton.prop('disabled', false);
|
300
|
-
|
340
|
+
|
301
|
-
.
|
341
|
+
progressBar.text("Uploading done");
|
342
|
+
|
343
|
+
|
302
344
|
|
303
345
|
// extract key and generate URL from response
|
304
346
|
|
@@ -310,69 +352,47 @@
|
|
310
352
|
|
311
353
|
// create hidden field
|
312
354
|
|
313
|
-
var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url })
|
355
|
+
var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url })
|
314
|
-
|
315
|
-
$("#post_remote_image_url").val(url); //hidden_field内のremote_image_urlの値にURLを入れる
|
316
356
|
|
317
357
|
form.append(input);
|
318
358
|
|
359
|
+
//submitを再開させたいが、うまくいきません
|
360
|
+
|
361
|
+
$('form').submit(function(){
|
362
|
+
|
363
|
+
return true;
|
364
|
+
|
365
|
+
});
|
366
|
+
|
367
|
+
$('.directUpload').submit();
|
368
|
+
|
369
|
+
console.log("upload done!!") //このログが表示されるため、doneコールバックはきちんと呼ばれています。
|
370
|
+
|
319
371
|
},
|
320
372
|
|
373
|
+
|
374
|
+
|
375
|
+
fail: function(e, data) {
|
376
|
+
|
377
|
+
submitButton.prop('disabled', false);
|
378
|
+
|
379
|
+
|
380
|
+
|
381
|
+
progressBar.
|
382
|
+
|
383
|
+
css("background", "red").
|
384
|
+
|
385
|
+
text("Failed");
|
386
|
+
|
387
|
+
}
|
388
|
+
|
321
|
-
|
389
|
+
});
|
322
|
-
|
390
|
+
|
323
|
-
|
391
|
+
});
|
324
392
|
|
325
393
|
});
|
326
394
|
|
327
|
-
|
395
|
+
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
```Ruby
|
332
|
-
|
333
|
-
class PostsController < ApplicationController
|
334
|
-
|
335
|
-
...
|
336
|
-
|
337
|
-
def new
|
338
|
-
|
339
|
-
@post = Post.new
|
340
|
-
|
341
|
-
end
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
def create
|
346
|
-
|
347
|
-
post = params.require(:post).permit(
|
348
|
-
|
349
|
-
:user_id,
|
350
|
-
|
351
|
-
:image_name,
|
352
|
-
|
353
|
-
:remote_image_url,
|
354
|
-
|
355
|
-
:detail
|
356
|
-
|
357
|
-
)
|
358
|
-
|
359
|
-
post[:image_name]= post[:remote_image_url] //image_nameの値にURLを入れる
|
360
|
-
|
361
|
-
post[:remote_image_url] = "" //remote_image_urlを空白に
|
362
|
-
|
363
|
-
@post = Post.new(post)
|
364
|
-
|
365
|
-
if @post.save
|
366
|
-
|
367
|
-
...
|
368
|
-
|
369
|
-
end
|
370
|
-
|
371
|
-
end
|
372
|
-
|
373
|
-
...
|
374
|
-
|
375
|
-
end
|
376
396
|
|
377
397
|
```
|
378
398
|
|
4
タイトルを修正
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
[JavaScript
|
1
|
+
[Rails5]JavaScript側でのアップロードが完了してから、createアクションに移るようにしたい
|
test
CHANGED
@@ -42,7 +42,7 @@
|
|
42
42
|
|
43
43
|
|
44
44
|
|
45
|
-
**【追記】s3へのアップロードが完了しないまま、ページが遷移してしまうことが原因のようです。submitボタンをクリックした
|
45
|
+
**【追記】s3へのアップロードが完了しないまま、ページが遷移してしまうことが原因のようです。submitボタンをクリックした際に、js側でs3へのアップロードを完了させたあとに、フォームをサーバーに提出させるには、どうすればいいでしょうか?**
|
46
46
|
|
47
47
|
|
48
48
|
|
3
問題点を追記・変更
test
CHANGED
File without changes
|
test
CHANGED
@@ -42,6 +42,10 @@
|
|
42
42
|
|
43
43
|
|
44
44
|
|
45
|
+
**【追記】s3へのアップロードが完了しないまま、ページが遷移してしまうことが原因のようです。submitボタンをクリックした時に、アップロードを完了させたあとに、フォームをサーバーに提出させるには、どうすればいいでしょうか?**
|
46
|
+
|
47
|
+
|
48
|
+
|
45
49
|
### 該当のソースコード
|
46
50
|
|
47
51
|
|
2
コードをさらに修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -246,6 +246,8 @@
|
|
246
246
|
|
247
247
|
:image_name,
|
248
248
|
|
249
|
+
:remote_image_url;
|
250
|
+
|
249
251
|
:detail
|
250
252
|
|
251
253
|
)
|
1
コードを修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -154,7 +154,7 @@
|
|
154
154
|
|
155
155
|
// create hidden field
|
156
156
|
|
157
|
-
//
|
157
|
+
$("#post_remote_image_url").val(url); //hidden_field内のremote_image_urlの値にURLを入れる
|
158
158
|
|
159
159
|
var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url });
|
160
160
|
|
@@ -192,13 +192,17 @@
|
|
192
192
|
|
193
193
|
|
194
194
|
|
195
|
+
<%= f.hidden_field :remote_image_url %>
|
196
|
+
|
197
|
+
|
198
|
+
|
195
199
|
<div class="preview"><img id="crop_img" /></div>
|
196
200
|
|
197
201
|
<div class="clear_float"></div>
|
198
202
|
|
199
203
|
|
200
204
|
|
201
|
-
<%= f.hidden_field :
|
205
|
+
<%= f.hidden_field :user_id, :value => current_user.id %>
|
202
206
|
|
203
207
|
<div class="clear_float"></div>
|
204
208
|
|
@@ -336,7 +340,7 @@
|
|
336
340
|
|
337
341
|
post = params.require(:post).permit(
|
338
342
|
|
339
|
-
:
|
343
|
+
:user_id,
|
340
344
|
|
341
345
|
:image_name,
|
342
346
|
|