# react-widget-upload

> react-widget-upload

Latest version **1.0.1** (published 2020-07-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-widget-upload
pnpm add react-widget-upload
yarn add react-widget-upload
bun add react-widget-upload
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-07-05 |
| First published | 2020-07-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 28.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | nobo.zhou@foxmail.com |
| Maintainers | bplok20010 |
| Keywords | react, react-widget, upload |

## Links

- npm: https://www.npmjs.com/package/react-widget-upload
- Repository: https://github.com/react-widget/upload
- Homepage: https://github.com/react-widget/upload#readme
- Issues: https://github.com/react-widget/upload/issues
- npm.io page: https://npm.io/package/react-widget-upload

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.9.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2020-07-05
- 1.0.0 — 2020-07-05

## README

# react-widget-upload

Upload基础组件


## 安装

```
npm install --save react-widget-upload
```

## 使用

[![Edit react-widget-upload](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/winter-morning-7uuhn?fontsize=14&hidenavigation=1&theme=dark)

```js
import Upload from 'react-widget-upload';
import 'react-widget-upload/style';

<Upload onChange={files => {...}}>选择文件</Upload>;

```

### Interfaces

```ts
export interface RWFile extends File {
    webkitRelativePath?: string;
}
export interface UploadProps extends Omit<React.HTMLAttributes<any>, "onChange"> {
    /** 组件样式前缀 */
    prefixCls?: string;
    /** 组件标签 */
    tagName?: string;
    /** input name属性 */
    name?: string;
    /** input accept */
    accept?: string;
    /** input multiple */
    multiple?: boolean;
    /** input key，用于部分情况下重新创建input */
    inputKey?: React.Key;
    /** 是否支持文件夹上传 */
    directory?: boolean;
    /** 禁用 */
    disabled?: boolean;
    /** 禁用，相比disabled只是默认样式不同 */
    readOnly?: boolean;
    /** 点击时打开系统文件选择窗口 */
    openFileDialogOnClick?: boolean;
    /** 是否支持拖拽上传 */
    droppable?: boolean;
    /** 设置选择onChange接收的最大文件数，默认为无限 */
    maxFiles?: number;
    /** 用户选择或取消选择后的回调 */
    onChange?: (files: RWFile[]) => void;
}

```

### defaultProps

```js
{
	prefixCls: "rw-upload",
	tagName: "div",
	tabIndex: 0,
	maxFiles: Number.MAX_VALUE,
	droppable: true,
	openFileDialogOnClick: true,
}
```

### 基础样式

```css
.rw-upload {
    cursor: pointer;
}


```

### FAQ

`react-widget-upload`只负责将用户选择后的文件回传给使用者，并不进行实际的文件上传，使用者需要自行构建`FormData`，示例：

```js

function handleChange(files){
    if(!files.length) return;
    const file = files[0];

    const formData = new FormData();

    formData.append('file', file, file.name);

    post(url, formData);
}

```

---
_Source: https://npm.io/package/react-widget-upload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._