developit / developit/unfetch

fetching files renders invalid blob

Open
#145 2 comments 1 reaction 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.