Smooth CDN – Asset Picker

Smooth CDN Asset Picker is a reusable module for browsing and selecting assets from Smooth CDN projects.

It supports React integration and a standalone browser build.

The picker can load assets from a project, display them in grid or list mode, preview images, and handle single or multiple selection.

Requirements

• Smooth CDN project (user slug + project slug)
• Node.js >= 18.17.0 (recommended: Node.js 20 LTS)

Installation

npm install @smoothcdn/asset-picker

Standalone usage

Load the standalone bundle and mount picker:

<link rel="stylesheet" href="https://cdn.smoothcdn.com/smoothcdn/asset-picker/latest/styles.css" />
<script src="https://cdn.smoothcdn.com/smoothcdn/asset-picker/latest/web.js"></script>
<script>
  const handle = window.SmoothCdnAssetPicker.mountAssetPicker({
    userSlug: "user-slug",
    projectSlug: "project-slug",
    // version: "latest",
    // fileType: "image",
    multiple: true,
    onSelectionChange: (selectedUrls) => {
      console.log(selectedUrls);
    }
  });

  handle.open();
</script>

Standalone options

• userSlug?: string – Smooth CDN user slug (required at runtime)
• projectSlug?: string – Smooth CDN project slug (required at runtime)
• version?: string – optional project version
• fileType?: "image" | "audio" | "document" | "text" – optional filter for displayed assets
• multiple?: boolean – true for multi-select, false for single-select
• title?: string
• defaultOpen?: boolean
• onSelectionChange?: (selectedUrls) => void
• onCancel?: () => void
• onClear?: () => void

React usage

import { useState } from "react";
import { AssetPickerModal } from "@smoothcdn/asset-picker/react";
import "@smoothcdn/asset-picker/styles.css";

export const Example = () => {
  const [open, setOpen] = useState(false);
  const [selected, setSelected] = useState<string[]>([]);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open picker</button>
      <AssetPickerModal
        open={open}
        onOpenChange={setOpen}
        userSlug="user-slug"
        projectSlug="project-slug"
        version="latest"
        fileType="image"
        multiple={true}
        selected={selected}
        onSelectionChange={(selectedUrls) => {
          setSelected([...selectedUrls]);
          console.log(selectedUrls);
        }}
      />
    </>
  );
};

React modal options

• selected?: string[] – optional externally provided selection used when the dialog opens. Values can be full asset URLs or asset paths.