Redux-plupload
FSA-compliant Redux bindings for Plupload.
Overview
redux-plupload
helps you use Redux actions for bi-directional communication with a plupload
uploader instance.
You can dispatch an action to call a plupload
method. For example, to start an upload:
// action.js
And redux-plupload
will dispatch an action so you know when a plupload
event occurs. For example, when plupload
reports on upload progress:
// reducer.jsif actiontype === ActionTypesUPLOAD_PROGRESS console; console;
Usage
Installation
npm install --save redux-plupload
Getting started
To use redux-plupload
, you must install the middleware (and optionally the reducer), then send an ActionTypes.INIT
message to init the plupload.Uploader
. The payload
of the action should include a browse_button
(and optionally dropzone
) prop. You can also specify url
and multipart_params
props at INIT
time, or provide an uploadSettingsSelector
that will be called with state
and file
as args to find the extra per-file upload settings.
// client.js;;;; ; const reducer = ;const uploadSettingsSelector = satepathtoserveruploadsettingsforfileid;const uploaderMiddleware = ;const store = ; ReactDOM;
// UploadButton.js;; const uploaderInitpayload => type: ActionTypesINIT payload ; { thisprops; } { return <button type="button" ref= this_browseButton = browseButton >Upload Files</button> ; } {} UploadButton;
Once you've INIT
ed redux-plupload
, it will call the plupload.Uploader
's methods in response to actions, and emit actions based on the events that the plupload.Uploader
emits (with a few name-changes where they clash). If you install the reducer, it will keep its state up to date with a copy of the plupload.Uploader
state.
plupload
methods
Calling Here is a list of plupload
methods and the actions you can dispatch to call that method on the uploader instance:
;
;
;
;
;
;
;
;
;
;
plupload
events
Listening for The following actions will be dispatched when plupload
events occur.
Each action's meta
property will also contain the uploader
as shown in the first example below.
(If the {}
syntax is new to you, take a look at ES6 Object Destructuring.)
if actiontype === ActionTypesINITING const uploader = actionmeta;
if actiontype === ActionTypesPOST_INIT //
if actiontype === ActionTypesOPTION_CHANGED const name value oldValue = actionpayload;
if actiontype === ActionTypesREFRESHING //
if actiontype === ActionTypesSTATE_CHANGED //
if actiontype === ActionTypesUPLOAD_FILE const file = actionpayload;
if actiontype === ActionTypesBEFORE_UPLOAD const file = actionpayload;
if actiontype === ActionTypesQUEUE_CHANGED //
if actiontype === ActionTypesUPLOAD_PROGRESS const file = actionpayload;
if actiontype === ActionTypesFILES_REMOVED const files = actionpayload;
if actiontype === ActionTypesFILE_FILTERED const file = actionpayload;
if actiontype === ActionTypesFILES_ADDED const files = actionpayload;
if actiontype === ActionTypesFILE_UPLOADED const file = actionpayload; const response = actionmeta;
if actiontype === ActionTypesCHUNK_UPLOADED const file = actionpayload; const response = actionmeta;
if actiontype === ActionTypesUPLOAD_COMPLETE const files = actionpayload;
if actiontype === ActionTypesERROR const error = actionpayload; console; // this flag will be set to true
if actiontype === ActionTypesDESTROYING //
Multiple uploaders
If you need to have more than one upload button or dropzone on a page, you can use redux-plupload
to manage multiple uploader instances. This can be done by specifying a unique handle
(a nickname) for each uploader on every interaction. If no handle
is specified, the interaction is assumed to be with the default uploader instance.
Initialising an uploader with a handle:
const options = handle: 'myUploader' // other options;;
Calling methods on a specific uploader
;
Listening for events from a specific uploader
if actiontype === ActionTypesFILES_ADDED const files = actionpayload; const uploader = actionmeta; console; // 'myUploader'
Creating a reducer for a specific uploader
; const myReducer = ;