@36node/upload
A module boilerplate for react component.
Last updated 2 months ago by zzswang .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @36node/upload 
SYNC missed versions from official npm registry.

@36node/upload

version downloads

a upload component that upload file to aliyun, support crop before upload and can integrate with antd form

Install

yarn add @36node/upload antd ali-oss

Usage

Simple

import Upload from "@36node/upload";
import "@36node/upload/dist/index.css";

const ossOptions = {
  region: '<oss region>',
  accessKeyId: '<Your accessKeyId>',
  accessKeySecret: '<Your accessKeySecret>',
  bucket: '<Your bucket name>'
}

<Upload ossOptions={ossOptions}>
  <Button>upload</Button>
</Upload>

Integrate With Form

<Form>
  <Form.Item>
    {getFieldDecorator("upload", {
      initialValue: [
        {
          uid: Date.now(),
          status: "done",
          name: "logo",
          url: "./images/logo.png",
        },
      ],
    })(
      <Upload ossOptions={ossOptions}>
        <Button>upload</Button>
      </Upload>
    )}
  </Form.Item>
</Form>

Crop Before Upload

check all crop options here

const cropOptions = {
  crop: {
    unit: "%",
    width: 100,
    aspect: 1,
  },
};

<Upload ossOptions={ossOptions} cropOptions={cropOptions}>
  <Button>upload</Button>
</Upload>

check full examples here

API

@36node/upload is base on antd upload, it supports all antd upload api, check it here

some extra options are list below

Property Description Type Default
ossOptions ali-oss options, required object -
cropOptions crop option from react-image-crop object -
maxFileSize the max size of file list. Size unit is kb. number -
maxFileNumber the max number of file list number -
value initial file list array -
onChange A callback function, can be executed when uploading state is changing Function -
listType Built-in stylesheets, support for three types: text, picture or picture-card String 'text'
accept File types that can be accepted. See input accept Attribute String -
preview Preview the uploaded pictures. If preview is true, the upload component will display preview of picture. Boolean true

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

module © 36node, Released under the MIT License.

Authored and maintained by 36node with help from contributors (list).

github.com/zzswang · GitHub @36node

Current Tags

  • 0.3.4                                ...           latest (2 months ago)

7 Versions

  • 0.3.4                                ...           2 months ago
  • 0.3.3                                ...           2 months ago
  • 0.3.2                                ...           7 months ago
  • 0.2.0                                ...           a year ago
  • 0.1.2                                ...           a year ago
  • 0.1.1                                ...           a year ago
  • 0.1.0                                ...           a year ago
Downloads
Today 0
This Week 7
This Month 7
Last Day 0
Last Week 0
Last Month 20
Dependencies (6)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |