HiddenDropZone
Скрытая зона загрузки, которая становится видимой только во время перетаскивания файлов. Оверлей рендерится поверх произвольного контента (форма, карточка, редактор) и позволяет прикрепить файлы к существующей сущности без отдельной визуальной области.
Когда использовать
- Прикрепление файлов к форме, где уже есть другие поля и нет места под явную зону.
- Drop-to-attach поверх карточки задачи, чата, редактора.
- Массовая загрузка поверх полноэкранного списка.
Когда не подходит: когда загрузка — первичный сценарий страницы и должна быть видна сразу — используйте Dropzone.
Валидация (accept, maxSize → onFilesReject) и колбеки работают так же, как у Dropzone. Но скрытая зона рендерит нативный <input type="file"> только во время перетаскивания, поэтому нативные form-атрибуты (name, required, submit по форме) на ней ненадёжны — для полноценного поля формы берите Dropzone или FileUpload.
Установка
pnpm add @cloud-ru/ds-dropzoneimport { HiddenDropZone } from '@cloud-ru/ds-dropzone'Примеры использования
Оверлей над формой
tsx
import { HiddenDropZone } from '@cloud-ru/ds-dropzone';
import { useState } from 'react';
export function HiddenDropZoneBasic() {
const [files, setFiles] = useState<File[]>([]);
return (
<HiddenDropZone onFilesUpload={setFiles} content={<span>Отпустите, чтобы прикрепить файлы</span>}>
<form>
<label>
Имя <input type='text' />
</label>
{files.length > 0 && <p>Прикреплено: {files.map(f => f.name).join(', ')}</p>}
</form>
</HiddenDropZone>
);
}Props
Types
Props
HiddenDropZoneProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
accept | AcceptInput | — | no | Разрешённые типы: MIME-тип (`image/png`), шаблон (`image/*`) или расширение (`.pdf`). Строка или массив. |
capture | boolean | "user" | "environment" | — | no | Нативный `capture` скрытого input — источник захвата на мобильных (камера/микрофон). |
children | ReactNode | — | yes | Дочерний контент, поверх которого отображается dropzone при drag |
className | string | — | no | CSS-класс |
content | ReactNode | — | no | Контент dropzone при drag (overlay) |
data-test-id | string | — | no | |
disabled | boolean | — | no | Деактивирован ли компонент |
form | string | — | no | Нативный `form` скрытого input — привязка к форме по `id`. |
id | string | — | no | Нативный `id` скрытого input — для связи с `<label htmlFor>`. |
innerRef | Ref<HTMLInputElement> | — | no | Ссылка на нативный `<input type="file">` — для интеграции с формами (react-hook-form `ref`). |
maxSize | number | — | no | Максимальный размер одного файла в байтах. Превысившие уходят в `onFilesReject`. |
mode | "multiple" | "single" | multiple | no | Режим загрузки |
name | string | — | no | Нативный `name` скрытого input — для отправки формы и интеграции с form-библиотеками. |
onChange | ChangeEventHandler<HTMLInputElement> | — | no | Нативный `onChange` скрытого input. Вызывается до валидации с исходным событием. |
onFilesReject | ((rejections: FileRejection[]) => void) | — | no | Колбек с отклонёнными файлами и причиной (`maxSize` / `mime`). |
onFilesUpload | (files: File[]) => void | — | yes | Колбек с принятыми фа йлами (прошедшими проверку `maxSize` и `accept`). |
required | boolean | — | no | Нативный `required` скрытого input. |
size | "l" | "m" | "s" | m | no | Размер компонента |