input要素にwebkitdirectory属性を付けると、ファイルではなくフォルダーを選べます。ReactとTypeScriptで属性の型を足し、選んだフォルダーの中のファイルを、フォルダーごとに大きさ付きで一覧にするコンポーネン ...

選んだファイルの大きさを「2.5 MB」「2.3 MiB」のように表示するコンポーネントを React で作りました。1000 ごとと 1024 ごとの違い、丸めると「1000.0 kB」になる問題、Intl.NumberFormat ...

Shift_JIS で保存されたテキストファイルを、React で文字化けさせずに表示します。file.text() で化ける理由、TextDecoder に shift_jis を渡す読み方、選び直せる部品の作り方、①や〜がどう読ま ...

選んだファイルが本当に PNG や JPEG なのかを、React でファイルの先頭の数バイトを読んで調べます。拡張子から決まる file.type との違い、PNG・JPEG・GIF・WebP・BMP・AVIF の見分け方、先頭だけ ...

選んだ複数の画像を横・縦・格子に並べ、1枚の PNG にして保存する仕組みを React で作りました。手元にある何枚かの画像を、1枚のコラージュ画像にまとめて保存したい場面で使えます。大きさの違う画像のそろえ方、正方形への切り抜き、 ...

予定の入力欄から、カレンダーアプリに取り込める .ics ファイルを作ってダウンロードさせる方法です。必要な行、UTC での日時、終日の予定の終わりの日、カンマや改行の書き方、日本語を75バイトで折り返す方法を、保存したファイルを読み ...

画面に出している表のデータを、ボタン1つで CSV ファイルとして保存させる方法です。値の囲み方、Blob と a 要素の download 属性での保存、BOM、数式として読まれる値への備えを、保存されたファイルの中身で確かめました ...

入力欄に Ctrl+V で貼り付けた画像を、React で受け取って一覧に表示する方法です。onPaste で画像を取り出す方法、文字の貼り付けを邪魔しない書き方、表示用の URL の作り方と解放のしかたを確かめました。

選んだ画像をブラウザの中で縮小し、送る前にプレビューする方法を React と TypeScript で確かめました。アップロード前の画像の圧縮に使えます。canvas で JPEG にする関数、選び直したときの古い結果の捨て方、透明 ...

選んだCSVファイルを React で読み込み、表にして表示しました。Papa Parse での行の分け方、Shift_JIS のファイルの読み方、列数が合わない行の知らせ方を、実際の出力とともに扱います。