Base64形式のデータをFileオブジェクトに変換する

Base64形式のデータをFileオブジェクトに変換する

JavaScriptがBase64形式で受け取ったファイルはそのままでは通常のテキストですが、Fileオブジェクトに変換することで1つのファイルとして扱うことができるようになります。

以下の例では、変数file_dataに入ったBase64形式のファイルをatobメソッドを使ってバイナリ化し、続いてバイナリデータに変換して、最終的にFileオブジェクトでファイルのオブジェクトを作成します。

このコードを使ったサンプルはこちら。

上記のサンプルページではファイルを選択すると選択したファイルを一旦Base64形式にしてからバイナリ化してFileオブジェクトを作成するようになっています。
これは選択したファイルを直接参照しても同じことができるため、あえて遠回りをしているので実用的ではありません。

JS コード例

// (1)ファイルをバイナリ化
let bin = atob(file_data.replace(/^.*,/, ''));

// (2)バイナリデータに変換する
let buffer = new Uint8Array(bin.length);
for (let i = 0; i < bin.length; i++) {
    buffer[i] = bin.charCodeAt(i);
}

// (3)Fileオブジェクトを生成
let image_file = new File([buffer.buffer], file_name, {type: file_type});

// (4)ファイルの基本情報を取得してページに表示する
const file_info_list = document.getElementById("file_info_list");
let li = document.createElement("li");

li.textContent = "ファイル名：" + image_file.name;
file_info_list.appendChild(li);

li = document.createElement("li");
li.textContent = "ファイル種類：" + image_file.type;
file_info_list.appendChild(li);

li = document.createElement("li");
li.textContent = "ファイルサイズ：" + image_file.size + "バイト";
file_info_list.appendChild(li);

今回使用するHTMLのコードでは、取得したファイルの情報を表示するためにul要素を用意します。

HTML コード例

<ul id="file_info_list"></ul>

id属性「file_info_list」からul要素を取得して、ここにli要素を挿入します。
ファイルの情報は以下のように表示されます。

出力例

・ファイル名：fox_front.png
・ファイル種類：image/png
・ファイルサイズ：39939バイト

(1)でatobメソッドを実行して取得したバイナリは、続く(2)で型付き配列（8ビット符号なし整数値配列）に変換します。
変数bufferには(1)で取得したバイナリの長さと同じ数の数値が入った配列が入ります。

その後、(3)でFileオブジェクトのインスタンスに変数buffer、ファイル名、そしてファイル形式を指定して新しいファイルオブジェクトを1つ作成します。

ファイルができたら、あとは各種プロパティを参照してファイル名、形式、サイズ（容量）などを取得することができるようになります。
それらの値を用意したul要素に入れて表示していきます。