オブジェクト URL を File または Blob オブジェクトに変換する方法

JavaScript の オブジェクト URL を File オブジェクト または Blob オブジェクトに戻す(変換する)方法を紹介します。 URL.createObjectURL() の逆を行います。

オブジェクト URL とは

オブジェクトURLは、JavaScriptで下記のようにメゾットを呼び出すことで生成されます。
URL.createObjectURL(object);
URL.createObjectURL() - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/URL/createObjectURL
ファイルを処理したり、ユーザーからファイルを受け取るライブラリなどで、オブジェクトURLで返ってきますが、データを処理したいのでFileオブジェクトやBlobオブジェクトに戻したいケースがあります。
しかし、File APIには URL.createObjectURL(object); の逆が用意されていません。
例えば、 react-dropzone というReactのライブラリではオブジェクトURLで返ってきます。

File オブジェクトに戻す方法

なんの変哲もない対処方法なのですが、URLなので、 fetch() または XMLHttpRequest を使用すればFileオブジェクトに戻すことができます。

fetch() を用いた方法

ES5が動作する環境であれば fetch() を用いた方法がおすすめです。
Can I Useによると、IE、古すぎるEdge、Opera mini以外であれば動作するようです。対象外のブラウザでもpolyfillを導入したり、トランスコンパイルをすれば動作します。
let file = await fetch(url).then(r => r);
let blob = await fetch(url).then(r => r.blob());

XMLHttpRequest を用いた方法

古き良き、XMLHttpRequestを用いても取得できます。
Can I Useによると、現在の主要ブラウザはすべて動作するようです。
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function() {
    var blob = this.response;
};
xhr.send();

@bicstone

大石貴則 (Ōishi Takanori) と申します。 Webエンジニア / セキュリティスペシャリスト / 機械エンジニア です。 プロダクトに幅広く携わり、相互成長し続けられるエンジニアを目指しています。

GitHubLinkedIn