[PP-1] Add support for example images for Code Components' image props

Created on 30 July 2025, 3 days ago

Overview

When creating a code component that uses the "image" prop shape, an example value should be possible to specify.

Proposed resolution

We need to be able to upload an example to use
There are 3 parts to this:

  1. BLOCKER: šŸ“Œ `JavaScriptComponent` config entities must support default images: `File` content entity dependency, base64-encoded upon export Active
    šŸ‘† JavaScriptComponent config entities must be able to store & synchronize props examples that require a file to exist on disk, and should use File entities + content dependencies + import/export transformation.
  2. Add HTTP API support to let the code component editor UI upload files. However, file uploads are a tricky beast, and there's many different ways to go about it. #1927648: Allow creation of file entities from binary data via REST requests → took years to get to work. A huge refactor happened in #3232248: Move _file_save_upload_single to a service and deprecate → , thanks to FileUploadHandler, which updated both REST file uploads ( šŸ“Œ Refactor FileUploadResource to use FileUploadHandler RTBC ) and JSON:API file uploads ( šŸ“Œ [PP-1] Refactor JSON-API file uploads to use FileUploadHandler Postponed ).
  3. Update the code component editor UI to actually use that HTTP API. Details TBD — but whatever fits best in how the code component editor is built.

Because of the inherent intertwinedness, and because choices in either affect the other, it's preferable to tackle both in a single issue — either as separate MRs, or even as a single one. It's probably preferable that the UI pieces happen first, where the people working on the JS code convey through code and/or issue comments how they'd want to see the server-side pieces work.

The server-side pieces MUST use core's FileUploadHandler, but the exact URL, request body etc have myriad possible decisions, so let's make things as simple as possible for the client side 😊

User interface changes

Ability to upload example images!

✨ Feature request
Status

Postponed

Version

1.0

Component

Theme builder

Created by

šŸ‡§šŸ‡ŖBelgium wim leers Ghent šŸ‡§šŸ‡ŖšŸ‡ŖšŸ‡ŗ

Live updates comments and jobs are added and updated live.
  • Needs screenshots

    The change alters the user interface, so before and after screenshots should be added to document the UI change. Make sure to capture the relevant region only. Use a tool such as Aviary on Windows or Skitch on Mac OS X.

Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024