Files SDK

npm install @fluid-app/dam-picker

import { DamPicker } from '@fluid-app/dam-picker';

const picker = new DamPicker({
  token: 'pub-your-public-token',
  onSelect: (result) => {
    console.log('Selected:', result.asset.url);
  },
});

picker.open();

// Images only
{ accept: ['image/*'] }

// Videos only
{ accept: ['video/*'] }

// PDF documents only
{ accept: ['application/pdf'] }

// Images and PDFs
{ accept: ['image/*', 'application/pdf'] }

// SVG files only
{ accept: ['.svg'] }

// Audio files only
{ accept: ['audio/*'] }

// Upload and library only
{ fromSources: ['local_file_system', 'dam_library'] }

// External sources only
{ fromSources: ['url', 'unsplash'] }

// Single file upload (no browsing)
{ fromSources: ['local_file_system'] }

// All sources (default)
{ fromSources: ['local_file_system', 'url', 'dam_library', 'unsplash', 'ai_generate'] }

// All transformations enabled (default)
{ transformations: { crop: true, rotate: true, quality: true, removeBackground: true, changeBackground: true, upscale: true, retouch: true, dropShadow: true, smartCrop: true, editWithAi: true } }

// Only crop and rotate
{ transformations: { crop: true, rotate: true, quality: false, removeBackground: false, changeBackground: false, upscale: false, retouch: false, dropShadow: false, smartCrop: false, editWithAi: false } }

// Only AI tools (no manual crop/rotate)
{ transformations: { crop: false, rotate: false, quality: false } }

// Skip transformations entirely
{ transformations: false }

// Single select (default)
{ maxFiles: 1 }

// Multi-select up to 5
{ maxFiles: 5 }

// Require at least 2, up to 4
{ minFiles: 2, maxFiles: 4 }

// Max 5 MB
{ maxSize: 5 }

// Max 1 MB, images only
{ maxSize: 1, accept: ['image/*'] }

// Exact dimensions (800x600)
{ imageDim: [800, 600] }

// Maximum dimensions (1920x1080)
{ imageMax: [1920, 1080] }

// Minimum dimensions (400x400)
{ imageMin: [400, 400] }

const picker = new DamPicker({
  token: 'pub-xxxxx',
  accept: ['image/*'],
  maxSize: 10,
  imageMin: [1200, 600],
  maxFiles: 1,
  onSelect: (result) => setHeroImage(result.asset.url),
});

const picker = new DamPicker({
  token: 'pub-xxxxx',
  accept: ['image/*'],
  maxSize: 5,
  imageMin: [400, 400],
  minFiles: 3,
  maxFiles: 8,
  onSelect: (result) => setGalleryImages(result.assets.map(a => a.url)),
});

const picker = new DamPicker({
  token: 'pub-xxxxx',
  accept: ['image/*'],
  maxSize: 2,
  imageMin: [200, 200],
  fromSources: ['local_file_system', 'url'],
  maxFiles: 1,
  onSelect: (result) => setAvatar(result.asset.url),
});

const picker = new DamPicker({
  token: 'pub-xxxxx',
  accept: ['application/pdf'],
  maxSize: 25,
  maxFiles: 5,
  fromSources: ['local_file_system', 'url'],
  transformations: false,
  onSelect: (result) => attachDocuments(result.assets),
});

const picker = new DamPicker({
  token: 'pub-xxxxx',
  accept: ['image/*'],
  transformations: {
    crop: true,
    rotate: false,
    quality: false,
    removeBackground: true,
    changeBackground: false,
    upscale: false,
    retouch: false,
    dropShadow: false,
    smartCrop: false,
    editWithAi: false,
  },
  onSelect: (result) => setProductImage(result.asset.url),
});

const picker = new DamPicker({
  token: 'pub-xxxxx',
  asset: { url: 'https://ik.imagekit.io/fluid/your-company/image.jpg' },
  onSelect: (result) => {
    console.log('Transformed:', result.asset.url);
  },
  onCancel: () => console.log('Cancelled'),
});

