From 6bdf6286c8d68364629fb43ac6aa698becbde44e Mon Sep 17 00:00:00 2001
From: James <james@keen-studio.com>
Date: Sat, 23 Mar 2019 16:11:13 -0400
Subject: [PATCH] begins Media file type

---
 demo/Page/Page.config.js                      |  6 ++
 demo/Page/components/Edit/index.js            |  7 ++
 nodemon.json                                  |  3 +-
 src/components.js                             |  3 +
 src/components/controls/Button/index.js       | 40 ++++-----
 src/components/controls/Button/index.scss     |  2 +-
 src/components/field-types/File/index.js      | 28 ------
 src/components/field-types/Media/index.js     | 53 ++++++++++++
 .../field-types/{File => Media}/index.scss    |  0
 src/components/modules/DragAndDrop/index.js   | 85 +++++++++++++++++++
 src/components/modules/DragAndDrop/index.scss | 22 +++++
 11 files changed, 199 insertions(+), 50 deletions(-)
 delete mode 100644 src/components/field-types/File/index.js
 create mode 100644 src/components/field-types/Media/index.js
 rename src/components/field-types/{File => Media}/index.scss (100%)
 create mode 100644 src/components/modules/DragAndDrop/index.js
 create mode 100644 src/components/modules/DragAndDrop/index.scss

diff --git a/demo/Page/Page.config.js b/demo/Page/Page.config.js
index 7001a3b7e7..2044f7e373 100644
--- a/demo/Page/Page.config.js
+++ b/demo/Page/Page.config.js
@@ -19,6 +19,12 @@ export default {
       height: 100,
       required: true
     },
