この記事はJavaScript Advent Calendar 2020の25日目になります。 レビューサイトを始めとする「ユーザーが画像ファイルをそれぞれがアップロードして投稿するウェブサイト」を作るとき、必ず用いられるのが<input type="file">によるアップロードです。 一般的にファイルのアップロードといえば、PHPやSQLといったバックエンド技術が主役のように捉えられがちです。 しかし、取得した画像ファイルを用いたサムネイルの生成や画像ファイルの軽量化など、JavaScriptの出番も少なくありません。 実際に<input type="file">を取り扱い、いくつかハマりやすいと感じたポイントがあったため、この場を借りてまとめていきます。 1. <input type="file">のvalueは、画像データではない <input>要素は、入力されたテキストをステータ