jQuery when()を使用して、複数のファイルアップロードを並列処理

Question

前提・実現したいこと

Webブラウザから複数選択した画像と動画をサーバーへアップロードする機能を作成しています。

複数選択された画像、動画をajaxで1件ずつサーバーへアップロードし、サーバー側でサムネイルを作成してファイル名をブラウザへ返す仕様を考えています。

ローディングアニメーションを表示したいので、ajaxの処理の前にアニメーションを表示し、ajaxの処理の後にアニメーションを非表示にしたいです。

記載したソースコードのように実装した場合に、POSTされたファイルが空になってしまう問題が起きてしまいました。

原因と解決方法をご教授いただけると助かります。

よろしくお願いいたします。

発生している問題・エラーメッセージ

POSTされたファイルが空になる

該当のソースコード

  $('input[name=files\[\]]').change(function(){
    $('.loading').show();

    $.when.apply($,
      $($(this).prop('files')).map(function(){
         uploadFile($(this));
      })
    ).done(function(){
      $('.loading').hide();
    }).fail(function(){
      $('.loading').hide();
      alert('通信エラー\nお手数ですが再度時間をおいてお試しください。');
    });
  });

  function uploadFile(file){
    let fd = new FormData();
    fd.append("upfile", file);

    $.ajax({
             type        : 'POST',
             enctype     : 'multipart/form-data',
             dataType    : 'json',
             url         : './uploadapi/upload.json',
             data        : fd,
             processData : false,
             contentType : false,
             cache       : false,
             success     : function(res)
             {
               if(res.error){
                 alert('アップロード失敗:' + res.error);
               }else{
                 $('.thumb_area').append('<img src="/assets/img/thumb/' + res.filename + '">');
               }
             }
          });
  }

Answer 1

whenするまでもないと思いますが

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#f').addEventListener('change',async (e)=>{
    const debug=document.querySelector('#debug');
    const url="send.php";
    const method="post";
    const body=new FormData(e.target.form);
    debug.textContent="show";
    await fetch(url,{method,body}).then(res=>res.text()).then(console.log);
    debug.textContent="hide";
  });
});

</script>
<form>
<input type="file" name="file[]" id="f" multiple>
</form>
<div id="debug"></div>

//send.php

<?PHP
sleep(3);
print_r($_FILES);

Comments

[akira_hh]

ご回答ありがとうございます。
ご教示していただいた方法ですと複数選択されたファイルをまとめてサーバーへ送信すると思いますが
今回選択される画像や動画の数が多くなる可能性があり、1件ずつサーバーへ送信して処理したいと考えています。

[yambejp]

Changeイベントで送信するのにmulpipleで送る以外
どういうUIを想定しているのでしょうか？

[akira_hh]

UIはmultipleで複数選択を行い、選択が完了したタイミング(Changeイベントの発火)で選択されたファイルを1件ずつ別のリクエストでサーバーへ送信したいと考えています。

[akira_hh]

上手く意図をお伝えできず、申し訳ありませんでした。
なんとか自己解決できましたのでクローズにしたいと思います。
ご回答ありがとうございました。

[yambejp]

個別に送るとこうですが、これが効率的かといわれると疑問が残ります。

<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('#f').addEventListener('change',async (e)=>{
const debug=document.querySelector('#debug');
const url="y.php";
const method="post";
debug.textContent="show";
var ff=[...e.target.files].map(x=>{
console.log(1);
var body=new FormData();
body.append(e.target.name,x);
return new Promise(resolve=>fetch(url,{method,body}).then(res=>res.text()).then(txt=>resolve(txt)));
});
Promise.all(ff).then(res=>{
console.log(...res);
debug.textContent="hide";
});
});
});

</script>
<form>
<input type="file" name="file[]" id="f" multiple>
</form>
<div id="debug"></div>

Answer 2

初歩的なミスでした。。
アップロード用関数の引数を$(this)ではなく、変数に代入したものを渡すことでサーバーへファイルを送信することができました。
あとajaxオブジェクトをreturnしていなかった箇所を修正しました。

$('input[name=files\[\]]').change(function(){
    $('.loading').show();

    $.when.apply($,
      $($(this).prop('files')).map(function(i, file){
         // $(this)ではなく、変数に代入して渡す
         // uploadFileの返り値(ajaxのオブジェクト)をリターン
         return uploadFile(file);
      })
    ).done(function(){
      $('.loading').hide();
    }).fail(function(){
      $('.loading').hide();
      alert('通信エラー\nお手数ですが再度時間をおいてお試しください。');
    });
  });

  function uploadFile(file){
    let fd = new FormData();
    fd.append("upfile", file);
    // ajaxオブジェクトをリターン
    return $.ajax({
             type        : 'POST',
             enctype     : 'multipart/form-data',
             dataType    : 'json',
             url         : './uploadapi/upload.json',
             data        : fd,
             processData : false,
             contentType : false,
             cache       : false,
             success     : function(res)
             {
               if(res.error){
                 alert('アップロード失敗:' + res.error);
               }else{
                 $('.thumb_area').append('<img src="/assets/img/thumb/' + res.filename + '">');
               }
             }
          });
  }