react-component / dropzone

React Dropzone

rc-dropzone

---

dropzone ui component for react, support for IE11+, chrome and firefox.

Feature

dropzone for react.

install

Usage

var Dropzone = require('rc-dropzone');
var React = require('react');

React.render(
  <Dropzone action="http://127.0.0.1:3000/">
	<div className="dz-message">
	  Drop files here or click to upload.<br/>
	  <span className="note">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
	</div>
  </Dropzone>,
  document.getElementById('__react-content'));

API

props

name	type	默认值	说明
paramName	string	file	文件上传参数名
accept	function	接受所有文件	返回一个Promise对象
inputAccept	string	空字符串	file的accept参数
data	object	{}	post文件的时候，发送的其他参数
success	function	无	上传成功回调
error	function	无	上传失败回调

说明：accept方法必须返回一个Promise对对象，通过resolve表示成功状态，reject表示失败， reject的第一个参数是错误信息.

Development

npm install
npm start

Example

http://localhost:8000/examples/

online example: http://react-component.github.io/dropzone/build/examples/

Test Case

http://localhost:8000/tests/runner.html?coverage

Coverage

http://localhost:8000/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8000/tests/runner.html?coverage

License

rc-dropzone is released under the MIT license.

dropzone's Issues

使用报错

ERROR in .//rc-dropzone/lib/Dropzone.js
Module parse failed:/node_modules/rc-dropzone/lib/Dropzone.js Line 69: Unexpected token <
You may need an appropriate loader to handle this file type.
| var files = this.state.files;
| return Object.keys(files).map(function(uid) {
| return ;
| });
| },
@ .//rc-dropzone/index.js 2:17-42

review on 2015-04-09

功能确实很高级，好多 api 以前从没用过 👍

• readme.md 格式不对，样式乱了，需要升级下 rc-server, rc-tools, generator-rc 到新版，去除了很多文件，可以对比下 https://github.com/react-component/calendar
• flux 是否适合细粒度的组件开发有待思考，store 存放了不同实例的数据，组件不内聚了
• 样式名要以 rc-dropzone 开头，统一到 rc 命名空间，可以考虑支持 prefixCls
• js 不要 require css，由应用者自己 require，方便换肤
• 可以在根目录建个自己的 server 用于 example 的上传测试

var app = require('rc-server')();
app.use(upload());
var port = 8000;
app.listen(port);

• 支持浏览器配置 react-component/rc-tools#1

细节点 review 供参考：

770dda5

2d7061e