begins Media file type

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';

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>
+        );
     }
   }
 }

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 {

src/components/field-types/File/index.js

@@ -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);

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);

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;

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;
+  }
+}