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
/examplesfolder, 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
- Basics
- Installing
- Adding uploaders
- Accessing state
- Usage examples
- 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.