sveltejs / sveltejs/kit

`use:enhance` with input `type="hidden"` causes significant data loss for base64-encoded images

Open
#9,478 3 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

forms
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.svelte
  • routes/+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.

DALL·E 2023-02-25 11 12 02 - a load of houses being built on the planet Pluto with a fisheye perspective, digital art

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.