+    {
+      name: 'image',
+      label: 'Image',
+      type: 'media',
+      required: true
+    },
     {
       name: 'slides',
       label: 'Slides',
diff --git a/demo/Page/components/Edit/index.js b/demo/Page/components/Edit/index.js
index 73b2e84e7a..61ecdeb1d0 100644
--- a/demo/Page/components/Edit/index.js
+++ b/demo/Page/components/Edit/index.js
@@ -8,6 +8,7 @@ import {
   Form,
   Input,
   Textarea,
+  Media,
   Group,
   FormSubmit,
   Repeater
@@ -51,6 +52,12 @@ const Edit = props => {
           height={100}
           required />
 
+        <Media name="image"
+          label="Image"
+          initialValue={data['image']}
+          height={100}
+          required />
+
         <Repeater
           name="slides"
           label="Slides"
diff --git a/nodemon.json b/nodemon.json
index 1322efbe8b..a581c22a2f 100644
--- a/nodemon.json
+++ b/nodemon.json
@@ -1,7 +1,8 @@
 {
   "ignore": [
     ".git",
-    "node_modules/**/node_modules"
+    "node_modules/**/node_modules",
+    "src/components"
   ],
   "watch": [
     "demo/",
diff --git a/src/components.js b/src/components.js
index 4a1bf88dc7..6a7f758323 100644
--- a/src/components.js
+++ b/src/components.js
@@ -12,6 +12,7 @@ export { default as fieldType } from './components/field-types/fieldType';
 export { default as Group } from './components/field-types/Group';
 export { default as Repeater } from './components/field-types/Repeater';
 export { default as Input } from './components/field-types/Input';
+export { default as Media } from './components/field-types/Media';
 export { default as Email } from './components/field-types/Email';
 export { default as Password } from './components/field-types/Password';
 export { default as Textarea } from './components/field-types/Textarea';
@@ -45,6 +46,8 @@ export { default as StepNav } from './components/modules/StepNav';
 export { default as Tooltip } from './components/modules/Tooltip';
 export { default as SearchableTable } from './components/modules/SearchableTable';
 export { default as Localizer } from './components/modules/Localizer';
+export { default as DragAndDrop } from './components/modules/DragAndDrop';
+
 
 // Routes
 export { default as CollectionRoutes } from './components/routes/Collections';
diff --git a/src/components/controls/Button/index.js b/src/components/controls/Button/index.js
index a8502a0d1f..b2d4cacb8a 100644
--- a/src/components/controls/Button/index.js
+++ b/src/components/controls/Button/index.js
@@ -22,35 +22,35 @@ class Button extends Component {
     }
 
     this.buttonProps = {
+      ...this.props,
       className: classes,
       onClick: this.props.onClick,
-      disabled: this.props.disabled,
-      ...this.props
+      disabled: this.props.disabled
     };
   }
 
   render() {
     switch (this.props.el) {
-    case 'link':
-      return (
-        <Link {...this.buttonProps} to={this.props.url}>
-          {this.props.children}
-        </Link>
-      );
+      case 'link':
+        return (
+          <Link {...this.buttonProps} to={this.props.url}>
+            {this.props.children}
+          </Link>
+        );
 
-    case 'anchor':
-      return (
-        <a {...this.buttonProps} href={this.props.url}>
-          {this.props.children}
-        </a>
-      );
+      case 'anchor':
+        return (
+          <a {...this.buttonProps} href={this.props.url}>
+            {this.props.children}
+          </a>
+        );
 
-    default:
-      return (
-        <button {...this.buttonProps}>
-          {this.props.children}
-        </button>
-      );
+      default:
+        return (
+          <button {...this.buttonProps}>
+            {this.props.children}
+          </button>
+        );
     }
   }
 }
diff --git a/src/components/controls/Button/index.scss b/src/components/controls/Button/index.scss
index 73a6994cb3..ebca024eb1 100644
--- a/src/components/controls/Button/index.scss
+++ b/src/components/controls/Button/index.scss
@@ -23,7 +23,7 @@
 
     &.btn-secondary {
         border: $stroke-width solid $primary;
-        color: $primary;
+        color: $black;
         background: none;
 
         &.btn-icon {
diff --git a/src/components/field-types/File/index.js b/src/components/field-types/File/index.js
deleted file mode 100644
index ba13272ba2..0000000000
--- a/src/components/field-types/File/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import { fieldType } from 'payload/components';
-
-import './index.scss';
-
-const error = 'There was a problem uploading your file.';
-
-const validate = () => true;
-
-const File = props => {
-  return (
-    <div className="props.className" style={{
-      width: props.width ? `${props.width}%` : null,
-      ...props.style
-    }}>
-      <input
-        value={props.value || ''}
-        onChange={props.onChange}
-        disabled={props.disabled}
-        placeholder={props.placeholder}
-        type="text"
-        id={props.id ? props.id : props.name}
-        name={props.name} />
-    </div>
-  )
-}
-
-export default fieldType(File, 'file', validate, error);
diff --git a/src/components/field-types/Media/index.js b/src/components/field-types/Media/index.js
new file mode 100644
index 0000000000..7350327ad7
--- /dev/null
+++ b/src/components/field-types/Media/index.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import { fieldType, DragAndDrop } from 'payload/components';
+
+import './index.scss';
+
+const error = 'There was a problem uploading your file.';
+
+const validate = () => true;
+
+class Media extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      file: this.props.initialValue
+    }
+
+    this.inputRef = React.createRef();
+  }
+
+  handleDrop = file => {
+    this.inputRef.current.files = file;
+  }
+
+  handleSelectFile = () => {
+    this.inputRef.current.click();
+  }
+
+  render() {
+    return (
+      <div className={this.props.className} style={{
+        width: this.props.width ? `${this.props.width}%` : null,
+        ...this.props.style
+      }}>
+        {this.props.label}
+        <input
+          style={{ display: 'none' }}
+          ref={this.inputRef}
+          value={this.props.value || ''}
+          onChange={this.props.onChange}
+          type="file"
+          id={this.props.id ? this.props.id : this.props.name}
+          name={this.props.name} />
+        {!this.props.value &&
+          <DragAndDrop handleDrop={this.handleDrop} handleSelectFile={this.handleSelectFile} />
+        }
+      </div>
+    )
+  }
+}
+
+export default fieldType(Media, 'media', validate, error);
diff --git a/src/components/field-types/File/index.scss b/src/components/field-types/Media/index.scss
similarity index 100%
rename from src/components/field-types/File/index.scss
rename to src/components/field-types/Media/index.scss
diff --git a/src/components/modules/DragAndDrop/index.js b/src/components/modules/DragAndDrop/index.js
new file mode 100644
index 0000000000..cd72f3391f
--- /dev/null
+++ b/src/components/modules/DragAndDrop/index.js
@@ -0,0 +1,85 @@
+import React, { Component } from 'react';
+import { Button } from 'payload/components';
+
+import './index.scss';
+
+class DragAndDrop extends Component {
+
+  constructor() {
+    super();
+
+    this.state = {
+      dragging: false
+    }
+
+    this.dropRef = React.createRef();
+    this.dragCounter = 0;
+  }
+
+  componentDidMount() {
+    let div = this.dropRef.current
+    div.addEventListener('dragenter', this.handleDragIn)
+    div.addEventListener('dragleave', this.handleDragOut)
+    div.addEventListener('dragover', this.handleDrag)
+    div.addEventListener('drop', this.handleDrop)
+  }
+
+  componentWillUnmount() {
+    let div = this.dropRef.current
+    div.removeEventListener('dragenter', this.handleDragIn)
+    div.removeEventListener('dragleave', this.handleDragOut)
+    div.removeEventListener('dragover', this.handleDrag)
+    div.removeEventListener('drop', this.handleDrop)
+  }
+
+  handleDrag = e => {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  handleDragIn = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.dragCounter++;
+    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+      this.setState({ dragging: true })
+    }
+  }
+
+  handleDragOut = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.dragCounter--;
+    if (this.dragCounter > 0) return;
+    this.setState({ dragging: false })
+  }
+
+  handleDrop = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.setState({ dragging: false })
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      this.props.handleDrop(e.dataTransfer.files)
+      e.dataTransfer.clearData()
+      this.dragCounter = 0
+    }
+  }
+
+  onSelectFile = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.props.handleSelectFile();
+  }
+
+  render() {
+    return (
+      <div ref={this.dropRef} className={`drag-and-drop${this.state.dragging ? ' dragging' : ''}`}>
+        <span className="instructions">Drag and drop a file here</span>
+        <span className="or">&mdash;or&mdash;</span>
+        <Button className="select-file" type="secondary" onClick={this.onSelectFile}>Select a File</Button>
+      </div>
+    )
+  }
+}
+
+export default DragAndDrop;
diff --git a/src/components/modules/DragAndDrop/index.scss b/src/components/modules/DragAndDrop/index.scss
new file mode 100644
index 0000000000..39679fe3af
--- /dev/null
+++ b/src/components/modules/DragAndDrop/index.scss
@@ -0,0 +1,22 @@
+@import '~payload/scss/styles';
+
+.drag-and-drop {
+  padding: rem(1);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  border: $stroke-width solid $primary;
+
+  &.dragging {
+    background: rgba($primary, .1);
+  }
+
+  .or {
+    @extend %uppercase-label;
+    display: block;
+  }
+
+  .btn {
+    margin: rem(.125) 0 0;
+  }
+}