Skip to content

feat: File Upload Progress - #14878

Open
ottomated wants to merge 59 commits into
sveltejs:mainfrom
ottomated:upload-progress
Open

feat: File Upload Progress#14878
ottomated wants to merge 59 commits into
sveltejs:mainfrom
ottomated:upload-progress

Conversation

@ottomated

@ottomated ottomated commented Nov 2, 2025

Copy link
Copy Markdown
Contributor

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-bot Bot commented Nov 2, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 62315c4

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

Comment on lines +220 to +222
uploaded: 0,
total: 0
}) /* upload progress is always 0 on the server */

@rChaoz rChaoz Dec 3, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@teemingc teemingc added the forms Stuff relating to forms and form actions label Jan 13, 2026
@elliott-with-the-longest-name-on-github

Copy link
Copy Markdown
Contributor

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

@ottomated

Copy link
Copy Markdown
Contributor Author

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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread packages/kit/src/runtime/form-utils.js Outdated
blob_parts.push(file);
}

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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown
Contributor Author

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?

@svelte-docs-bot

Copy link
Copy Markdown

@HexiDev

This comment was marked as duplicate.

@chillingpulsar

This comment was marked as duplicate.

@ottomated

Copy link
Copy Markdown
Contributor Author

nasty nasty merge conflicts from #15657 should be fixed

@YSpoof

This comment was marked as low quality.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

forms Stuff relating to forms and form actions

Projects

None yet

Development

Successfully merging this pull request may close these issues.

9 participants