Skip to content

Wallet image upload fails with a 500 for any file over ~1MB, although the UI promises 5MB #834

Description

@mahdi2ba

What happens

The Customize screen says "Max size: 5MB" and its own check allows anything under 5MB. The server
only accepts about 1MB. So any image between ~1MB and 5MB passes the browser check, gets uploaded,
and the server returns a 500. Nothing is saved and the user is shown no error at all.

Confirmed with a file just under 5MB:

PATCH https://dev-k8s.treetracker.org/wallet/keycloak/wallets/9803a51e-d64c-4482-92da-e0318bf42353
500 (Internal Server Error)

The wallet's logo_url and cover_url in the database were unchanged afterwards, so the image really
was lost.

Steps to reproduce

  1. Log in, Wallet -> tap a wallet -> Customize
  2. Upload a logo or hero image of about 2MB (anything between roughly 1MB and 5MB)
  3. Tap Save

Actual result
No error, no confirmation. The image is not saved. The console shows a 500 on the PATCH.

Expected result
Either the file is accepted (if 5MB really is the intended limit), or the user is told clearly that
the file is too large, before or after upload.

Root cause

Two different limits, four million bytes apart:

apps/web/src/app/(protected)/wallet/customize/page.tsx:25
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5,242,880 bytes
-> also shown to the user as "Max size: 5MB" at lines 288 and 335

server/routes/walletRouter.js:29 (wallet-api, keycloak branch)
const imageUpload = multer({ ..., limits: { fileSize: 1000000 } });
-> 1,000,000 bytes, about 0.95MB

And the rejection is not handled. There is no MulterError handling in walletRouter.js, so when
multer aborts the upload the generic handler at server/app.js:58 turns it into a 500 instead of a
clear "file too large" response.

The frontend then swallows that 500 and shows nothing.

Suggested fix

  1. Make the two limits match. Decide which is correct — I would suggest raising the server limit to
    5MB so the UI's promise holds, but if 1MB is deliberate (S3 cost, page weight), lower the UI
    constant and the on-screen text instead. Either way they must agree.

  2. Handle the multer rejection properly. Catch MulterError / LIMIT_FILE_SIZE in walletRouter.js and
    return a 413 (or 422) with a readable message, rather than letting it become a 500.

  3. Show the error to the user on the Customize screen instead of failing silently.

Notes

  • Files under ~1MB upload and save correctly, so the feature works — it is only the size handling
    that is broken.
  • Note there is a second multer instance in the same file with limits.fileSize = 500000 for a
    different route. Worth checking that one is intentional while you are in there.
  • Related: uploaded images are currently never displayed anywhere (separate ticket).

Activity

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

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions