Permalink
Browse files

Initial commit

  • Loading branch information...
0 parents commit e70b1ad3421af607e725db93622f0bc6369c3065 @paramaggarwal paramaggarwal committed Sep 27, 2014
Showing with 204 additions and 0 deletions.
  1. +28 −0 .gitignore
  2. +22 −0 LICENSE
  3. +46 −0 README.md
  4. +75 −0 index.js
  5. +33 −0 package.json
  6. BIN screenshot.png
@@ -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
@@ -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.
+
@@ -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
@@ -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;
@@ -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"
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e70b1ad

Please sign in to comment.