Initial commit

.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# Commenting this out is preferred by some people, see
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
+node_modules
+
+# Users Environment Variables
+.lock-wscript

LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Param Aggarwal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

README.md

@@ -0,0 +1,46 @@
+react-dropzone
+=================
+
+Simple HTML5 drag-drop zone in React.js.
+
+![Screenshot of dropzone](https://raw.githubusercontent.com/paramaggarwal/react-dropzone/master/screenshot.png)
+
+Usage
+=====
+
+Simply `require()` the module and specify a `handler` property as a function that accepts the dropped file.
+
+You may additionally pass in a CSS size for the dropzone using the `size` property.
+
+```jsx
+
+var Dropzone = require('react-dropzone');
+
+var component = React.createClass({
+
+  fileHandler: function(file) {
+      uploadScript(file, uploadURL, function(err, res) {
+        if (res.code == 200) {console.log("Upload success.")}
+      });
+    }
+  },
+
+  render: function() {
+    return (
+      <div>
+        <Dropzone handler={this.fileHandler} />
+      </div>
+    );
+  }
+});
+```
+
+Author
+======
+
+Param Aggarwal (paramaggarwal@gmail.com)
+
+License
+=======
+
+MIT

index.js

@@ -0,0 +1,75 @@
+/**
+ * @jsx React.DOM
+ */
+'use strict';
+
+var React = require('react');
+
+var component = React.createClass({
+
+  getInitialState: function() {
+    return {
+      isDragActive: false
+    }
+  },
+
+  dragLeaveHandler: function(e) {
+    this.setState({
+      isDragActive: false
+    });
+  },
+
+  dragOverHandler: function(e) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+
+    this.setState({
+      isDragActive: true
+    });
+  },
+
+  dropHandler: function(e) {
+    e.preventDefault();
+
+    this.setState({
+      isDragActive: false
+    });
+
+    if (this.props.handler) {
+      var file = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];
+      this.props.handler(file);
+    }
+  },
+
+  render: function() {
+
+    var size = this.props.size || "100pt";
+    var dropzoneStyle = {
+      width: size,
+      height: size,
+      borderRadius: "10%",
+      borderWidth: "2pt",
+      borderColor: "#666",
+      borderStyle: this.state.isDragActive ? "solid" : "dashed"
+    };
+
+    var messageStyle = {
+      display: "table-cell",
+      width: size,
+      height: size,
+      textAlign: "center",
+      verticalAlign: "middle",
+      fontSize: "10pt",
+      textTransform: "uppercase",
+      color: "#666"
+    };
+
+    return (
+      <div ref="container" className="dropzone-container" style={dropzoneStyle} onDragLeave={this.dragLeaveHandler} onDragOver={this.dragOverHandler} onDrop={this.dropHandler}>
+        <span className="dropzone-message" style={messageStyle}>Drop Here</span>
+      </div>
+    );
+  }
+});
+
+module.exports = component;

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "react-dropzone",
+  "version": "0.1.0",
+  "description": "Simple HTML5 drag-drop zone in React",
+  "main": "index.js",
+  "keywords": [
+    "react-component",
+    "react",
+    "drag",
+    "drop",
+    "upload"
+  ],
+  "browserify": {
+    "transform": [
+      [
+        "reactify",
+        {
+          "harmony": true
+        }
+      ]
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:paramaggarwal/react-dropzone.git"
+  },
+  "bugs": {
+    "url": "https://github.com/paramaggarwal/react-dropzone/issues"
+  },
+  "homepage": "https://github.com/paramaggarwal/react-dropzone",
+  "author": "Param Aggarwal",
+  "license": "MIT"
+}