feat(blob): Provide onUploadProgress({ loaded, total, percentage })

[vvo]

This commit introduces an onUploadProgress callback to put/upload*. Here's how to use it:

// also works with upload()
const blob = await put('file.pdf', file, {
  onUploadProgress(event) {
    console.log(event.loaded, event.total, event.percentage);
  }
});

How does it work?

By default we use fetch. When you pass onUploadProgress, we turn the file into a stream to track the stream consumption's progress by fetch.
For browsers not supporting fetch with streams (Safari, Firefox), we use XMLHttpRequest and its progress events.

This means we re-implemented parts of https://github.com/axios/axios or other fetch libraries using xhr as backup. But remember, progress events are somehow lying as they only measure what gets sent from your computer to the server, not what the server really acknowledged. Still, they are a good indicator for progress of the upload.

[changeset-bot]

🦋 Changeset detected

Latest commit: 682d4ba

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@vercel/blob	Minor
vercel-storage-integration-test-suite	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
vercel-storage-next-integration-test-suite	✅ Ready (Inspect)	Visit Preview	Nov 6, 2024 9:30am

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@playwright/[email protected]	None	+2	10.8 MB	dgozman-ms, mxschmitt, pavelfeldman, ...1 more
npm/@tailwindcss/[email protected]	None	+1	64.5 kB	adamwathan
npm/@types/[email protected]	None	+1	14 kB	types
npm/@types/[email protected]	Transitive: environment, filesystem, unsafe	+48	1.76 MB	types
npm/@types/[email protected]	None	0	4.76 kB	types
npm/@types/[email protected]	None	+1	2.36 MB	types
npm/@types/[email protected]	None	0	0 B
npm/@types/[email protected]	None	+2	1.69 MB	types
npm/[email protected]	environment Transitive: filesystem, shell	+10	2.72 MB	ai
npm/[email protected]	network Transitive: environment, filesystem	+8	2.51 MB	jasonsaayman
npm/[email protected]	environment, filesystem	0	79.1 kB	motdotla
npm/[email protected]	unsafe Transitive: environment, eval, filesystem, shell	+230	25.3 MB	vercel-release-bot
npm/[email protected]	environment, filesystem, network, shell, unsafe	+68	101 MB	vercel-release-bot
npm/[email protected]	environment, filesystem	+3	376 kB	ai
npm/[email protected]	environment	+3	4.63 MB	react-bot
npm/[email protected]	environment	+2	339 kB	react-bot
npm/[email protected]	Transitive: environment	+2	659 kB	vercel-release-bot
npm/[email protected]	Transitive: environment, filesystem, network, shell, unsafe	+101	14.9 MB	adamwathan, malfaitrobin, reinink
npm/[email protected]	environment, filesystem, unsafe	+16	2.09 MB	blakeembrey
npm/[email protected]	eval, filesystem Transitive: environment, network, shell, unsafe	+73	10 MB	egoist
npm/[email protected]	environment, network	0	1.16 MB	ronag

🚮 Removed packages: npm/@playwright/[email protected], npm/@tailwindcss/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]

View full report↗︎