JavaScript（React）で複数ファイルアップロードの読込待ち

JavaScript (React) の複数ファイルアップロードしたときのファイル表示にちょっとはまったので備忘録でメモ
やったこととしては FileReader の onload のところを Promise を待つようにしてる
あとはファイルインプットの onChange で使う関数も async つけてファイル読込処理を待つようにする
map で処理すると待つのにもう一つ関数を作る必要があるので煩雑になりそうなので for of でループ処理してます

import { useState } from 'react';

const App = () => {
  const [selectImags, setSelectFiles] = useState([]);
  
  // ファイル選択時の処理 async つける
  const change = async (e) => {
    const imags = [];
    // 選択したファイルごとに読込処理 await で待つ
    for (const file of e.target.files) imags.push(await fileRead(file));
    setSelectFiles([...selectImags, ...imags]);
  };

  // ファイル読込処理 async つける
  const fileRead = async (file) => {
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    // await Promise でファイル読込が終わるまで待つ
    await new Promise((resolve) => (fileReader.onload = () => resolve()));
    return fileReader.result;
  };

  return (
    <>
      <p>ファイル選択</p>
      <input type="file" multiple onChange={change} />
      <p>選択したファイル</p>
      {selectImags.map((src, i) => {
        return <img key={'image' + i} src={src} alt={'image' + i} />;
      })}
    </>
  );
};
export default App;