Implement drag-n-drop image for backgrounds (#157)

- Closes #122

components/Carbon.js

@@ -147,8 +147,13 @@ class Carbon extends React.Component {
             }
 
             #container .bg {
-              background: ${this.props.config.background || config.background};
+              ${this.props.config.backgroundImage
-              position: absolute;
+                ? `background: url(${this.props.config.backgroundImage});
+                   background-size: cover;
+                   background-repeat: no-repeat;`
+                : `background: ${this.props.config.background || config.background};
+                   background-size: auto;
+                   background-repeat: repeat;`} position: absolute;
               top: 0px;
               right: 0px;
               bottom: 0px;

package.json

@@ -20,7 +20,7 @@
     "codemirror": "^5.31.0",
     "codemirror-mode-elixir": "^1.1.1",
     "dom-to-image": "^2.5.2",
-    "dropperx": "^0.0.3",
+    "dropperx": "^0.1.0",
     "express": "^4.16.2",
     "form-data": "^2.2.0",
     "highlight.js": "^9.12.0",

pages/editor.js

@@ -3,7 +3,7 @@ import React from 'react'
 import HTML5Backend from 'react-dnd-html5-backend'
 import { DragDropContext } from 'react-dnd'
 import domtoimage from 'dom-to-image'
-import ReadFileDropContainer from 'dropperx'
+import ReadFileDropContainer, { DATA_URL, TEXT } from 'dropperx'
 
 // Ours
 import Page from '../components/Page'
@@ -68,6 +68,7 @@ class Editor extends React.Component {
         paddingVertical: '48px',
         paddingHorizontal: '32px',
         uploading: false,
+        backgroundImage: null,
         code: props.content,
         _initialState: this.props.initialState
       },
@@ -93,6 +94,7 @@ class Editor extends React.Component {
     updateQueryString(this.state)
     const s = { ...this.state }
     delete s.code
+    delete s.backgroundImage
     saveState(localStorage, s)
   }
 
@@ -138,6 +140,10 @@ class Editor extends React.Component {
       })
   }
 
+  isImage(file) {
+    return file.type.split('/')[0] === 'image'
+  }
+
   render() {
     return (
       <Page enableHeroText>
@@ -177,7 +183,21 @@ class Editor extends React.Component {
             </div>
           </Toolbar>
 
-          <ReadFileDropContainer onDrop={([file]) => this.setState({ code: file.content })}>
+          <ReadFileDropContainer
+            readAs={file => {
+              if (this.isImage(file)) {
+                return DATA_URL
+              }
+              return TEXT
+            }}
+            onDrop={([file]) => {
+              if (this.isImage(file)) {
+                this.setState({ backgroundImage: file.content })
+              } else {
+                this.setState({ code: file.content })
+              }
+            }}
+          >
             {({ isOver, canDrop }) => (
               <Overlay
                 isOver={isOver || canDrop}

yarn.lock

@@ -1729,9 +1729,9 @@ dot-prop@^3.0.0:
   dependencies:
     is-obj "^1.0.0"
 
-dropperx@^0.0.3:
+dropperx@^0.1.0:
-  version "0.0.3"
+  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/dropperx/-/dropperx-0.0.3.tgz#4744bb49a79a7b7e4f0a4ecf13894f84c4e8a413"
+  resolved "https://registry.yarnpkg.com/dropperx/-/dropperx-0.1.0.tgz#73bc94e26391a1ae1f145c1dd79b47963fed44b8"
   dependencies:
     react ">=15"
     react-dnd ">=2"