RegistryImageWidget: stray '}' appended to base64 data on file upload

[mpalomaki]

Description

RegistryImageWidget appends a stray } character to the base64 data of every uploaded file due to a template literal bug. This produces invalid data URIs that browsers cannot decode, causing uploaded images (e.g. site logo) to appear blank.

Location

packages/volto/src/components/manage/Widgets/RegistryImageWidget.jsx, line 102:

onChange(id, `filenameb64:${btoa(file.name)};datab64:${fields[3]}}`);

The template literal ${fields[3]}} has a double }} — the first } closes the template expression, the second } is a literal character that gets appended to the output string.

Expected

filenameb64:TG9nby5zdmc=;datab64:PD94bWw...Zz4K

Actual

filenameb64:TG9nby5zdmc=;datab64:PD94bWw...Zz4K}
                                               ^ invalid base64 character

Impact

Any backend that constructs a data URI from the stored value produces an invalid URI:

data:image/svg+xml;base64,PD94bWw...Zz4K}  ← browser cannot decode

The site logo appears blank after upload, even though the data is otherwise correctly stored and retrieved.

Fix

One-character change:

- onChange(id, `filenameb64:${btoa(file.name)};datab64:${fields[3]}}`);
+ onChange(id, `filenameb64:${btoa(file.name)};datab64:${fields[3]}`);

Reproduction

1. Any Volto + Plone/Nick installation
2. Site Setup → Site → upload a logo image → Save
3. Inspect the stored value — it ends with }
4. The @site endpoint constructs a data URI with the trailing }, which browsers reject

Versions

Confirmed present in:

• Volto 19.0.0-alpha.24
• Current main branch

Related

• Nick CMS PR: Fix controlpanel file/image field handling (site logo) robgietema/nick#19 (includes server-side workaround that strips trailing } on read)

[boring-cyborg]

Thanks for opening your first issue here! Your engagement is essential for open source projects, including Plone. 🤗

If you haven't done so already, read Plone's Code of Conduct. Also please follow the issue template, as it helps both you and other community members contribute more effectively.

If your issue is a feature request, others may raise its prominence through feature voting.

Welcome to the Plone community! 🎉