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
orimage
Was this page helpful?