add paste to upload

demo/index.jsx

@@ -574,4 +574,36 @@ ReactDOM.render((
   <Demo9 />
 ), document.getElementById('sample9'));
 
+class Demo10 extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      fileList: [],
+    };
+  }
+
+  handleChange(fileList) {
+    this.setState({
+      fileList,
+    });
+  }
+
+  render() {
+    return (<Uploader
+      multiple
+      isOnlyImg={false}
+      name="file"
+      isVisual={false}
+      isPaste={true}
+      fileList={this.state.fileList}
+      onChange={this.handleChange.bind(this)}
+      url="http://eternalsky.me:8122/file/upload"
+    />);
+  }
+}
+
+ReactDOM.render((
+  <Demo10 />
+), document.getElementById('sample10'));
+
 // hljs.initHighlightingOnLoad();

index.html

@@ -99,6 +99,11 @@ <h3>Sample9 - 包裹UI-2</h3>
 
     <div class="sample" id="sample9"></div>
 
+    <!--Sample 10-->
+    <h3>Sample10 - 粘贴上传</h3>
+
+    <div class="sample" id="sample10"></div>
+
 
 
     <footer class="site-footer">

src/Paste.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import i18n from './locale';
+
+export default class Picker extends React.Component {
+  componentDidMount() {
+    this.paste = this.props.core.getPasteCollector().addArea(ReactDOM.findDOMNode(this));
+  }
+  componentWillUnmount() {
+    this.paste && this.paste.destroy();
+  }
+
+  render() {
+    const { prefixCls, locale } = this.props;
+    return (
+      <div className={`${prefixCls}-paste-section`}
+        style={{ verticalAlign:'top' }}
+      >
+        <input type="input" className={`${prefixCls}-paste-picker`} />
+        <div className={`${prefixCls}-paste-text`}>{i18n[locale].paste_upload}</div>
+      </div>
+    );
+  }
+}
+

src/Uploader.js

@@ -7,6 +7,7 @@ import { polyfill } from 'react-lifecycles-compat';
 import util from './util';
 import FileList from './FileList';
 import Picker from './Picker';
+import Paste from './Paste';
 import Dropzoom from './Dropzoom';
 import i18n from './locale';
 
