👀 Our most exciting product launch yet 🚀 Join us May 8th for Sanity Connect

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.

Properties

  • 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.

Example

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,
    },
  },
})

Context properties

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

Asset source properties

  • 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

Asset source selection component props

  • 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

Was this article helpful?