Consider adding `blob.dataUrl()` method, or some other analogue to `readAsDataURL`
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 30/100
- Issue type
- Feature
- Clarity
- Needs clarification
- Activity status
- Stale
- Tech stack
- javascript
Research direction
No repository file or test is identified in the issue. Start by reviewing the existing Blob arrayBuffer() and text() methods alongside the linked binary-encoding and ArrayBuffer base64 proposals, then determine whether a promise-based data URL API has a defined direction. Done requires an agreed API design rather than a localized edit.
Written by the indexing model from the issue text.
Description
Obviously data URLs and base64 in general should be avoided where possible, but unfortunately developers are often interacting with systems/libraries/APIs outside their control, and, practically, readAsDataURL is used a lot.
In fact, readAsDataURL is used about as much as readAsText and readAsArrayBuffer combined:
- readAsDataURL: https://github.com/search?l=JavaScript&q=readAsDataURL&type=Code (1.6 million hits)
- readAsText: https://github.com/search?l=JavaScript&q=readAsText&type=Code (770k hits)
- readAsArrayBuffer: https://github.com/search?l=JavaScript&q=readAsArrayBuffer&type=Code (830k hits)
The blob.arrayBuffer() and blob.text() methods are delightful to use compared to previous methods, but for data URLs / base64 we're stuck with:
let file = ...;
let dataUrl = await new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (e) => reject(e);
});
which is the opposite of delightful. This is one of those cases where I'm "embarrassed" by how convoluted a simple task is in JS when helping someone who is new to JS.
There are a couple of proposals that are related to this issue:
- https://github.com/lucacasonato/proposal-binary-encoding
- https://github.com/tc39/proposal-arraybuffer-base64
That said, I really like promise-based blob.methodName() approach, and I'm hoping that we'll eventually get something like that for data URLs.
- Dominant language
- HTML
- Stars
- 118
- Forks
- 52
- Avg merge
- 9d 16h
- Merged PRs (30d)
- 1
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from w3c/FileAPI
-
TPAC2026
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
Difficulty 1/5 Under an hour Newbie friendliness 62/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
Difficulty 5/5 Over a week Newbie friendliness 30/100
Similar issues
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
canonical/paas-charm#368 · 1 comment ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
tech debt
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
area:workflow bug ready-for-agent
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
fil-donadoni/tolaria#4409 ·
-
status/awaiting_triage
Difficulty 2/5 1-3 hours Newbie friendliness 75/100