WebからFetch APIで取得したファイルをJavaScriptのFileオブジェクトとして扱う方法

概要

JavaScriptのFetch APIをつかってWebからファイルをダウンロードしてきて、それをFileオブジェクト として扱う方法

やり方

const path="https://riversun.github.io/img/riversun_144.png";

fetch(path)
    .then(res => {
        return res.blob().then(blob => ({
            contentType: res.headers.get("Content-Type"),
            blob: blob
        }));
    })
    .then(data => {
        return new File([data.blob], path, {type: data.contentType});
    })
    .then(file => {
        //ここでfileを扱うコードを書く
    });

ポイント

• res.blob()メソッドでレスポンスからBlobデータとして読み込むが、このメソッドはPromiseを返す
• ついでに、ヘッダーから"Content-Type"を読み出したいが、無邪気に以下のようにするとスコープ外なのでresにアクセスできない

 fetch(path)
     .then(res => {
         return res.blob();
     })
     .then(blob => {
         //blobは取得できたけど、resから"Content-Type"ヘッダを取り出せない・・・
     })

• 以下のようにresが同一スコープになるようblob()から下位になるようチェインして、Content-Typeまで取得してから次に渡す。

return res.blob().then(blob => ({
    contentType: res.headers.get("Content-Type"),
    blob: blob
}));