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<ICallable>(null);
const [inProgress, setInProgress] = useState(false);
const handleSubmit = useCallback(() => {
setInProgress(true);
ref.current?.sendFiles();
}, [ref.current]);
return (
<Box component="form" sx={{position: 'relative'}}>
<Overlay
style={{
display: inProgress ? 'block' : 'none'
}}
/>
<CircularProgress
sx={{
display: inProgress ? 'block' : 'none',
position: 'absolute',
top: 'calc(50% - 25px)',
left: 'calc(50% - 25px)'
}}
size={25}
/>
<FileUpload
innerRef={ref}
apiPath="/"
slots={{
input: <InputField />,
submit: <Button />
}}
requestHeaders={{ Authorization: 'Bearer xyz' }}
withButton={false}
/>
<Button onClick={handleSubmit} type="button" disabled={inProgress}>
My Submit
</Button>
</Box>
);
}
export default MyCustomUpload;
