Attach
Быстрый старт
Управление внешним видом
Внешний вид компонента задаётся свойствами view, size и buttonType:
- View
- Size
- Тип кнопки
С помощью свойства buttonType можно менять вид кнопки: обычный или с иконкой.
Расположение элементов
С помощью свойства flow можно регулировать расположение прикреплённого файла относительно кнопки:
"auto"— автоматический перенос при нехватке ширины (по умолчанию)"horizontal"— файл располагается справа от кнопки"vertical"— файл располагается под кнопкой
Подсказка
С помощью свойства helperText можно добавить подсказку под кнопкой. Вид задаётся свойством helperTextView:
Несколько файлов
Свойство multiple позволяет прикрепить несколько файлов. При flow="horizontal" файлы, не помещающиеся в ряд, уходят в выпадающий список:
Фильтр форматов файлов
Свойство acceptedFileFormats устанавливает допустимые форматы файлов (соответствует HTML-атрибуту accept):
Контролируемый режим
Компонент поддерживает контролируемый и неконтролируемый режимы работы:
onChange— вызывается при выборе файлов; файлы берутся изe.target.filesonClear— вызывается при удалении файла; принимаетFileInfoс полемfile(оригинальныйFile)
- Контролируемый
- Неконтролируемый
Свойство files передаёт список файлов, которыми управляет родительский компонент:
В неконтролируемом режиме компонент управляет состоянием самостоятельно:
Использование в формах
- Нативная форма
- React Hook Form
- Сложный пример
ref компонента форвардится на <input type="file">, поэтому файлы автоматически попадают в FormData при сабмите:
Для интеграции с React Hook Form используйте Controller вместе с контролируемым режимом:
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { Attach, Button } from '@salutejs/sdds-platform-ai';
export function App() {
const { control, handleSubmit } = useForm();
const onSubmit = (data) => console.log('Файлы:', data.files);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Controller
name="files"
control={control}
defaultValue={[]}
render={(props) => {
const { value, onChange: onRhfChange } = props.field;
return (
<Attach
files={value}
onChange={(e) => onRhfChange(Array.from(e.target.files || []))}
onClear={(fileInfo) => onRhfChange(value.filter((f) => f !== fileInfo.file))}
/>
);
}}
/>
<Button type="submit">Отправить</Button>
</form>
);
}