apeman-react-upload

apeman react package for file upload components.

Installation

$ npm install apeman-react-upload --save

Demo

Live demo is hosted on GitHub Pages.

Usage

'use strict'

import React from 'react'
import {ApUpload, ApUploadStyle} from 'apeman-react-upload'

const ExampleComponent = React.createClass({
  render () {
    const s = this
    return (
      <div>
        <ApUploadStyle/>
        <ApUpload multiple={ false }
                  id="demo-file-upload-01"
                  name="file-input-01"
                  accept="image/*"
                  onLoad={ s.handleLoaded }
                  onError={ s.handleError }/>
      </div>
    )
  },
  handleLoaded (urls) {
    console.log('Image urls:', urls)
    /* ... */
  },
  handleError (err) {
    /* ... */
  }
})

Components

ApUploadStyle

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | style | object | {} | | | | highlightColor | string | ApStyle.DEFAULT_HIGHLIGHT_COLOR | | | | backgroundColor | string | ApStyle.DEFAULT_BACKGROUND_COLOR | | |

ApUpload

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | name | string | null | | Name of input | | id | string | `ap-upload-${uuid.v4()}` | | DOM id of input | | multiple | bool | false | | Allow multiple upload | | onChange | func | null | | Handler for change event | | onLoad | func | null | | Handler for load event | | onError | func | null | | Handler for error event | | width | number | 180 | | Image width | | height | number | 180 | | Image height | | text | string | 'Upload file' | | Guide text | | accept | string | null | | Accept file type | | icon | string | 'fa fa-cloud-upload' | | Guide icon | | closeIcon | string | 'fa fa-close' | | Icon for close images | | spinner | string | | | Spinner theme | | value | string|array | | | Value of input | | spinnerIcon | | ApSpinner.DEFAULT_THEME | | |

License

This software is released under the MIT License.

Links

• apeman
• apeman-react-labo
• React