JavaScriptのPromise処理で値が帰ってこない

Question

質問を読んで頂きありがとうございます。

ユーザがファイルをアップロードし、それを加工して表示するというプログラムを作ろうとしています。
ファイルをアップロード→内容を加工という処理を同期的に行うためにPromiseを使いましたが、値が上手く帰ってきません。
下記がそのコードです。雰囲気が伝わるよう、なるべく省略しないようにしましたので長くなってしまいましたがお許しください。

// 読み込み１ ユーザがアップロードしたファイル１を加工して返却する。
function getMasterCSV() {
  return new Promise((resolve, reject)=>{
    try {
      let masters = [];
      let fileInput = document.getElementById('openMasterCSV_btn');
      let fileReader = new FileReader();
      fileInput.onchange = () => {
        let file = fileInput.files[0];
        fileReader.readAsText(file);
      };
      fileReader.onload = () => {
        let result = fileReader.result;
        // （略）加工処理をしてmastersに代入
        resolve(masters);
      }
    } catch (e) {
      reject(e);
    };
  });
};

// 読み込み２ ユーザがアップロードしたファイル２を加工して返却する。
function getTransferCSV() {
  return new Promise((resolve, reject)=>{
    try {
      let transfers = [];
      let fileInput = document.getElementById('openTransferCSV_btn');
      let fileReader = new FileReader();
      fileInput.onchange = () => {
        let file = fileInput.files[0];
        fileReader.readAsText(file);
      };
      fileReader.onload = () => {
        let result = fileReader.result;
        // （略）加工処理をしてtransfersに代入
        resolve(transfers);
      }
    } catch (e) {
      reject(e);
    };
  });
};

async function main() {
  // 読み込まれたデータを受け取る
  let masters = await getMasterCSV();
  let transfers = await getTransferCSV();
  console.log(masters);    // なにも表示されない（undefinedとかでもない）
  console.log(transfers);  // なにも表示されない（undefinedとかでもない）
}

main();

このようなコードです。main()のconsole.logではなにもコンソールに表示されなかったので、awaitはちゃんと機能している模様です。しかしresolve()した内容が帰ってきません。getMasterSCV getTransferCSVでエラーがあるのかとも思い、tryを噛ませてみましたがなにも表示されませんでした。

色々調べてみたのですが解決できず質問しました。回答よろしくお願致します。また、このようなファイルを読み込む処理ではそもそもPromiseを利用すべきではない、等の意見でもありがたいです。

Comments

[raccy]

コードを見る限りmastersやtransfersを返しているように見えますが、
// （略）加工処理をしてmastersに代入
の部分で具体的に何をしているのか不明のため、空文字列でも代入しているのかと思ってしまいます。まずは、Promiseの動作の確認のために、
masters.push("abc");
とか適当に書いた場合でも値は返ってこないか確認してみてください。

[maisumakun]

2つのファイル入力フォームでファイルの選択は行いましたか？

[AkitoshiManabe]

ご質問の内容は「ブラウザでは処理できない」という回答も有効です。
理由：「（アップロード直後の）サーバー側で処理すべき事例」と受け取れるため
> ユーザがファイルをアップロードし、それを加工して表示する
> ファイルをアップロード→内容を加工という処理
ブラウザ側での処理を実装するなら「（アップロード直前の）プレビュー時点で加工処理して表示」であり、「ファイル選択→プレビュー＆加工→アップロードという処理」ではないでしょうか？

[hososo]

自己解決という形になりましたが、大変助かりました。皆さんありがとうございます！

>> raccyさん
「Promiseの動作の確認のために、masters.push("abc");とか適当に書いた場合でも値は返ってこないか確認してみてください。」のアドバイスが大変役に立ちました。デバック部分を分離することにより原因解明がはかどりました。ありがとうございます！

>> maisumakunさん
はい。入力フォームで選択を行いました。

>> AkitoshiManabeさん
混乱させて申し訳ございません。自己解決の欄に詳しく記述しましたが、提示したコードはフロント側のコードです。

Answer 1

まず最初に、私のあやふやな質問文で提示したコードがフロントの処理なのかサーバーの処理なのかで混乱させてしまったことをお詫びします。私が提示したコードはフロントで、ユーザがブラウザにアップロードした（この場合はアップロードとはいわないのかもしれません）csvファイルを、ブラウザに表示するという内容です。

解決に至った理由ですが、これは提示したコードには含まれていない

let dataRecode = new Vue({
  el: '#dataRecode',
  data: {
    items: {},
  }
})

の部分を削除することで解決しました。いくつかの回答を元に色々と試していくとこれはPromiseの問題ではなくファイルのアップロード処理に問題があるとわかり、そこに焦点を絞っていくと該当のVue.jsのコードを削除すると上手くということがわかりました。理由は不明です。

自己解決という形ですが、この結論に至るまでに回答に助けられた場面も多々ありましたので、お礼申し上げます。ありがとうございました！

Comments

[yambejp]

ファイルのアップロードでファイルリーダーを使うのはあまり意味がないです
アップロードせずにサムネイルを作ったりするときにご利用ください
ファイルをFormDataでfetchするほうが効率的なので、時間ができたら
よくよく検討してみてください

[hososo]

知りませんでした。試してみようと思います。アドバイスありがとうござます！

Answer 2

• myfile.html

<script>
window.addEventListener('DOMContentLoaded',()=>{
  document.querySelector('#myfile').addEventListener('change', async e=>{
    const body=new FormData();
    body.append(e.target.name,e.target.files[0]);
    const method="post";
    const v=await fetch("myfile.php",{body,method}).then(res=>res.text());
    document.querySelector('#view').textContent=v;
  });
});
</script>
<input type="file" name="myfile" id="myfile">
<div id="view"></div>

• myfile.php

<?PHP
if(isset($_FILES["myfile"])){
  $fp=fopen($_FILES["myfile"]["tmp_name"],"r");
  $content="";
  while(!feof($fp)){
    $content.=fread($fp,10);
  }
  fclose($fp);
  print "start\n".$content."\nend";
}