👌
ファイルアップロードの挙動確認
動機
Reactでファイルアップロード機能を実装したい。
まず、HTMLの仕様を確認する
挙動確認
単一ファイル
以下のコードを検証する
<!DOCTYPE html>
<head>
<meta charset="utf8"/>
</head>
<body>
<label for="single-file-uploader">単一ファイルのアップロード</label>
<input type="file" id="single-file-uploader" accept=".jpg,.png">
</body>
HTTPサーバーを立てる
➜ npx http-server
以下のように、ファイルの入力フォームが作成される
ファイル(test.png)をアップロードしてみる。
以下のように表示が変わる。ただし、開発者ツールを見る限りでは、このtest.pngはHTML要素に反映されていない。
jsでフォームのvalueを取得してみる
すると、上記のように'C:\\fakepath\\test.png'がvalueの値になっている。
filesを取得すると、以下のようにFilesListにくるまれたファイル名が取得できる
複数ファイル
以下のコードを検証する
<!DOCTYPE html>
<head>
<meta charset="utf8"/>
</head>
<body>
<label for="multi-files-uploader">複数ファイルのアップロード</label>
<input type="file" id="multi-files-uploader" accept=".jpg,.png" multiple>
</body>
2つのファイル(test.png, test2.png)をアップロードしてみる
以下のように表示が変わる。単一フォームのときと同様、HTML要素には表現されていない
jsでフォームのvalueを取得してみる
単一フォームのときと同様、'C:\\fakepath\\test.png'がvalueの値になっている。
valueでは、複数ファイルのファイル名を取得できない。
正しくは、filesで取得する。
参考
Discussion