Asset Source API

As part of the Form API you can define custom asset sources for both file and image inputs.

The form API includes options for working with assets. The file and image properties will both let you add to or override the list of available asset sources for their respective form inputs, as well as enable or disable direct uploads.

• assetSourcesarray | AssetSource[]

  Accepts either a static array of asset source definitions or a callback function that returns the same. The callback is called with the current list of active asset sources as its first argument and a context object as the second.

• directUploadsboolean

  Whether or not to allow direct uploading of images/files. Defaults to true.

import {defineConfig} from 'sanity'
import {unsplashAssetSource} from 'sanity-plugin-asset-source-unsplash'
import {customSource} from './src/custom-asset-source'

export default defineConfig({
  // ...rest of config
  form: {
    image: {
      assetSources: (prev) => [...prev, unsplashAssetSource],
    },
    file: {
      assetSources: [customSource],
      directUploads: false,
    },
  },
})

These are the properties provided in the context object when defining asset sources using the callback function.

• datasetstring

  Name of the current dataset

• projectIdstring

  Unique ID for the project

• schemaobject | Schema

  The schema registry of your project. Use `schema.get("schemaTypeName") to retrieve any schema by name.

• currentUserobject | CurrentUser

  An object with info about the currently logged in user.

• getClientfunction | SanityClient

• Requirednamestring

  Unique identifier for the asset source

• Requiredtitlestring

  Human-readable name for the asset source

• RequiredcomponentReact.ComponentType

  A component that will let users browse and select images or files

• iconReact.ComponentType

  An icon for the asset source

• RequiredselectionTypestring

  If the opening interface selection type is 'single' or 'multiple'.

• RequiredselectedAssetsarray

  An array of Sanity assets if they are selected in the opening interface. These are Sanity asset documents.

• RequiredonSelect(Asset[])function

  When assets are selected and returned to props.onSelect, the Studio will make sure to upload the asset(s). If the selected asset is uploaded previously, the existing asset document and file will be used instead.

• RequiredonClosefunction

  The component must call props.onClose if the select action is canceled or closed somehow.

• dialogHeaderTitleReact.ReactNode

  A component that serves as the header element for the dialog window.

• assetTypestring

  Either file or image