# File Upload
[](https://www.npmjs.com/package/@connect-soft/react-file-upload)
[](https://www.npmjs.com/package/@connect-soft/react-file-upload)
[](https://file-upload.connect-soft.cz/)
## Installation
```bash
yarn add @connect-soft/react-file-upload
```
## Quickstart
```typescript jsx
import FileUpload, { ICallable } from '@connect-soft/react-file-upload';
import CircularProgress from '@mui/material/CircularProgress';
import Box from '@mui/material/Box';
import { useCallback, useRef, useState } from 'react';
import styled from 'styled-components';
const InputField = styled.input`
width: 350px;
max-width: 100%;
color: #444;
padding: 5px;
background: #fff;
border-radius: 10px;
border: 1px solid #555;
&::file-selector-button {
margin-right: 20px;
border: none;
background: #04aa6d;
padding: 10px 20px;
border-radius: 10px;
color: #fff;
cursor: pointer;
transition: background 0.2s ease-in-out;
}
`;
const Button = styled.button`
background-color: #04aa6d;
border-radius: 10px;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
`;
const Overlay = styled.div`
position: absolute;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
`;
const MyCustomUpload = () => {
const ref = useRef(null);
const [inProgress, setInProgress] = useState(false);
const handleSubmit = useCallback(() => {
setInProgress(true);
ref.current?.sendFiles();
}, [ref.current]);
return (
,
submit:
}}
requestHeaders={{ Authorization: 'Bearer xyz' }}
withButton={false}
/>
);
}
export default MyCustomUpload;
```
## Links
[Storybook](https://file-upload.connect-soft.cz/)