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

Online Demo

https://weichaozhan.github.io/ReactUploadZWC/demo/

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.
customAction	(...rest: any[]) => any	-	Your custom action. uploadFailed & uploadSuccess will be invalid.

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.