質問編集履歴

5

試してみたことを追記

2018/04/02 08:25

投稿

tacro
tacro

スコア23

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
- 以下のように`console.log`書いてみましたが、コンソ表示されないため、そもそものコールバック呼ばれていないと思いす…
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
- console.log('doneコールバックが呼ばれました!');
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

タイトルを修正

2018/04/02 08:25

投稿

tacro
tacro

スコア23

test CHANGED
@@ -1 +1 @@
1
- [JavaScript]jQueryルバッが呼ばれな
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

問題点を追記・変更

2018/04/02 07:27

投稿

tacro
tacro

スコア23

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

コードをさらに修正

2018/04/02 07:12

投稿

tacro
tacro

スコア23

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

コードを修正

2018/04/02 06:31

投稿

tacro
tacro

スコア23

test CHANGED
File without changes
test CHANGED
@@ -154,7 +154,7 @@
154
154
 
155
155
  // create hidden field
156
156
 
157
- //あたりで、urlをimage_nameの値として渡す処理加えたい
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 :designer_id, :value => current_user.id %>
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
- :designer_id,
343
+ :user_id,
340
344
 
341
345
  :image_name,
342
346