Doc | Asset Picker | Choose Asset.md

Choose Asset

The Choose Asset component opens a modal to allow you to select assets from your stack within an entry.

Usage

Use the Choose Asset component to open a modal for asset selection.

const openChooseAssetModal: (args?: {
   sdk: Extension;
   onSubmit: (images: Asset[]) => void;
   onCancel?: () => void;
   multiple?: boolean | {
       max: number;
   };
   only?: "image" | "video" | "audio" | "document" | "code" | "executable" | "archive";
   fileTypes?: string;
   size?: {
       min?: number;
       max?: number;
   };
   excludeAssetUids?: Array<string>
}) => Promise<void>;

Note: After initializing the Contenstack App SDK, the user will receive the SDK object.

For example,

ContentstackAppSDK.init()
.then((sdk) => {
setContentstackSDK(sdk) 
})

Types

Depending on the type of usage, users have multiple options for Choose Assets.

• Default Asset Picker: Lets you select a single asset of any type or size.
• Multi Type Asset Picker without Limit: Lets you select multiple assets.
• Multi Type Asset Picker with Limit: Lets you select multiple assets within the maximum set limit.
• Asset Picker with Specific Asset Type: Lets you select asset(s) of only specified asset types.
• Asset Picker with Specific File Types: Lets you select asset(s) of only specific file types.
• Asset Picker with File Size: Lets you select assets that meet minimum or maximum file size requirements.

Component API

Name	Type	Description	Default
only	string	Select from specific asset types "image","video","audio","document","code","executable","archive"	-
multiple	boolean or { max: number }	Select single or multiple assets	false
fileTypes	string	Select specific file types (identified by extension)	-
size	{ min: number, max: number }	Add minimum or/and maximum asset size	-
sdk	Extension	Contentstack SDK extension received from init request	Required
onSubmit	Function	Callback function that submits the selected asset	Required
onCancel	Function	Callback function that closes the asset selection modal	-
excludeAssetUids	Array<string>	Exclude specific assets from the asset selection modal	[]

Best Practices

• In order to conserve bandwidth, it is best to set a maximum file size and only allow optimized file types.

Screenshots