developit / unfetch

🐕 Bare minimum 500b fetch polyfill.
https://npm.im/unfetch
MIT License
5.7k stars 201 forks source link

fetching files renders invalid blob #145

Open skourismanolis opened 3 years ago

skourismanolis commented 3 years ago

How it should be

let e = await fetch('https://i.imgur.com/4AiXzf8.jpg')
// Response { type: "cors", url: "https://i.imgur.com/4AiXzf8.jpg", redirected: false, status: 200, ok: true, statusText: "OK", headers: // Headers, body: ReadableStream, bodyUsed: false }
await e.blob()
// Blob { size: 87363, type: "image/jpeg" }

How it is with unfetch

let e = await fetch('https://i.imgur.com/4AiXzf8.jpg')
// Object { ok: true, statusText: "OK", status: 200, url: "https://i.imgur.com/4AiXzf8.jpg", text: text(), json: json(), blob: blob(), clone: a(), headers: {…} }
await e.blob()
// Blob { size: 156997, type: "" }

Note how the blob's size is different and the type is missing.

That can also be confirmed by using FileReader.readAsDataURL() on the generated blob, the resulting file is invalid and cannot be opened.

kg-currenxie commented 3 years ago

Same :/

qqilihq commented 3 years ago

Any workarounds or attempts to fix this?

The issue is obviously here:

https://github.com/developit/unfetch/blob/master/src/index.mjs#L16

To fix this, the XHR would probably need to be initialized with the proper responseType, which at first glance will require some deeper refactoring of the current structure.