Overview

import AssetPicker from "@components/asset-picker/AssetPicker";

Description

The AssetPicker component provides a modal interface for selecting assets from your media library. It allows users to browse folders, view assets, and select one or multiple assets.

Usage Examples

Basic Usage

import React, { useState } from "react";
import { Button } from "@tag/tag-components-react-v4";
import AssetPicker from "@components/asset-picker/AssetPicker";

function MyComponent() {
  const [openAssetPicker, setOpenAssetPicker] = useState(false);

  return (
    <>
      <Button accent="teal" onClick={() => setOpenAssetPicker(true)}>
        Select Assets
      </Button>

      <AssetPicker
        visible={openAssetPicker}
        onClose={() => setOpenAssetPicker(false)}
        onSelect={(selectedAsset) => {
          console.log("Selected asset:", selectedAsset);
          // Handle the selected asset
        }}
      />
    </>
  );
}

Output Example

When assets are selected, the onSelect callback receives an array of asset objects. Here's an example of the output:

[
  {
    cid: "2e0pQdEDYC9ZVIFiJGLjFQ==",
    assetName: "file_example_GIF_3500kB.gif",
    assetType: 2,
    assetTypeName: "Image",
    assetSize: "Large",
    keywords: "Food",
    createDate: "2025-03-11T10:44:37.92",
    assetEmailLink: null,
    cFolderID: "QY/AaGWDIKqY3jB7Niaj5A==",
    width: 5760,
    height: 3840,
    brandName: null,
    isFavourite: false,
    extension: "gif",
    duration: null,
    isShared: false,
    assetDataSize: 3649209,
    assetUrl: "https://www.example.com",
    assetThumbnailUrl: "https://www.example.com",
    assetThumbnailVideoUrl: "https://www.example.com",
    uploadedBy: "Test",
    availableFor: [
      {
        name: "Social Media",
        cid: "O+EadAcbjW/gBHJeXy5zcg==",
      },
    ],
    assets_Keywords: [
      {
        keywordText: "Food",
        brandID: null,
        cid: "DcIBXaahclM0bjt9Z34qJg==",
      },
    ],
    assets_Templates: [],
    assetAlt: "Test",
    brandID: 409,
    folderName: "Test",
    updatedOn: null,
    customField1: "customValue1",
    customField2: "customValue2",
  },
];

Props

Prop Name	Type	Default Value	Description
visible	boolean	required	Controls the visibility of the modal
onClose	function	required	Callback function when the modal is closed
onSelect	function	required	Callback function that receives the selected asset(s)
isMultiple	boolean	false	Allows selection of multiple assets when set to true
globalFilter	object	null	Optional filter to apply to the asset listing
extraFields	array	null	Optional additional fields to add to the selected assets
validationRules	array	null	Optional rules to validate selected assets

globalFilter Object Properties

Property	Type	Description
EmailID	string | null	Encrypted email ID to filter assets by Email Template, or null
BrandID	string | null	Encrypted brand ID to filter assets by, or null
Types	array	Array of asset type IDs: 2 (Images), 3 (Files), 4 (Videos)
Sizes	array	Array of size IDs: 1 (Small), 2 (Medium), 3 (Large)
AvailableFor	strings array | null	Encrypted Channel ID(s) to filter assets by, or null

validationRules Array Properties

Each validation rule in the array is an object with the following properties:

Property	Type	Description
condition	function	Function that takes an asset object and returns boolean (true = passes validation)
message	string	Message to display when the condition is not met
isError	boolean	If true, prevents selection of assets that fail validation; if false, shows only a warning