# UploadVisual Props (свойства) для компонента UploadVisual: [{"name":"maxCount","type":{"name":"number"}},{"name":"content","type":{"name":"string | Element"}},{"name":"progress","type":{"name":"number"}},{"name":"message","type":{"name":"string"}},{"name":"onChange","type":{"name":"((file: File, event?: ChangeEvent<HTMLInputElement>) => void)"}},{"name":"disabled","type":{"name":"boolean"}},{"name":"status","type":{"name":"enum","raw":"StatusType","value":[{"value":"\"success\""},{"value":"\"error\""}]}},{"name":"loader","type":{"name":"Element"}},{"name":"accept","type":{"name":"string"}},{"name":"validate","type":{"name":"((files: FileList | null, accept?: string) => ValidationResult)"}},{"name":"onValidation","type":{"name":"((result: ValidationResult) => void)"}},{"name":"items","type":{"name":"(PreviewGalleryItemProps & Omit<SortableElementProps, \"index\">)[]"}},{"name":"interactionType","type":{"name":"enum","raw":"InteractionType","value":[{"value":"\"draggable\""},{"value":"\"selectable\""}]}},{"name":"maxHeight","type":{"name":"number"}},{"name":"actionIcon","type":{"name":"Element"}},{"name":"itemSize","type":{"name":"string"}},{"name":"onItemsSortEnd","type":{"name":"(({ oldIndex, newIndex }: SortableIndexProps) => void)"}},{"name":"onItemAction","type":{"name":"((id: string | number) => void)"}},{"name":"onItemClick","type":{"name":"((id: string | number) => void)"}}] ## Использование
```tsx
import React, { useCallback, useState } from 'react';
import { UploadVisual, arrayItemRemoving, arrayItemSelecting } from '@salutejs/plasma-web';
export function App() {
const images = [
{ id: Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_1.jpg', caption: '3:24' },
{ id: 2 * Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_2.jpg', isSelected: true },
{ id: 3 * Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_3.jpg' },
];
const addedImage = { id: 6 * Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_5.jpg' };
const [state, setState] = useState({
status: undefined,
progress: undefined,
message: undefined,
});
const [items, setItems] = useState(images);
const onItemRemove = useCallback((id) => {
setItems((oldItems) => {
const newItems = arrayItemRemoving(oldItems, id);
if (newItems.length === 1) {
newItems[0].isSelected = true;
}
return newItems;
});
}, []);
const onItemSelect = useCallback((id) => {
setItems((oldItems) => {
return arrayItemSelecting(oldItems, id);
});
}, []);
const onValidation = useCallback(
(result) => {
const { message, status: rStatus } = result;
setState((prevState) => ({
...prevState,
message,
status: rStatus,
}));
},
[setState],
);
const onChange = useCallback(() => {
const interval = setInterval(
() =>
setState(({ progress }) => {
const value = progress === undefined ? 0 : progress;
if (value + 25 > 100) {
clearInterval(interval);
setItems((prevItems) => [...prevItems, addedImage]);
return {
progress: undefined,
status: undefined,
message: undefined,
};
}
return {
status: undefined,
progress: value + 25,
message: undefined,
};
}),
1000,
);
}, [setState, setItems]);
return (
<section>
<UploadVisual
maxCount={6}
items={items}
status={state.status}
progress={state.progress}
message={state.message}
onChange={onChange}
onItemAction={onItemRemove}
onItemClick={onItemSelect}
onValidation={onValidation}
/>
</section>
);
}
```
# UploadVisual Props (свойства) для компонента UploadVisual: [{"name":"maxCount","type":{"name":"number"}},{"name":"content","type":{"name":"string | Element"}},{"name":"progress","type":{"name":"number"}},{"name":"message","type":{"name":"string"}},{"name":"onChange","type":{"name":"((file: File, event?: ChangeEvent<HTMLInputElement>) => void)"}},{"name":"disabled","type":{"name":"boolean"}},{"name":"status","type":{"name":"enum","raw":"StatusType","value":[{"value":"\"success\""},{"value":"\"error\""}]}},{"name":"loader","type":{"name":"Element"}},{"name":"accept","type":{"name":"string"}},{"name":"validate","type":{"name":"((files: FileList | null, accept?: string) => ValidationResult)"}},{"name":"onValidation","type":{"name":"((result: ValidationResult) => void)"}},{"name":"items","type":{"name":"(PreviewGalleryItemProps & Omit<SortableElementProps, \"index\">)[]"}},{"name":"interactionType","type":{"name":"enum","raw":"InteractionType","value":[{"value":"\"draggable\""},{"value":"\"selectable\""}]}},{"name":"maxHeight","type":{"name":"number"}},{"name":"actionIcon","type":{"name":"Element"}},{"name":"itemSize","type":{"name":"string"}},{"name":"onItemsSortEnd","type":{"name":"(({ oldIndex, newIndex }: SortableIndexProps) => void)"}},{"name":"onItemAction","type":{"name":"((id: string | number) => void)"}},{"name":"onItemClick","type":{"name":"((id: string | number) => void)"}}] ## Использование ```tsx
import React, { useCallback, useState } from 'react';
import { UploadVisual, arrayItemRemoving, arrayItemSelecting } from '@salutejs/plasma-web';
export function App() {
const images = [
{ id: Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_1.jpg', caption: '3:24' },
{ id: 2 * Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_2.jpg', isSelected: true },
{ id: 3 * Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_3.jpg' },
];
const addedImage = { id: 6 * Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_5.jpg' };
const [state, setState] = useState({
status: undefined,
progress: undefined,
message: undefined,
});
const [items, setItems] = useState(images);
const onItemRemove = useCallback((id) => {
setItems((oldItems) => {
const newItems = arrayItemRemoving(oldItems, id);
if (newItems.length === 1) {
newItems[0].isSelected = true;
}
return newItems;
});
}, []);
const onItemSelect = useCallback((id) => {
setItems((oldItems) => {
return arrayItemSelecting(oldItems, id);
});
}, []);
const onValidation = useCallback(
(result) => {
const { message, status: rStatus } = result;
setState((prevState) => ({
...prevState,
message,
status: rStatus,
}));
},
[setState],
);
const onChange = useCallback(() => {
const interval = setInterval(
() =>
setState(({ progress }) => {
const value = progress === undefined ? 0 : progress;
if (value + 25 > 100) {
clearInterval(interval);
setItems((prevItems) => [...prevItems, addedImage]);
return {
progress: undefined,
status: undefined,
message: undefined,
};
}
return {
status: undefined,
progress: value + 25,
message: undefined,
};
}),
1000,
);
}, [setState, setItems]);
return (
<section>
<UploadVisual
maxCount={6}
items={items}
status={state.status}
progress={state.progress}
message={state.message}
onChange={onChange}
onItemAction={onItemRemove}
onItemClick={onItemSelect}
onValidation={onValidation}
/>
</section>
);
}
```
Режим "Draggable".
```tsx
import React, { useCallback, useState } from 'react';
import { UploadVisual, arrayItemRemoving, arrayItemSwapping } from '@salutejs/plasma-web';
export function App() {
const images = [
{ id: Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_1.jpg', caption: '3:24' },
{ id: 2 * Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_2.jpg', isSelected: true },
{ id: 3 * Math.random(), image: 'https://plasma.sberdevices.ru/ui/images/320_320_3.jpg' },
];
const addedErrorImage = {
id: 7 * Math.random(),
image: './images/320_320_5.jpg',
status: 'error',
};
const [state, setState] = useState({
status: undefined,
progress: undefined,
message: undefined,
});
const [items, setItems] = useState(images);
const onItemRemove = useCallback((id) => {
setItems((oldItems) => {
const newItems = arrayItemRemoving(oldItems, id);
if (newItems.length === 1) {
newItems[0].isSelected = true;
}
return newItems;
});
}, []);
const onItemsSortEnd = useCallback(({ oldIndex, newIndex }) => {
setItems((oldItems) => {
return arrayItemSwapping(oldItems, oldIndex, newIndex);
});
}, []);
const onValidation = useCallback(
(result) => {
const { message, status: rStatus } = result;
setState((prevState) => ({
...prevState,
message,
status: rStatus,
}));
},
[setState],
);
const onChange = useCallback(() => {
const interval = setInterval(
() =>
setState(({ progress }) => {
const value = progress === undefined ? 0 : progress;
if (value + 25 > 100) {
clearInterval(interval);
setItems((prevItems) => [...prevItems, addedErrorImage]);
return {
status: 'error',
progress: undefined,
message: 'Изображение не загрузилось',
};
}
return {
status: undefined,
progress: value + 25,
message: undefined,
};
}),
1000,
);
}, [setState, setItems]);
return (
<section>
<UploadVisual
items={items}
status={state.status}
progress={state.progress}
message={state.message}
onChange={onChange}
onItemAction={onItemRemove}
onItemsSortEnd={onItemsSortEnd}
onValidation={onValidation}
interactionType="draggable"
/>
</section>
);
}
```