Added ecstatica generator, file uploader and user tools

client/src/app/components/molecules/common/Dropzone/Dropzone.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class Dropzone extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { hightlight: false };
+    this.fileInputRef = React.createRef();
+    this.openFileDialog = this.openFileDialog.bind(this);
+    this.onFilesAdded = this.onFilesAdded.bind(this);
+    this.onDragOver = this.onDragOver.bind(this);
+    this.onDragLeave = this.onDragLeave.bind(this);
+    this.onDrop = this.onDrop.bind(this);
+  }
+
+  openFileDialog() {
+    if (this.props.disabled) return;
+    this.fileInputRef.current.click();
+  }
+
+  onFilesAdded(evt) {
+    if (this.props.disabled) return;
+    const files = evt.target.files;
+    if (this.props.onFilesAdded) {
+      const array = this.fileListToArray(files);
+      this.props.onFilesAdded(array);
+    }
+  }
+
+  fileListToArray(list) {
+    const array = [];
+    for (var i = 0; i < list.length; i++) {
+      array.push(list.item(i));
+    }
+    return array;
+  }
+
+  onDragOver(evt) {
+    evt.preventDefault();
+    if (this.props.disabled) return;
+    this.setState({ hightlight: true });
+  }
+
+  onDragLeave() {
+    this.setState({ hightlight: false });
+  }
+
+  onDrop(event) {
+    event.preventDefault();
+    if (this.props.disabled) return;
+    const files = event.dataTransfer.files;
+    if (this.props.onFilesAdded) {
+      const array = this.fileListToArray(files);
+      this.props.onFilesAdded(array);
+    }
+    this.setState({ hightlight: false });
+  }
+
+  render() {
+    return (
+      <div
+      className={`c-Dropzone ${this.state.hightlight ? "Highlight" : ""}`}
+        onClick={this.openFileDialog}
+        onDragOver={this.onDragOver}
+        onDragLeave={this.onDragLeave}
+        onDrop={this.onDrop}
+        style={{ cursor: this.props.disabled ? "default" : "pointer" }}
+      >
+        <img
+          alt="upload"
+          className="Icon"
+          src="/images/cloud.svg"
+        />
+        <input
+          ref={this.fileInputRef}
+          className="FileInput"
+          type="file"
+          multiple
+          onChange={this.onFilesAdded}
+        />
+        <span>Upload Files</span>
+      </div>
+    );
+  }
+}
+
+Dropzone.propTypes = {
+  onFilesAdded: PropTypes.func
+};
+
+export default Dropzone;