React Upload Component

· This is a file upload component for react.

· Support Typescript

Environment Support

| IE / Edge | Firefox | Chrome | Safari | | --- | --- | --- | --- | | IE11, Edge| last 2 versions| 44| last 2 versions |

Installation

npm i -S react-upload-zwc

Scripts

# Install dependencies
npm i

# Run demo
npm run start

Example

http://localhost:3002/

Usage

import React from 'react';
import Upload from 'react-upload-zwc';

const { Dragger } = Upload;

React.render(
  <div>
    <Upload
      action="http://localhost:9001/api/upload"
      onChange={changeFiles}
      multiple={true}
    >
      上传文件
    </Upload>

    <Dragger
      width={300}
      height={300}
      action="http://localhost:9001/api/upload"
    >
      <p>
        拖拽文件
      </p>
    </Dragger>
  </div>,
  container
);

API

Upload props

|name|type|default| description| |-----|---|--------|----| |accept | string | - | Types for files to accept which is used to upload.See input accept Attribute. | |action | string|((file: File[]) => Promise) | - | Address to upload. | |className | string | - | Label component className. | |method | 'post'|'get' | 'post' | Request method. | |directory | boolean | "span"| Can upload folders. | |onChange | (file: File[] | FileList | null) => any | - | Emit function when upload file change. | |style | CSSProperties | {} | Label component style | |data | Object | - | Upload required additional parameters. | |fileName | string | 'file' | Name for upload files. | |multiple | boolean | false | Multiple files can be uploaded. | |beforeUpload | (files: FileList | File[] | null) => (boolean | Promise<any>) | - | Emit function before upload. | |uploadSuccess | (...rest: any[]) => any | - | Triggered after successful upload. | |uploadFailed | (...rest: any[]) => any | - | Triggered after upload failed. | |disabled| boolean | false | If disabled | |outterClassName | string | - | Outter wrapper. | |innerClassName | string | - | Inner wrapper. |

Dragger props

|name|type|default| description| |-----|---|--------|----| |height | number | 100 | Set height of dragger | |width | number | 100 | Set width of dragger |

License

React is MIT licensed.