@@ -38,6 +39,7 @@ class Uploader extends React.Component {
     onChange: () => { },
     onError: () => { },
     isVisual: false,
+    isPaste: false,
     hideUploadIcon: false,
     isOnlyImg: false,
     showErrFile: true,
@@ -59,6 +61,7 @@ class Uploader extends React.Component {
     readOnly: PropTypes.bool,
     queueCapcity: PropTypes.number,
     isVisual: PropTypes.bool,
+    isPaste: PropTypes.bool,
     hideUploadIcon: PropTypes.bool,
     isOnlyImg: PropTypes.bool,
     showErrFile: PropTypes.bool,
@@ -292,7 +295,7 @@ class Uploader extends React.Component {
 
   render() {
     const me = this;
-    const { prefixCls, locale, className, isVisual, hideUploadIcon, queueCapcity } = this.props;
+    const { prefixCls, locale, className, isVisual, isPaste, hideUploadIcon, queueCapcity } = this.props;
     let children = this.props.children;
     const readOnly = this.props.readOnly;
     const uploadingFiles = me.getUploadingFiles();
@@ -309,7 +312,7 @@ class Uploader extends React.Component {
       }
     }
     const tips = readOnly ? null : this.renderTips();
-    const noPicker = isVisual && hideUploadIcon && queueCapcity > 0 &&
+    const noPicker = (isVisual || isPaste) && hideUploadIcon && queueCapcity > 0 &&
       (uploadingFiles.length + notDeletedDefaultFiles.length) >= queueCapcity;
     const picker = readOnly || noPicker ? null : (
       <Picker
@@ -318,6 +321,15 @@ class Uploader extends React.Component {
         core={this.core}
         isVisual={this.props.isVisual}
       >{children}</Picker>);
+    const paste = isPaste ? (
+      <Paste
+        key="picker"
+        prefixCls={prefixCls}
+        core={this.core}
+        isPaste={isPaste}
+        locale={locale}
+      />
+    ) : null;
     const files = (uploadingFiles.length > 0 || notDeletedDefaultFiles.length > 0)
       ? (
       <FileList
@@ -343,7 +355,10 @@ class Uploader extends React.Component {
       : (
         isVisual ? (picker) : null
       );
-    const contents = isVisual ? [tips, files] : [picker, tips, files];
+    let contents = isVisual ? [tips, files] : [picker, tips, files];
+    if (isPaste) {
+      contents = [paste, tips, files];
+    }
     const clazzName = classNames(`${prefixCls}er`, className);
     return (
       <div className={clazzName}>

src/Uploader.less

@@ -986,3 +986,30 @@
     font-size: 17px;
   }
 }
+
+.@{__uploaderPrefixCls}-paste-section {
+  position: relative;
+}
+
+.@{__uploaderPrefixCls}-paste-picker {
+  height: 30px;
+  width: 200px;
+  border-radius: 5px;
+  border: 1px dashed #D9D9D9;
+  color: transparent;
+  background: transparent;
+  cursor: pointer;
+  z-index: 102;
+  position: relative;
+
+  &:focus {
+    border: 1px solid #288df0;
+  }
+}
+
+.@{__uploaderPrefixCls}-paste-text {
+  position: absolute;
+  top: 5px;
+  left: 15px;
+  z-index: 101;
+}

src/locale.js

@@ -9,6 +9,7 @@ const locale = {
     upload_failed: 'upload failed',
     upload_files: 'upload files',
     upload_files_img: 'upload images',
+    paste_upload: 'focus then paste to upload',
   },
   'pl-pl': {
     download: 'pobierz',
@@ -20,6 +21,7 @@ const locale = {
     upload_failed: 'wysyłka nieudana',
     upload_files: 'wyślij pliki',
     upload_files_img: 'wyślij zdjęcie',
+    paste_upload: 'Kliknij i wklej aby przesłać',
   },
   'zh-cn': {
     download: '下载',
@@ -31,6 +33,7 @@ const locale = {
     upload_failed: '上传失败',
     upload_files: '添加文件',
     upload_files_img: '上传图片',
+    paste_upload: '点击并粘贴上传',
   },
 };
 

tests/Paste.spec.js

@@ -0,0 +1,48 @@
+import expect from 'expect.js';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import sinon from 'sinon';
+import React from 'react';
+import Picker from '../src/Picker';
+import Paste from '../src/Paste';
+import { Core } from 'uploadcore';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Paste', () => {
+  let core;
+  beforeEach(() => {
+    core = new Core();
+  });
+
+  it('should render correctly when isPaste is not true', () => {
+    const wrapper = mount(<Picker core={core} prefixCls={'kuma-upload'}><span className="foo" /></Picker>);
+    const root = wrapper.children();
+    expect(root.hasClass('kuma-upload-picker')).to.be(true);
+    expect(root.children().hasClass('foo')).to.be(true);
+  });
+
+  it('should render correctly when isPaste is true', () => {
+    const wrapper = mount(<Paste core={core} prefixCls={'kuma-upload'} isVisual><span className="foo" /></Paste>);
+    const root = wrapper.children();
+    expect(root.hasClass('kuma-upload-paste-section')).to.be(true);
+    expect(root.children().first().hasClass('kuma-upload-paste-picker')).to.be(true);
+    expect(root.children().at(1).hasClass('kuma-upload-paste-text')).to.be(true);
+  });
+
+  it('should add area when mounted', () => {
+    sinon.spy(core.getPickerCollector(), 'addArea');
+    const wrapper = mount(<Paste core={core} />);
+    const { addArea } = core.getPasteCollector();
+    expect(addArea.calledOnce).to.be(true);
+    expect(addArea.calledWith(wrapper.getDOMNode())).to.be(true);
+  });
+
+  it('should destroy area when unmounted', () => {
+    const wrapper = mount(<Paste core={core} />);
+    const { area } = wrapper.instance();
+    sinon.spy(area, 'destroy');
+    wrapper.unmount();
+    expect(area.destroy.calledOnce).to.be(true);
+  });
+});