🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Form React

Documentation

React-fileupload-progress Build Status npm version

Gyazo

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.0 onSubmitHandler 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}

Gyazo

Usage example

'use strict';  import React from 'react'; import FileUploadProgress  from 'react-fileupload-progress';   class App extends React.Component {   constructor(props) {     super(props);   }   render() {     return (       <div>         <h3>Default style</h3>         <FileUploadProgress key='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

You May Also Like