feat: File Upload Progress

[ottomated]

see #14773

Builds on #14775 to use XHRs for file upload progress in forms:

<script>
  import { uploadForm } from './upload.remote';
</script>

<form {...uploadForm} enctype="multipart/form-data">
  <input {...uploadForm.fields.file.as('file')} />
  <p>Progress: {(uploadForm.fields.file.progress().uploaded / (uploadForm.fields.file.progress().total).toFixed(2)}%</p>
  <button>Upload</button>
</form>

---

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

• If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

Edits

• Please ensure that 'Allow edits from maintainers' is checked. PRs without this option may be closed.

[changeset-bot]

🦋 Changeset detected

Latest commit: 7d9507f

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

This PR includes changesets to release 1 package

Name	Type
@sveltejs/kit	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

[ottomated]

maybe set total: 1 here to protect people from dividing by zero?

[ottomated]

paging @Rich-Harris to see if this can go out with #14775 :-)

[rChaoz]

Can't this lead to 0/0 issues during SSR? Using your example to calculate the percentage

Update: just saw your comment above, a non-zero SSR total might be good

[elliott-with-the-longest-name-on-github]

@ottomated Want to resolve the conflicts? I can give it a review after that's done.

[ottomated]

@elliott-with-the-longest-name-on-github should be good!

[elliott-with-the-longest-name-on-github]

This looks pretty darn good to me. I'll have another maintainer check it as a backup, but I'm pretty excited about it! Just a minor nit to start off

[elliott-with-the-longest-name-on-github]

Suggested change

	const file_offset_start = 1 + 4 + 2 + encoded_header.length + encoded_file_offsets.length;
	const file_offset_start = HEADER_BYTES + encoded_header.length + encoded_file_offsets.length;

[elliott-with-the-longest-name-on-github]

Some thoughts on API below...

Responding to this: #14878 (comment)

Alternatively, could we provide a percent getter that protects users from 0/0? So instead of actually having to do the division yourself, you just use progress().percent, which is 0 when size is 0 and is a float of 0.0 to 1.0 otherwise?

Additionally, does progress() need to be a function, or could it be a property? I haven't figured out if this is just a limitation of our proxy property chain stuff. If it's possible for progress to be a getter rather than a function, I think I'd like that better...

[elliott-with-the-longest-name-on-github]

We discussed this today and I think Rich and Simon will be stopping by to take a look, but overall: We definitely think there should be a precalculated "percentage complete" property, and we'd all prefer if .progress could be an accessor as opposed to a function call -- but I haven't had time to investigate if that's possible. We were also noodling over whether we should provide any sort of API for rolling up file upload progress, eg. if you wanted to show progress for the entire form.

[ottomated]

I would love it to be an accessor but the established pattern (.value, .issues) is a function call. This might be related to the whole proxy thing that allows fields to be named progress?