@fluid-app/dam-捡取器

Fluid Commerce应用程序的可嵌入 DAM(数字资产管理)文件取取器.

特征

• 浏览 DAM 库 - 搜索和导航您的现有资产
• 上传文件 - 拖放或点击计算机上传
• 从 URL 从中导入 - 从任何公共 URL 直接导入文件
• 资产类型过滤 - 通过图像、视频、文档或音频过滤
• 框架不可知论 - 与React、Vue、Angular或香草JavaScript合作

安装

npm install @fluid-app/dam-picker
# or
pnpm add @fluid-app/dam-picker
# or
yarn add @fluid-app/dam-picker

快速启动

香草 Java 脚本

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

const picker = new DamPicker({
  token: 'your-fluid-api-token',
  onSelect: (assets) => {
    console.log('Selected asset:', assets[0].url);
    // Use the asset URL in your application
  },
  onCancel: () => {
    console.log('User cancelled');
  },
  onError: (error) => {
    console.error('Error:', error.message);
  },
});

// Open the picker
document.getElementById('choose-image').addEventListener('click', () => {
  picker.open();
});

反应 (Hook)

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

function ImageSelector() {
  const [imageUrl, setImageUrl] = useState(null);
  const { open } = useDamPicker({ token: 'your-fluid-api-token' });

  const handleChooseImage = () => {
    open({
      onSelect: (assets) => setImageUrl(assets[0].url),
      onCancel: () => console.log('Cancelled'),
    });
  };

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

反应( 组件)

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

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

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

      <DamPickerModal
        isOpen={isOpen}
        token="your-fluid-api-token"
        onSelect={(assets) => {
          setImageUrl(assets[0].url);
          setIsOpen(false);
        }}
        onCancel={() => setIsOpen(false)}
      />
    </div>
  );
}

API 参考

达姆派克

香草JavaScript使用的主要类.

构造选项

方法

• open() - 打开拾取模式
• close() - 关闭拾取模式
• destroy() - 清理拾取者实例
• isOpen() - 返回拾取器当前是否打开

选集

选择时返回的资产对象(无论是从库选择还是上传).

interface SelectedAsset {
  url: string;           // Public URL to the asset
  assetCode: string;     // Unique asset identifier
  name: string;          // Display name
  mimeType: string;      // MIME type (e.g., "image/png")
  metadata?: {
    width?: number;      // Image/video width
    height?: number;     // Image/video height
    fileSize?: number;   // File size in bytes
  };
  variantId?: string;    // Selected variant ID (if applicable)
}

达姆派克错误

错误对象传递到 Error 调用 .

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

过滤资产类型

您可以限制哪些资产类型用户可以浏览并上传 :

const picker = new DamPicker({
  token: 'your-token',
  filters: {
    assetTypes: ['images', 'videos'], // Only show images and videos
  },
  onSelect: (assets) => console.log(assets),
});

可用资产类型:

• 'images' - 图像文件(jpg、png、gif、webp、svg等)
• 'videos' - 视频文件(mp4、webm、mov等)
• 'documents' - 文件(pdf、Doc、docx、xls、xlsx等)
• 'audio' - 音频文件(mp3、wav、ogg等)

多选择

默认情况下,用户可以一次选择一个资产. 使用 maxSelectable 以允许多个选择:

const picker = new DamPicker({
  token: 'your-token',
  maxSelectable: 5, // Allow up to 5 assets
  onSelect: (assets) => {
    assets.forEach((asset) => console.log(asset.url));
  },
});

中断更改 : onSelect 现在总是收到一组 SelectedAsset[],即使当 maxSelectable 为 1.

上传行为

当用户上传文件时( 无论是从计算机还是 URL ) :

1. 文件通过 ImageKit 上传到 Fluid 的 DAM
2. 一旦完成 onSelect 用新资产解除回调
3. 拾取器在成功上传后自动关闭

这意味着你处理上传的方式与库选择相同 - 只是听 onSelect。 。 。 .

Vue.js 一体化

使用 Vue 中的香草 JavaScript API :

<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: 'your-fluid-api-token',
    onSelect: (assets) => {
      imageUrl.value = assets[0].url;
    },
  });
});

onUnmounted(() => {
  picker?.destroy();
});

const openPicker = () => picker?.open();
</script>

<template>
  <div>
    <button @click="openPicker">Choose Image</button>
    <img v-if="imageUrl" :src="imageUrl" alt="Selected" />
  </div>
</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: DamPicker;

  constructor() {
    this.picker = new DamPicker({
      token: 'your-fluid-api-token',
      onSelect: (assets) => {
        this.imageUrl = assets[0].url;
      },
    });
  }

  openPicker() {
    this.picker.open();
  }

  ngOnDestroy() {
    this.picker.destroy();
  }
}

地方发展

对于本地开发,请将 SDK 指向您的本地流体管理实例 :

const picker = new DamPicker({
  token: 'your-token',
  baseUrl: 'http://localhost:3007/dam-picker',
  onSelect: (assets) => console.log(assets),
});

许可证

麻省理工学院