`use:enhance` with input `type="hidden"` causes significant data loss for base64-encoded images
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Describe the bug
When using the use:enhance directive with a form action, there is significant data loss between the client and the server. In this case, I'm passing base64-encoded PNG image data via a hidden input.
The client correctly converts to base64 and reports the correct length for the base64 image data (~1.76MB). When the data is sent to the server, the server reports that the length of the file is much less (~767kB), and the data is truncated.
I noticed this when uploading the base64-encoded data to a storage bucket and redownloading the file - only ~half the image data was transferred.
This issue disappears when the use:enhance directive is removed, and the server receives the full image.
Reproduction
https://stackblitz.com/edit/sveltejs-kit-template-default-ezby2t?file=src/routes/+page.svelte
Relevant files are:
routes/+page.svelteroutes/+page.server.js
To see the bug in action, upload the following PNG file (assuming GitHub doesn't compress it), then click the Submit button. You should see that the file size reported by the client and server differ. This issue disappears if use:enhance is removed from the form.
Note: the use of the store is not strictly necessary, but when I discovered this bug, I was working across multiple pages and using a store to transfer the data, so I've included it in this reproduction.

Logs
Server:
{ size: 1048576, last10: 'SGZWDcghqZ' }
System Info
(from StackBlitz)
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 16.14.2 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 7.17.0 - /usr/local/bin/npm
npmPackages:
@sveltejs/adapter-auto: ^2.0.0 => 2.0.0
@sveltejs/kit: ^1.5.0 => 1.13.0
svelte: ^3.54.0 => 3.57.0
vite: ^4.2.0 => 4.2.1
Severity
serious, but I can work around it
Additional Information
No response
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.
Research direction
Run the linked StackBlitz reproduction and inspect routes/+page.svelte and routes/+page.server.js, comparing submissions with and without use:enhance. Confirm the client and server-reported sizes for the base64 image; done means the server receives the complete value when the enhanced form is used.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- full-stack, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100