react-redux-uploader

Project Status

This work does not yet fully achieve its objective. It has reached the useful stage of allowing much easier construction of custom-styled uploaders, meriting a release.

TODOs

• [x] I've pulled across all the components from react-fine-uploader, which serves as a basis for what's needed here.
• [x] Refactor them to meet a style guide and consistent naming conventions.
• [x] Remove all hard coded styling (except style overlay for the input button)
• [x] Create working example uploader in the /examples folder, styled cleanly and easily, entirely in that example, using bootstrap

** At this stage, the library is useful. It allows you to build custom UIs without overloading hard coded styling. Next up:**

• [ ] Refactor components into containers/wrappers
• [ ] Hook callbacks to the uploader to synchronise a redux state with the uploader.
• [ ] Update component values on the redux state to simplify construction and update of the UI.

Overview

Allows you to build any file uploader UI imaginable.

With an always-up-to-date and mappable state, you can tie any component to the upload progress or status, and control the uploader via actions, reducers or in sagas.

Wait, but why? - working with react-fine-uploader

react-fine-uploader provides a number of high and low level components that can be used to render a gallery and various elements of an uploader UI.

Unfortunately, this library has no separation of responsibility in terms of rendering components and updating state. Component styling is also extremely opinionated, as you don't get full control over the classes applied without fully overriding the built in css.

For complex UI components, or where you want full control of styling, this becomes quickly unwieldy.

However, react-fine-uploader does provide an extremely powerful wrapper for the Fine Uploader library. This wrapper provides features such as the ability to dynamically register multiple event/callback listeners, so here, we build on that to instantiate and maintain the redux state.

Quick Reference

• Overview
  • Working with react-fine-uploader
• Basics
• Installing
• Adding uploaders
• Accessing state
• Usage examples
  • Filterable file upload table
• Working with react-fine-uploader

Basics

Everything is built using ES6 under the airbnb style guide and React 16.

Sorry, I've no time at all to develop and maintain historic compatibilities - you're welcome to submit PRs, provided you're willing and able to commit to ongoing maintenance of the modifications you're making. Best get in touch to discuss this first.

Installing

Dependencies that you will need to install yourself:

• an A+/Promise spec compliant polyfill (for IE11)
• React (a peer dependency)
• Fine Uploader, which is also available on npm

Do npm install react-redux-uploader then see below for adding uploaders.

Adding and Removing Uploaders

Accessing State

Usage Examples

See the /examples folder for how to use, or simply import the example TableUploader

With great thanks to...

The authors over at react-fine-uploader and all the collaborators and authors of the main FineUploader library.

@transitive-bullshit for this create-react-library, a great tool for quickly boilerplating npm modules.