Image

The image type handles image uploads. It provides a drag-and-drop upload zone, image preview, alt text editing, and an asset browser for reusing previously uploaded images.

Definition

import type { ImageField } from '@aphexcms/cms-core';

{
  name: 'cover',
  type: 'image',
  title: 'Cover Image'
}

Properties

Property	Type	Required	Description
`name`	`string`	Yes	Field identifier.
`type`	`'image'`	Yes	Must be `'image'`.
`title`	`string`	Yes	Label shown in the admin UI.
`description`	`string`	No	Help text shown below the label.
`accept`	`string`	No	MIME type filter for the file input. Defaults to `'image/*'`.
`private`	`boolean`	No	If `true`, the asset CDN route requires an authenticated session with access to its org.
`initialValue`	`string \| () => string \| Promise<string>`	No	Default value.
`validation`	`(Rule) => Rule`	No	Validation rules.

The type definition also includes hotspot, metadata, and fields properties. These are reserved for future use and are not yet implemented.

Stored Data

Images are stored as a reference to an asset record:

{
  _type: 'image',
  asset: {
    _type: 'reference',
    _ref: 'asset-id'
  }
}

The referenced asset stores the actual file metadata (URL, filename, dimensions, alt text, etc.) separately in the assets table.

Examples

Basic image

{
  name: 'photo',
  type: 'image',
  title: 'Photo',
  validation: (Rule) => Rule.required()
}

Restricted file types

{
  name: 'logo',
  type: 'image',
  title: 'Logo',
  accept: 'image/svg+xml,image/png',
  description: 'SVG or PNG only.'
}

Private image

Mark a field private when the image should only be served to authenticated members of the owning organization:

{
  name: 'idScan',
  type: 'image',
  title: 'ID Scan',
  private: true
}

Requests to /media/[id]/[filename] for a private asset return 401 unless the request carries a valid session (or a signed URL).

In a document

const product: SchemaType = {
	type: 'document',
	name: 'product',
	title: 'Product',
	fields: [
		{
			name: 'name',
			type: 'string',
			title: 'Name',
			validation: (Rule) => Rule.required()
		},
		{
			name: 'image',
			type: 'image',
			title: 'Product Image'
		},
		{
			name: 'price',
			type: 'number',
			title: 'Price',
			validation: (Rule) => Rule.required().positive()
		}
	]
};

Validation

Available rules: required(), custom(fn), error(msg), warning(msg), info(msg)

Image

On this page