Doc | Asset Picker | Upload Asset.md

Upload Asset

The Upload Asset component opens a modal to allow you to select assets from your local system and upload the selected asset into Contentstack Asset Manager.

Usage

Use the Upload Asset component to open a modal to upload assets.

const openUploadAssetModal: (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;
   };
}) => void;

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

For example,

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

Types

Depending on the type of usage, users have multiple options for Uploading 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

Property Name	Type	Description	Default
only	string	Select from specific asset type only "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	ContentstackSDK extension received from init call.	Required
onSubmit	Function	Callback function that submits the selected asset.	Required
onCancel	Function	Callback function that cancels 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