Custom field types: let controls add files to the entry draft so they upload on save

[odama626]

Use case

A custom field type that stores several files derived from one image: { original, tiny, optimized, aspectRatio }. The control takes the upload, generates a 50px WebP thumbnail and a resized WebP in the browser, and stores all three paths plus the aspect ratio.

Problem

Custom controls receive value, field, forID, classNameWrapper, entry and onChange, but have no way to hand a file to the CMS. getFieldType('image') returns undefined, so the built-in control can't be wrapped either.

The only workaround is committing the files from a preSave hook with the backend token read from localStorage['sveltia-cms.user']. That also means re-fetching and parsing the config to find repo, branch and publish_mode, and reproducing the cms/<collection>/<slug> branch naming. It's fragile, produces an extra commit per save, and can't work with Open Authoring.

Why this looks like a small change

The save pipeline already ignores field type. createBaseSavingEntryData scans every string in the flattened entry content for blob URLs, including strings nested in object values, and uploads any blob whose File is in draft.files. The only thing missing is a way to write to draft.files, which today only the built-in File/Image editor does (services/contents/fields/file/process.js).

Proposal

A control prop that registers a file with the draft and returns a blob URL:

const original = this.props.addFile(file);
const tiny = this.props.addFile(tinyBlob);
const optimized = this.props.addFile(optimizedBlob);
this.props.onChange({ original, tiny, optimized, aspectRatio });

On save, the blob URLs are replaced with public paths, and the files are committed with the entry. That would happen in the same commit and on the same branch as the entry, with the usual folder resolution, file naming and dedup. An optional second argument for the target folder would be nice but isn't required, since the field's or collection's media folder is a sensible default.

For comparison, Decap passes undocumented onPersistMedia and mediaPaths props to widgets for similar purposes. A documented equivalent would cover this and similar custom fields.

[kyoshino]

For comparison, Decap passes undocumented onPersistMedia and mediaPaths props to widgets for similar purposes. A documented equivalent would cover this and similar custom fields.

Will figure out how Netlify/Decap CMS handles this.

• https://github.com/decaporg/decap-cms/issues?q=%22persistmedia%22
• feat: #5082 add persistMedia function in widget props decaporg/decap-cms#5124

[kyoshino]

Claude said adding the addFile method makes sense and implemented it. We’ll ship it today.

[kyoshino]

The addFile method added in v0.210.0.