fetching files renders invalid blob
- Dominant language
- JavaScript
- Stars
- 5.7k
- Forks
- 204
- PR merge metrics
- No merged PRs in 30d
Description
How it should be
```js
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
```js
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()`](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL) on the generated blob, the resulting file is invalid and cannot be opened.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the fetch and blob example in the issue, then inspect unfetch's blob handling and the FileReader.readAsDataURL() result. Done means the generated blob preserves the response bytes and image/jpeg type, and the resulting data URL opens as a valid image.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- api
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100