Update #687 - Native File Example

examples/06 Other/Native Files/Container.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { DragDropContext, DragDropContextProvider } from 'react-dnd';
+import HTML5Backend, { NativeTypes } from 'react-dnd-html5-backend';
+import TargetBox from './TargetBox';
+import FileList from './FileList';
+
+@DragDropContext(HTML5Backend)
+export default class Container extends Component {
+  constructor(props) {
+    super(props);
+
+    this.handleFileDrop = this.handleFileDrop.bind(this);
+
+    this.state = { droppedFiles: [] };
+  }
+
+  handleFileDrop(item, monitor) {
+    if (monitor) {
+      const droppedFiles = monitor.getItem().files;
+      this.setState({ droppedFiles });
+    }
+  }
+
+  render() {
+    const { FILE } = NativeTypes;
+    const { droppedFiles } = this.state;
+
+    return (
+      <DragDropContextProvider backend={HTML5Backend}>
+        <div>
+          <TargetBox accepts={[FILE]} onDrop={this.handleFileDrop} />
+          <FileList files={droppedFiles} />
+        </div>
+      </DragDropContextProvider>
+    );
+  }
+}

examples/06 Other/Native Files/FileList.js

@@ -0,0 +1,23 @@
+import React, { PropTypes, Component } from 'react';
+
+export default class FileList extends Component {
+  static propTypes = {
+    files: PropTypes.arrayOf(PropTypes.object),
+  };
+
+  list(files) {
+    return files.map(file => <li key={file.name}>{`'${file.name}'' of size '${file.size}' and type '${file.type}'`}</li>);
+  }
+
+  render() {
+    const { files } = this.props;
+
+    if (files.length === 0) {
+      return <div>Nothing to display</div>;
+    }
+
+    return (
+      <div>{ this.list(files) }</div>
+    );
+  }
+}

examples/06 Other/Native Files/TargetBox.js

@@ -0,0 +1,48 @@
+import React, { PropTypes, Component } from 'react';
+import { DropTarget } from 'react-dnd';
+
+const style = {
+  border: '1px solid gray',
+  height: '15rem',
+  width: '15rem',
+  padding: '2rem',
+  textAlign: 'center',
+};
+
+const boxTarget = {
+  drop(props, monitor) {
+    if (props.onDrop) {
+      props.onDrop(props, monitor);
+    }
+  },
+};
+
+@DropTarget(props => props.accepts, boxTarget, (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop(),
+}))
+
+export default class TargetBox extends Component {
+  static propTypes = {
+    connectDropTarget: PropTypes.func.isRequired,
+    isOver: PropTypes.bool.isRequired,
+    canDrop: PropTypes.bool.isRequired,
+    accepts: PropTypes.arrayOf(PropTypes.string).isRequired,
+    onDrop: PropTypes.func,
+  };
+
+  render() {
+    const { canDrop, isOver, connectDropTarget } = this.props;
+    const isActive = canDrop && isOver;
+
+    return connectDropTarget(
+      <div style={style}>
+        {isActive ?
+          'Release to drop' :
+          'Drag file here'
+        }
+      </div>,
+    );
+  }
+}

examples/06 Other/Native Files/index.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import Container from './Container';
+
+export default class NativeFiles extends Component {
+  render() {
+    return (
+      <div>
+        <p>
+          <b><a href="https://github.com/react-dnd/react-dnd/tree/master/examples/05%20Customize/Native%20Files">Browse the Source</a></b>
+        </p>
+        <p>
+          Example demonstrating drag and drop of native files.
+        </p>
+        <Container />
+      </div>
+    );
+  }
+}

package.json

@@ -24,7 +24,8 @@
   "author": "Dan Abramov <dan.abramov@me.com> (http://github.com/gaearon)",
   "contributors": [
     "Chris Trevino <darthtrevino@gmail.com> (http://github.com/darthtrevino)",
-    "Jordan Gensler (http://github.com/kesne)"
+    "Jordan Gensler (http://github.com/kesne)",
+    "Gagan (https://github.com/thetechie)"
   ],
   "license": "MIT",
   "bugs": {