# epic-file-react

> A powerful file uploading component with great looking UI.

Latest version **2.0.3** (published 2021-03-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install epic-file-react
pnpm add epic-file-react
yarn add epic-file-react
bun add epic-file-react
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2021-03-17 |
| First published | 2020-10-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 4 |
| Unpacked size | 299.1 KB |
| Known vulnerabilities | 0 (+23 in 1 direct dependencies) |
| Install scripts | no |
| Author | Saff-Elli-Khan |
| Maintainers | saffellikhan |

## Links

- npm: https://www.npmjs.com/package/epic-file-react
- Repository: https://github.com/Saff-Elli-Khan/epic-file-react
- Homepage: https://github.com/Saff-Elli-Khan/epic-file-react#readme
- Issues: https://github.com/Saff-Elli-Khan/epic-file-react/issues
- npm.io page: https://npm.io/package/epic-file-react

## Dependencies (4)

- [axios](https://npm.io/package/axios.md) ^0.21.1
- [react-jss](https://npm.io/package/react-jss.md) ^10.5.1
- [react-icons](https://npm.io/package/react-icons.md) ^4.2.0
- [framer-motion](https://npm.io/package/framer-motion.md) ^3.3.0

## Recent versions

- 2.0.3 (latest) — 2021-03-17
- 2.0.2 — 2021-02-26
- 2.0.1 — 2021-02-26
- 2.0.0 — 2021-02-25
- 1.0.26 — 2021-02-08
- 1.0.25 — 2021-02-08
- 1.0.24 — 2021-02-08
- 1.0.23 — 2021-02-07
- 1.0.22 — 2021-02-07
- 1.0.21 — 2021-02-07
- 1.0.20 — 2020-12-20
- 1.0.19 — 2020-12-06
- 1.0.18 — 2020-12-05
- 1.0.17 — 2020-12-05
- 1.0.16 — 2020-12-05
- … 16 more at https://npm.io/package/epic-file-react/versions

## README

# epic-file-react

> A powerful file uploading component with great looking UI.

[![NPM](https://img.shields.io/npm/v/epic-file-react.svg)](https://www.npmjs.com/package/epic-file-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save epic-file-react
```

## Usage

```tsx
import { EpicFile, EpicFileRef } from "epic-file-react";

const EpicfileRef = createRef<EpicFileRef>();
const [Layout, setLayout] = useState("Primary" as "Primary" | "Secondary");
const [Theme, setTheme] = useState("Light" as "Light" | "Dark");
const [Rounded, setRounded] = useState(false);
const [Mini, setMini] = useState(false);
const [Micro, setMicro] = useState(false);

<EpicFile
  ref={EpicfileRef}
  theme={Theme}
  layout={Layout}
  mini={Mini}
  micro={Micro}
  rounded={Rounded}
  multiple={true}
  instantUpload={false}
  limit={3}
  size={1e6}
  accept={["image/png", "image/jpeg"]}
  enableImagePreview={true}
  imagePreviewCover={true}
  server={{
    host: "http://localhost:8080/v1/",
    upload: {
      endpoint: "uploads/",
      headers: {
        Authorization:
          "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXlsb2FkIjp7InVzZXJJZCI6IkFkbWluaXN0cmF0b3IiLCJmbmFtZSI6Ik11aGFtbWFkIiwibG5hbWUiOiJKZWxiYW4ifSwidHlwZSI6IkF1dGhvcml6YXRpb24iLCJhbGxvd2VkSXBzIjpbIjo6MSJdLCJtb2RlIjoibGl2ZSIsInZlcnNpb24iOjEsImlkIjo0ODkxMTc0MTUzOTkyMjQ5LCJpYXQiOjE2MTQwODc0NzAsImV4cCI6MTYxNDE3Mzg3MH0.G2XUc87t4eQ1-F6ywXAs9qFOmnHzEv3_tRjuo3gcLeg",
      },
    },
    revert: {
      endpoint: "uploads/{reference}",
      headers: {
        Authorization:
          "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXlsb2FkIjp7InVzZXJJZCI6IkFkbWluaXN0cmF0b3IiLCJmbmFtZSI6Ik11aGFtbWFkIiwibG5hbWUiOiJKZWxiYW4ifSwidHlwZSI6IkF1dGhvcml6YXRpb24iLCJhbGxvd2VkSXBzIjpbIjo6MSJdLCJtb2RlIjoibGl2ZSIsInZlcnNpb24iOjEsImlkIjo0ODkxMTc0MTUzOTkyMjQ5LCJpYXQiOjE2MTQwODc0NzAsImV4cCI6MTYxNDE3Mzg3MH0.G2XUc87t4eQ1-F6ywXAs9qFOmnHzEv3_tRjuo3gcLeg",
      },
    },
  }}
  onAdd={(file) => {
    console.log("Added File::", file.name);
  }}
  onUpload={(
    _file,
    response: { status: boolean; data: { uploadId: string } }
  ) => {
    if (response.status) return response.data.uploadId;
    else throw new Error("File Not Uploaded!");
  }}
  onRemove={(file) => {
    console.log("Removed File::", file.name);
  }}
/>;
```

## License

MIT © [Saff-Elli-Khan](https://github.com/Saff-Elli-Khan)

---
_Source: https://npm.io/package/epic-file-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._