react-file-dropzone
Version:
React component for Gmail or Facbook -like drag and drop file uploader. Drag files anywhere onto the window (or user defined "frame" prop)! Very extensible, provides many hooks so you can use it to develop any custom behavior that you desire.
73 lines (62 loc) • 2.48 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo | React File Drop</title>
<script type="text/javascript" src="../node_modules/react/dist/react.js"></script>
<script type="text/javascript" src="../FileDrop.js"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<link rel="stylesheet" href="file-drop.css" />
<style>
body {
font-family: Helvetica, Arial, sans-serif;
}
.prettyprint {
border: none ;
margin-left: -60px ;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var _handleFileDrop = function(files, event) {
console.log(files, event);
};
var styles = {border: "1px solid black", width: 600, color: "black", padding: 20};
var myUploader = React.createElement(
"div", {className: "my-uploader", style: styles},
"This is the \".my-uploader\" div. Try dragging a file!",
React.createElement(
ReactFileDrop, {onDrop: _handleFileDrop, frame: document, dropEffect: "copy"},
"Drop some files here!"
)
);
React.render(myUploader, document.getElementById("demo-contents"))
});
</script>
</head>
<body>
<h1>React File Drop demo</h1>
<pre class="prettyprint">
var React = require("react");
var FileDrop = require("react-file-drop");
var MyUploader = React.createClass({
displayName: "MyUploader",
_handleFileDrop: function(files, event) {
console.log(files, event);
},
render: function() {
return (
var styles = {border: "1px solid black", width: 600, color: "black", padding: 20};
<div className="my-uploader" style={{styles}}>
This is the ".my-uploader" div. Try dragging a file!
<FileDrop frame={document} onDrop={this._handleFileDrop}>
Drop some files here!
</FileDrop>
</div>
);
}
});
</pre>
<div id="demo-contents"></div>
</body>
</html>