ФреймворкJavaScript

Uploader API: загрузка ассетов по типу

Загрузить ассет через конвейер, который отвечает за его ТИП, а не через тот инструмент, который случайно оказался запрашивающим. Инструменты вызывают именно этот метод и не лезут в собственный config.uploader. Поэтому обложка аудиоблока попадает в ваш конвейер изображений, а не в аудиоэндпоинт, который её отверг бы.

Порядок разрешения для типа: сначала инструмент, у которого совпадает статический assetKind (например, tools.image.config.uploader для 'image'), затем конфигурация uploader уровня редактора, затем локальный запасной вариант. Запасной вариант это blob: URL для файлов и URL как есть для ссылок.

Готовые реализации uploader смотрите на странице пресетов хранилищ: Supabase, S3-совместимое хранилище, Cloudinary и IndexedDB. Собственный бэкенд для них не нужен.

Редактировать на GitHub

Как получить экземпляр редактора

Методы ниже вызываются на редакторе, созданном через new Blok(). Они доступны после того, как разрешится editor.isReady.

TypeScript

// You already hold the instance returned by the constructor.
const editor = new Blok({ holder: 'editor' });
await editor.isReady;

// Call any API method on it.
editor.caret.setToLastBlock('end');

Методы

uploader.uploadByFile(file, ctx)

Promise<{ url: string; fileName?: string }>

Сохранить файл и вернуть его URL. ctx это { kind, tool?, onProgress? }, где kind это тип АССЕТА, а не запрашивающий инструмент. Они различаются всякий раз, когда инструмент держит ассет вне своего медиасемейства.

TypeScript

// Inside a custom block tool that holds a thumbnail
const { url } = await this.api.uploader.uploadByFile(file, {
  kind: 'image',
  tool: 'my-card',
  onProgress: (percent) => this.showProgress(percent),
});

uploader.uploadByUrl(url, ctx)

Promise<{ url: string; fileName?: string }>

Разместить у себя ассет, который пользователь передал по URL, и вернуть сохранённый URL. Без загрузчика для этого типа URL сохраняется как есть. Настройте загрузчик, если строгая политика img-src/media-src или гниение ссылок сломают сторонние URL.

TypeScript

const { url } = await this.api.uploader.uploadByUrl(pastedUrl, {
  kind: 'image',
  tool: 'my-card',
});

uploader.isConfigured(kind, method?)

boolean

Обрабатывает ли этот тип загрузчик хоста. False означает, что вызывающий получит локальный запасной вариант. Это помогает решить, стоит ли вообще загружать ассет: например, маленькую извлечённую обложку можно вместо этого встроить как data: URL.

TypeScript

if (this.api.uploader.isConfigured('image', 'uploadByFile')) {
  const { url } = await this.api.uploader.uploadByFile(artwork, { kind: 'image' });
} else {
  // no image pipeline — keep it inline rather than minting a doomed blob: URL
}