ФреймворкJavaScript

Файл: вложения и скачивание

Карточка вложения для любого загруженного файла. Показывает иконку типа, имя файла, размер в понятном человеку виде, действие скачивания и необязательную подпись.

Файлы отправляются через загрузчик, который предоставляете вы. Если его нет, инструмент откатывается на локальный blob URL (uploadByFile) или на сам вставленный URL (uploadByUrl). Необязательный список разрешённых MIME-типов и максимальный размер ограничивают, что можно принять.

Импорт

TypeScript

import { File } from '@bloklabs/core/tools';

Конфигурация

Опция	Тип	По умолчанию	Описание
`uploader`	`FileUploader`	`undefined`	Загрузчик, который предоставляете вы. У него два необязательных метода, `uploadByFile(file, ctx)` и `uploadByUrl(url, ctx)`, и каждый возвращает `{ url, fileName?, size?, mimeType? }`. Колбэк `ctx.onProgress(percent)` сообщает о прогрессе загрузки. Если загрузчик не задан, файлы откатываются на blob URL или на вставленный URL.
`endpoints`	`string \| { byFile?: string; byUrl?: string }`	`undefined`	Эндпоинт или эндпоинты загрузки. Blok сам отправляет POST-запрос: multipart/form-data для файлов, JSON `{ url }` для встроенных URL. В ответе он ожидает тело `{ url, fileName?, size?, mimeType? }`. Строка используется для обоих случаев. Объект задаёт каждый отдельно. Явно указанный `uploader` всегда имеет приоритет.
`field`	`string`	`"file"`	Имя поля form-data, в котором передаётся загружаемый файл.
`additionalRequestHeaders`	`Record<string, string>`	`undefined`	Дополнительные заголовки, добавляемые к запросам загрузки на эндпоинт.
`types`	`string[]`	`undefined`	Необязательный список разрешённых MIME-типов. Если он не задан, принимаются файлы любого типа.
`sources`	`'upload' \| 'url' \| 'both'`	`'both'`	Ограничивает способы добавления файла: только загрузка файла, только URL или оба варианта.
`maxSize`	`MaxSizeConfig`	`30 MiB`	Максимальный размер загрузки. Число ограничивает все типы, в байтах. Объект задаёт ограничение для каждого MIME-типа, а `'*'` работает как запасное значение. Передайте Infinity, чтобы снять ограничение.
`onUploadError`	`UploadErrorHandler`	`undefined`	Вызывается, когда загрузка не удалась. Получает `{ code, tool, message, file?, url?, size?, maxSize?, cause }`. Ничего не вернули: блок показывает своё сообщение. Вернули строку: блок показывает её. Вернули `false`: блок возвращается в пустое состояние без ошибки, и вы можете показать свой тост. Если ваш uploader отклонил промис, придёт код `UPLOAD_FAILED`. Исходная ошибка лежит в `cause`.
`captionPlaceholder`	`string`	`"Write a caption…"`	Плейсхолдер, который показывается в поле подписи. По умолчанию берётся локализованная строка `tools.file.captionPlaceholder`.

Формат данных

TypeScript

interface FileData {
  url: string;             // File source URL — http(s) or blob:
  fileName?: string;       // Original filename, when known
  size?: number;           // File size in bytes; rendered human-readable
  mimeType?: string;       // MIME type; used to pick the type icon
  caption?: string;        // Plain-text caption
  captionVisible?: boolean; // Whether the caption row is shown. Opt-in: when omitted it
                            // resolves to true only if `caption` already has text
                            // (unlike Image/Video, which default to true).
}

JSON

{
  "id": "fil001",
  "type": "file",
  "data": {
    "url": "https://example.com/files/report.pdf",
    "fileName": "report.pdf",
    "size": 184320,
    "mimeType": "application/pdf"
  }
}

Пример использования

TypeScript

import { Blok } from '@bloklabs/core';
import { File } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    file: {
      class: File,
      config: {
        uploader: {
          async uploadByFile(file) {
            const url = await myUpload(file);
            return { url, fileName: file.name, size: file.size, mimeType: file.type };
          },
        },
      },
    },
  },
});