picker.open();

{ asset: { assetCode: 'ABC123' } }

{ asset: { url: 'https://...', assetCode: 'ABC123', name: 'My Image' } }

interface DamPickerResult {
  /** The first (or only) selected asset */
  asset: SelectedAsset;
  /** All selected assets (always an array, even for single-select) */
  assets: SelectedAsset[];
}

interface SelectedAsset {
  url: string;           // Public URL
  assetCode: string;     // Unique asset identifier
  name: string;          // Display name
  mimeType: string;      // e.g. "image/png", "video/mp4"
  variantId?: string;    // ID of the selected variant
  metadata?: {
    width?: number;
    height?: number;
    fileSize?: number;
  };
}

onSelect: (result) => {
  // Single select — use result.asset
  const { url, assetCode, mimeType } = result.asset;
  document.querySelector('img').src = url;

  // Multi-select — iterate result.assets
  result.assets.forEach((asset) => {
    console.log(`${asset.name}: ${asset.url}`);
  });

  // Check dimensions
  if (result.asset.metadata?.width) {
    console.log(`${result.asset.metadata.width}x${result.asset.metadata.height}`);
  }
}

interface DamPickerError {
  code: 'AUTHENTICATION_ERROR' | 'NETWORK_ERROR' | 'TIMEOUT' |
        'VALIDATION_ERROR' | 'UPLOAD_ERROR' | 'SCOPE_ERROR' | 'UNKNOWN';
  message: string;
}

import { useDamPicker } from '@fluid-app/dam-picker/react';

function ImageSelector() {
  const [imageUrl, setImageUrl] = useState<string | null>(null);
  const { open, isOpen } = useDamPicker({ token: 'pub-xxxxx' });

  return (
    <div>
      <button onClick={() => open({
        accept: ['image/*'],
        maxSize: 5,
        onSelect: (result) => setImageUrl(result.asset.url),
      })} disabled={isOpen}>
        Choose Image
      </button>
      {imageUrl && <img src={imageUrl} alt="Selected" />}
    </div>
  );
}

import { DamPickerModal } from '@fluid-app/dam-picker/react';

function ImageSelector() {
  const [isOpen, setIsOpen] = useState(false);
  const [imageUrl, setImageUrl] = useState<string | null>(null);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Choose Image</button>
      {imageUrl && <img src={imageUrl} alt="Selected" />}

      <DamPickerModal
        isOpen={isOpen}
        token="pub-xxxxx"
        accept={['image/*']}
        maxFiles={1}
        maxSize={10}
        onSelect={(result) => {
          setImageUrl(result.asset.url);
          setIsOpen(false);
        }}
        onCancel={() => setIsOpen(false)}
      />
    </div>
  );
}

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { DamPicker } from '@fluid-app/dam-picker';

const imageUrl = ref(null);
let picker = null;

onMounted(() => {
  picker = new DamPicker({
    token: 'pub-xxxxx',
    accept: ['image/*'],
    onSelect: (result) => { imageUrl.value = result.asset.url },
  });
});

onUnmounted(() => picker?.destroy());
</script>

<template>
  <button @click="picker?.open()">Choose Image</button>
  <img v-if="imageUrl" :src="imageUrl" alt="Selected" />
</template>

import { Component, OnDestroy } from '@angular/core';
import { DamPicker } from '@fluid-app/dam-picker';

@Component({
  selector: 'app-image-selector',
  template: `
    <button (click)="openPicker()">Choose Image</button>
    <img *ngIf="imageUrl" [src]="imageUrl" alt="Selected" />
  `,
})
export class ImageSelectorComponent implements OnDestroy {
  imageUrl: string | null = null;
  private picker = new DamPicker({
    token: 'pub-xxxxx',
    accept: ['image/*'],
    onSelect: (result) => { this.imageUrl = result.asset.url },
  });

  openPicker() { this.picker.open() }
  ngOnDestroy() { this.picker.destroy() }
}

frame-src https://admin.fluid.app;