# Upload Props (свойства) для компонента Upload: [{"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)"}}] ## Использование
```tsx
import React, { useState, useCallback } from 'react';
import { Upload  } from '@salutejs/plasma-web';
export function App() {
const [state, setState] = useState({
status: undefined,
progress: undefined,
message: 'Подсказывающее сообщение',
});
const onChange = useCallback(() => {
const interval = setInterval(
() =>
setState(({ progress }) => {
const value = progress === undefined ? 0 : progress;
if (value + 25 > 100) {
clearInterval(interval);
return {
status: 'error',
progress: undefined,
message: 'Файл не загрузился',
};
}
return {
status: undefined,
progress: value + 25,
message: undefined,
};
}),
1000,
);
}, []);
const onValidation = useCallback((result) => {
const { message, status: rStatus } = result;
setState((prevState) => ({
...prevState,
message,
status: rStatus,
}));
}, []);
const customValidate = useCallback((files) => {
return {
message: `Добавлен файл формата ${files[0].type}`,
status: 'success',
data: files[0],
};
}, []);
return (
<section>
<Upload
status={state.status}
progress={state.progress}
message={state.message}
loader={<div style={{ color: 'green' }}>Custom progressbar {state.progress}%</div>}
content="Загрузите файл формата любого"
onValidation={onValidation}
validate={customValidate}
onChange={onChange}
/>
</section>
);
}
```