# Attach ### Быстрый старт
```tsx
import React from 'react';
import { Attach } from '@salutejs/plasma-web';
export function App() {
const handleFileSelect = (event) => {
const file = event.target.files[0];
console.log('Выбран файл:', file.name);
};
return (
);
}
```
### Управление внешним видом и типом компонента С помощью свойств: `view` - задается внешний вид `buttonType` - можно менять вид кнопки: `button` , `iconButton`
```tsx
import React from 'react';
import { Attach } from '@salutejs/plasma-web';
export function App() {
return (
);
}
```
### Управление подсказкой с помощью свойства helperText Вид `helperText` задается с помощью свойства `helperTextView` . Возможные значения свойства: `default` – по умолчанию; `negative` – ошибка.
```tsx
import React from 'react';
import { Attach } from '@salutejs/plasma-web';
export function App() {
return (
);
}
```
### Расположение элементов Расположение регулируется свойством Flow, которое позволяет размещать элементы вертикально,
горизонтально или автоматически (перенес на следующую строку при нехватке ширины компонента Attach).
```tsx
import React from 'react';
import { Attach } from '@salutejs/plasma-web';
export function App() {
return (
);
}
```
### Фильтр форматов файлов Свойство `acceptedFileFormats` устанавливает доступные форматы файлов.
```tsx
import React from 'react';
import { Attach } from '@salutejs/plasma-web';
export function App() {
const handleFileSelect = (event) => {
const file = event.target.files[0];
console.log('Выбран файл:', file.name);
};
return (
);
}
```
### Пример взаимодействия с формой :::tip
С помощью компонента `InformationWrapper` можно добавить весь необходимый UX/UI для работы с формой, включая: обязательность поле label, caption, hint, etc view
:::
```tsx
import React, { useState } from 'react';
import { Attach, Button, InformationWrapper } from '@salutejs/plasma-web';
function App() {
const [isLoading, setIsLoading] = useState(false);
const [attachedFiles, setAttachedFiles] = useState([]);
const handleAttachFile = (e) => {
setAttachedFiles((prevAttachedFiles) => [
...prevAttachedFiles,
{
fileData: e.target.files[0],
id: e.target.id,
},
]);
};
const handleAttachClear = (id) => {
setAttachedFiles(attachedFiles.filter((file) => file.id !== id));
};
const handleSubmit = (e) => {
e.preventDefault();
setIsLoading(true);
const formData = new FormData(e.target);
console.log('formData', Object.fromEntries(formData));
setTimeout(() => {
setAttachedFiles([]);
setIsLoading(false);
}, 2000);
};
return (
<>
{!isLoading && (
)}
{isLoading ? 'Форма отправляется' : 'Прикрепленные к форме файлы:'}
{!isLoading && attachedFiles.length > 0 && (