【JavaScript】FileReaderを用いた複数の添付ファイルのパラメータ取得方法について

Question

前提・実現したいこと

JavaScript の FileReader を用いて複数の添付ファイルを読み込んでいます。
最終的にはフロント側で読み込んだ添付ファイルのパラメータをバックエンド側に渡したいと思っております。

発生している問題

バックエンド側でログを出力すると、fileName の値は取得できましたが、fileList は NULL となりました。
（バックエンド側は特殊な言語を使用している為、回答を得にくい為こちらの処理については割愛させて頂きます）
そこで、フロント側の fileList に情報が格納されていないのではと推測しましたが、
バックエンド側に値を渡す前に、コンソールにログを出力したところ、値は格納されているように見受けられます。

試しに、console.log(param.fileList[0].name);といったように、
実行結果で出力しているファイル名の「test1.pdf」が取得できるかログを出力してみましたが、
「undefined」となり、fileList に格納されている値を抽出できない為、NULL となっているのではと考えました。
fileList に格納されている各パラメーター（name, file）の取得方法について、知恵をお貸し頂ければ幸いです。

該当のソースコード

$("#uploadButton").click(function(){
    var uploadFile = document.getElementById('uploadFile');
    var param = new Object();
    param.fileName = '';
    param.fileList = [];
    var returnParam = new Object();

    for(let i = 0; i < uploadFile.files.length; i++) {
        var file = uploadFile.files[i];
        if(i == 0) {
            param.fileName = file.webkitRelativePath;
        } else {
            returnParam = readFile(file);
            param.fileList.push(returnParam);
        }
    }
    console.log(param);
    uploadAttachments(param);
});

function readFile(file) {
    var inputFile = new Object();
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = function() {
        var dataURL = reader.result;
        inputFile['name'] = file.name;
        inputFile['file'] = dataURL.match(/,(.*)$/)[1];
    };
    return inputFile;
}

コンソール実行結果

console.log(param); を実行した結果

▼{fileName: "2020-11-01 00.00.00", fileList: Array(3)}
   fileName: "2020-11-01 00.00.00"
  ▼fileList: Array(3)
   ▶︎0: {name: "test1.pdf", file: "AAAA......"}
   ▶︎1: {name: "test2.pdf", file: "AAAA......"}
   ▶︎2: {name: "test3.pdf", file: "AAAA......"}

Comments

[yambejp]

ajax的な処理が不要なら普通にサブミットするだけでは？

[floor]

ご回答頂きまして有難うございます。
回答を得難いと思い処理は割愛させて頂きましたが、Attachments メソッドでは、「JavaScript Remoting」を使用してコントローラへのAJAX要求を行い、パラメータ(param)を渡しております。
その為、パラメータ(param)に値が格納されているかをコンソールで確認したいと思っておりました。

[yambejp]

FileReaderは重要ですか？
ふつうajaxでファイル転送するときはFormDataで指定すれば済みますが・・・

[floor]

ご確認頂き有難うございます。
複数ファイルでないサンプルソースが FileReader を用いて実装していた為、FileReader に固執しておりましたが、FormData で実装できないか再度試してみたいと思います。助言頂きまして有難うございました。

Answer 1

FormDataで送るならこんな感じで

Comments

[yambejp]

<form method="post" action="送り先" enctype="multipart/form-data" >
<input type="file" name="f[]" multiple>
<input type="submit" value="fetch" id="btn">
</form>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('#btn').addEventListener('click',e=>{
e.preventDefault();
const f=e.target.form;
const method=f.method;
const body=new FormData(f);
fetch(f.action,{body,method}).then(res=>res.text()).then(console.log);
});
});
</script>

[floor]

ご回答頂きまして有難うございます。
こちらを参考に FormData を用いた方法でも試してみたいと思います。

Answer 2

fileList は NULL となりました。(中略)値は格納されているように見受けられます。

FileReader は 非同期処理ですので、開発者コンソールの状況は 時間差で格納される ことを示しています。

次のいずれかで対策します。

1. コールバック関数をネストする（コールバック地獄）
2. Promiseによる同期的な処理を考える（フロー制御）

イベント処理など非同期処理の多い JavaScript ではコールバック関数の取扱が必須知識になります

---

知恵をお貸し頂ければ幸いです

「コールバック地獄」だとこんな感じ。

$("#uploadButton").click(function(){
    let
      uploadFile = document.getElementById('uploadFile'), // input[type="file"] ?
      param = {
        fileName : '', // 相対Path？（Chrome系）
        fileList : []  // 変換後のfileパラメータ一覧
      }, // カンマ忘れ（訂正
      isAllCmpl = () => param.fileList.length === uploadFile.files.length
    ;

    for ( let i = 0; i < uploadFile.files.length; i++ ) {

      let file = uploadFile.files[i];
      if ( i == 0 ) {
        param.fileName = file.webkitRelativePath;
      }
      // uploadFile.files[0] の時も file を読む

      // コールバック関数は FileReaderの処理完了順に実行される
      readFile( file, function( info ) {
        param.fileList.push(info); 
        if ( isAllCmpl() ) {
          // 全て完了した時の処理（ブロックを見てもネストが深くなる）
        }
      });
    }
});

function readFile(file, callback) {

  Object.assign(new FileReader(), {
    onloadend( evt ) {
      let dataURL = evt.target.result;
      callack({ name: file.name, file: dataURL.match(/,(.*)$/)[1] });
    }
  }).readAsDataURL(file);
}

Comments

[floor]

ご回答頂きまして有難うございます。
大変良く分かりました、フロント側の知識が浅くお恥ずかしい限りですが、こちらを参考にまず試してみたいと思います。