React-fileupload-progress

React component of Input file and progress bar. This component watch xhr uploading process, and trigger some events.

Installation

npm install --save react-fileupload-progress

API

FileUploadProgress

Props

• url: File upload endpoint url. React.PropTypes.string.isRequired
• method: Http request method. React.PropTypes.string.isRequired

Events

These handler will called on XMLHttpRequest's progress events. See also Using XMLHttpRequest on MDN.

• onProgress: Called when xhr was loaded. Third parameter is the progress of uploading process(0 ~ 100). React.PropTypes.func(e, request, progress)

• onLoad: Called when xhr was loaded. React.PropTypes.func(e, request)

• onError: Called when xhr become error. React.PropTypes.func(e, request)

• onAbort: Called when xhr was aborted. React.PropTypes.func(e, request)

Customization

It is possible to customize view and form.

• formRenderer: For custom form rendering, Typo is fixed(#4) from v0.2.0onSubmitHandler should be attach on your custom form's submit event. When onSubmitHandler is called, this component start observe xhr. React.PropTypes.func(onSubmitHandler)

• formGetter: If custom formRenderer is used, you need to implement this method and must return FormData object. React.PropTypes.func => {return form}

• progressRenderer: For custom progress rendering, First parameter is the progress of uploading process(0 ~ 100). If xhr has error, second parameter will be true. When third parameter is called, current xhr will be aborted. React.PropTypes.func(progress, hasError, cancelHandler)

• formCustomizer: Called before xhr send. You can add any custom form parameter(e.g: id, name, etc) with this method. Must return form given as argument. React.PropTypes.func(form) => {return form}

• beforeSend: Called before xhr send. You can customize xhr(e.g: HTTPHeader, etc) with this method. Must return request given as argument. React.PropTypes.func(request) => {return request}

Usage example

'use strict';importReactfrom'react';importFileUploadProgressfrom'react-fileupload-progress';classAppextendsReact.Component{constructor(props){super(props);}render(){return(<div><h3>Default style</h3><FileUploadProgresskey='ex1'url='http://localhost:3000/api/upload'onProgress={(e,request,progress)=>{console.log('progress',e,request,progress);}}onLoad={(e,request)=>{console.log('load',e,request);}}onError={(e,request)=>{console.log('error',e,request);}}onAbort={(e,request)=>{console.log('abort',e,request);}}/></div>)}};React.render(<App/>,document.getElementById('out'));

See also example

npm install # or yarn
npm run start:example

Build

npm run build

Tests

npm test