Property form: drag-and-drop image upload + paths editor UX

[Kelsey-Ethyca]

Ticket [no ticket — demo branch]

Description Of Changes

Four UX improvements to the property form, targeting the demo/april branch:

1. Drag-and-drop image upload. The "Logo path" and "Icon path" text inputs in the property and action forms are replaced with an Upload.Dragger-based image picker. Selected files are read as base64 data URLs and stored in the existing logo_path / icon_path string fields, so the privacy center config schema is unchanged. A thumbnail preview and Remove button are shown once a file is set. Files over 2MB or non-image MIME types are rejected client-side.
2. PathsEditor — paths editor commit UX. Previously the only way to commit a typed path into the form value was pressing Enter; clicking Save with text still in the input silently dropped it. Adds a visible Add button (disabled while empty) and commits the draft on blur.
3. PathsEditor — auto-prefix /. Paths must start with / to match in the privacy center, but the input let users save myprop (which silently never matched). The editor now normalizes myprop → /myprop on commit; an existing leading slash is preserved.
4. PathsEditor — convert spaces to hyphens. Spaces aren't valid in URL path segments. Runs of whitespace are live-replaced with a single hyphen as the user types (so my path becomes my-path in the input), and stray leading/trailing hyphens are stripped on commit so pasting hello world yields /hello-world.

Also fixes two latent antd v6 deprecations along the way (Space direction → orientation, Alert message → description).

Code Changes

• New clients/admin-ui/src/features/properties/privacy-center-config/ImageUploadField.tsx — reusable drag-and-drop image picker built on Upload.Dragger; reads files as base64 data URLs (max 2MB), shows thumbnail preview, Remove button, and inline error messaging.
• ActionEditModal.tsx — replace the icon path <Input> with <ImageUploadField />; rename label "Icon path" → "Icon".
• PrivacyCenterConfigSection.tsx — replace the logo path <Input> with <ImageUploadField>, manually wired to logo_path.
• PathsEditor.tsx — add Add button; commit on blur; auto-prefix /; live-convert whitespace to - on input; strip leading/trailing - on commit; replace deprecated Space direction and Alert message props.
• __tests__/ActionEditModal.test.tsx — mock ImageUploadField with a plain text input (same pattern used for Select) so the existing form-submission assertion still runs in jsdom.

Steps to Confirm

1. Open admin-ui at http://localhost:3000, navigate to Settings → Properties → (any property).
2. Logo upload: under "Privacy center config", click or drag an image file onto the Logo dropzone. Confirm a thumbnail appears and "Click or drag to replace" is shown.
3. Icon upload: click "Add action" (or edit one), drag/drop an image into the Icon dropzone. Confirm preview appears and the Save button enables.
4. Save the property. Reload — confirm the images persist.
5. Privacy center display: visit the privacy center at the property's path (e.g. http://localhost:3001/<path>); confirm the uploaded logo renders. (Privacy center pulls from API config when accessed via property path or with FIDES_PRIVACY_CENTER__USE_API_CONFIG=true.)
6. PathsEditor — commit on blur / Add button: edit a property's "Privacy center paths". Type a path and click Save without pressing Enter — confirm the path is captured. Confirm the Add button is disabled when the input is empty.
7. PathsEditor — auto-prefix /: type a path without a leading slash (e.g. myprop) and commit — confirm it saves as /myprop. Type one with a slash (/foo) — confirm it stays /foo.
8. PathsEditor — spaces to hyphens: type my path — confirm the input shows my-path as soon as you press space. Paste hello world — confirm it becomes -hello-world- in the input and saves as /hello-world after commit.
9. Validation: try uploading a non-image file or a >2MB file — confirm an inline error appears.

Pre-Merge Checklist

• Issue requirements met (no ticket — demo branch)
• All CI pipelines succeeded
• CHANGELOG.md updated (see changelog/8151-image-upload-and-paths-editor-ux.yaml)
  • Add a db-migration label to the entry if your change includes a DB migration
  • Add a high-risk label to the entry if your change includes a high-risk change
  • Updates unreleased work already in Changelog, no new entry necessary
• UX feedback:
  • All UX related changes have been reviewed by a designer
  • No UX review needed (demo branch)
• Followup issues:
  • Followup issues created
  • No followup issues
• Database migrations:
  • Ensure that your downrev is up to date with the latest revision on main
  • Ensure that your downgrade() migration is correct and works
    • If a downgrade migration is not possible for this change, please call this out in the PR description!
  • No migrations
• Documentation:
  • Documentation complete, PR opened in fidesdocs
  • Documentation issue created in fidesdocs
  • If there are any new client scopes created as part of the pull request, remember to update public-facing documentation that references our scope registry
  • No documentation updates required

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ready	Preview, Comment	May 9, 2026 6:51pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
fides-privacy-center	Ignored		May 9, 2026 6:51pm

[Kelsey-Ethyca]

Screen.Recording.2026-05-09.at.2.19.42.PM.mov

[Kelsey-Ethyca]

Screen.Recording.2026-05-09.at.2.47.01.PM.mov

[github-actions]

Title	Lines	Statements	Branches	Functions
admin-ui		8.18% (3782/46217)	7.2% (1905/26436)	5.67% (770/13572)
fides-js		79.39% (2011/2533)	65.99% (1240/1879)	73.09% (345/472)
privacy-center		85.97% (331/385)	81.36% (179/220)	78.87% (56/71)

[lucanovera]

All the features worked as expected. These looks like all good UX improvements.

I do want to callout the image upload as base64 must be for demo purposes only.
The images as part of the config file increases the size from a few kbs to multiple megabytes with the images (logo + 1 for each actions), it's not cached in the browser or server, overall not a good practice.

For production, we need to implement the upload to an actual file storage service like s3. This is a very useful feature, so let's create those followup tickets for the production ready approach.