Was this page helpful?
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.
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.
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.
Name of the current dataset
Unique ID for the project
The schema registry of your project. Use `schema.get("schemaTypeName") to retrieve any schema by name.
An object with info about the currently logged in user.
If the opening interface selection type is 'single' or 'multiple'.
An array of Sanity assets if they are selected in the opening interface. These are Sanity asset documents.
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.
The component must call props.onClose if the select action is canceled or closed somehow.
A component that serves as the header element for the dialog window.
Either file or image
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,
},
},
})