【react-dropzone】アップロード中にpreviewを表示する

react-dropzone でファイルのアップロード中にクライアントサイドだけで previewを表示する方法を調べた

drop-zoneの機能として、previewがあるのでそれを利用すれば良さそう

react-dropzone.js.org

上のドキュメントを読んでいて気になったのが、URL.createObjectURL(file)で、使ったことがなかったので調べた

developer.mozilla.org

URL.createObjectURL()

URL.createObjectURL() は、Blob または File オブジェクトから一時的な URL を生成するためのメソッド

この URL は、ページがリロードされたり、リソースが解放されるまで有効であり、Web ページ内で一時的にローカルのファイルやデータを参照するのに使うことができる

主な用途

• ローカルで選択されたファイルをブラウザ上で表示したい場合（例: 画像や動画をユーザーが選択した後にプレビューする）
• 動的に作成された Blob データを使ってブラウザ内でファイルを扱いたい場合（例: フォトエディタやドキュメント生成アプリでのリアルタイムプレビュー）

基本的な使い方

// Blob または File オブジェクトから URL を生成
const file = new Blob(["Hello, world!"], { type: "text/plain" });
const objectURL = URL.createObjectURL(file);

// この URL を使って、ブラウザ上で Blob の内容を表示したり操作できる
const link = document.createElement("a");
link.href = objectURL;
link.download = "example.txt"; // ダウンロードファイル名を指定
link.textContent = "Download file";

// ページにリンクを追加
document.body.appendChild(link);

// リソースが不要になったら URL を解放する
// URL.revokeObjectURL(objectURL);

主なポイント

• URL.createObjectURL() で生成された URL は、通常の URL と同様に <img>, <a>, <video> などの要素に使用できる
• 必要なくなった URL は URL.revokeObjectURL() を使ってメモリリークを防ぐために解放する必要がある
• セキュリティの観点から、生成された URL は同じページでしかアクセスできない（他のページからはアクセス不可）