# redux-file-upload-header

> Redux-friendly file upload made easy

Latest version **0.0.26** (published 2017-05-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install redux-file-upload-header
pnpm add redux-file-upload-header
yarn add redux-file-upload-header
bun add redux-file-upload-header
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.26 |
| Published | 2017-05-02 |
| First published | 2017-05-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Blueberry |
| Maintainers | gosparc |
| Keywords | react, redux |

## Links

- npm: https://www.npmjs.com/package/redux-file-upload-header
- Repository: https://github.com/autholykos/redux-file-upload-header
- Homepage: https://github.com/autholykos/redux-file-upload-header#readme
- Issues: https://github.com/autholykos/redux-file-upload-header/issues
- npm.io page: https://npm.io/package/redux-file-upload-header

## Dependencies (6)

- [radium](https://npm.io/package/radium.md) >=0.15
- [fileapi](https://npm.io/package/fileapi.md) >=2
- [immutable](https://npm.io/package/immutable.md) >=3
- [detect-node](https://npm.io/package/detect-node.md) >=2
- [core-decorators](https://npm.io/package/core-decorators.md) >=0.12
- [react-pure-render](https://npm.io/package/react-pure-render.md) >=1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.26 (latest) — 2017-05-02
- 0.0.24 — 2017-05-02
- 0.0.23 — 2017-05-02
- 0.0.22 — 2017-05-02
- 0.0.21 — 2017-05-02
- 0.0.20 — 2017-05-02
- 0.0.19 — 2017-05-02

## README

# redux-file-upload

# Motivation
There aren't any simple yet customizable file uploader packages that would work nicely with Redux. redux-file-upload is here to fill the gap!

# Install
`npm install --save redux-file-upload`

Please note - a middleware that passes `dispatch` to actions, e.g. redux-thunk, redux-promise-middleware, is required for this package to work properly.

# API
The package exposes the following:

- `actions` - you can use these to implement your own custom logic if you need (e.g. add more dropzones for a single uploader). Check the source code to see what actions are available.
- `reducer` - add this to your composed reducer.
- `FileUpload` - the main component (see its API below).
- `UploadingDocument` - an immutable record representing the way a generic document is represented in store.
- `UploadingImage` - an immutable record representing the way an image is represented in store.

# FileUpload API
Below are the props you can pass to the file upload component.

## `allowedFileTypes`
An array with filetypes that can be uploaded using the file upload. There are several that will be recognized automatically as images (jpg, jpeg, png, gif, tiff).

## `className`
The component will be wrapped in a div with this class.

## `data`
Object with any additional data that will be sent along with the files to the endpoint.

## `dropzoneActiveStyle`
Style used when user hovers over the dropzone.

## `dropzoneId` (required)
Each file uploader on the package needs a unique ID. This value is also used as an identifier in the reducer unless the `identifier` prop is specified (see below).

## `identifier`
If specified, uploaded files will be organized in the store using this value. Specifying the same value for multiple file upload components allows you to have multiple dropzones for the same file upload on one page.

## `multiple`
Specifies whether the file upload allows more than one file being added at one time.

## `url` (required)
The URL to which the files will be POSTed.

You can also pass something as children to the component (for example an upload button).

# Example

```jsx
import { FileUpload } from 'redux-file-upload'

<FileUpload
  allowedFileTypes={['jpg', 'pdf']}
  data={{ type: 'picture' }}
  dropzoneId="fileUpload"
  url="https:/url.org/api/docs/upload"
>
  <button>
    Click or drag here
  </button>
</FileUpload>
```

# Browser compatibility
The component should work in all modern browsers including IE11+.

# License
MIT 2016

## Made with love by
[![](https://camo.githubusercontent.com/d88ee6842f3ff2be96d11488aa0d878793aa67cd/68747470733a2f2f7777772e676f6f676c652e636f6d2f612f626c75656265727279617070732e636f6d2f696d616765732f6c6f676f2e676966)](https://www.blueberry.io)

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