Skip to content

georgeOsdDev/react-fileupload-progress

Repository files navigation

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