@connect-soft/react-file-upload/README.md

Component for React - supported drag & drop, upload big files

<div align="center">

# File Upload

[![npm downloads](https://img.shields.io/npm/dm/@connect-soft/react-file-upload.svg?style=for-the-badge)](https://www.npmjs.com/package/@connect-soft/react-file-upload)
[![npm](https://img.shields.io/npm/dt/@connect-soft/react-file-upload.svg?style=for-the-badge)](https://www.npmjs.com/package/@connect-soft/react-file-upload)
![npm](https://img.shields.io/npm/l/@connect-soft/react-file-upload?style=for-the-badge)
[![Storybook](https://img.shields.io/badge/-Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)](https://file-upload.connect-soft.cz/)

</div>

## 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<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;

```

## Links

[Storybook](https://file-upload.connect-soft.cz/)