✨ Add option to upload background image

Using react-dropzone and FileReader to allow user to upload image from computer onto background-image of the banner christopherkade#5
diveresque · Jul 25, 2019 · e43c348 · e43c348
1 parent 3e9a764
commit e43c348
Show file tree

Hide file tree

Showing 9 changed files with 13,147 additions and 38 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/BannerWrapper/__snapshots__/BannerWrapper.spec.js.snap b/src/components/BannerWrapper/__snapshots__/BannerWrapper.spec.js.snap
@@ -2,32 +2,60 @@
 
 exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
 <div>
+  <a
+    aria-label="View source on GitHub"
+    class="github-corner"
+    href="https://github.com/christopherkade/banner-generator"
+  >
+    <svg
+      aria-hidden="true"
+      height="80"
+      style="fill: #151513; color: rgb(255, 255, 255); position: absolute; top: 0px; border: 0px; right: 0px;"
+      viewBox="0 0 250 250"
+      width="80"
+    >
+      <path
+        d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"
+      />
+      <path
+        class="octo-arm"
+        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor"
+        style="transform-origin: 130px 106px;"
+      />
+      <path
+        class="octo-body"
+        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor"
+      />
+    </svg>
+  </a>
   <div
-    class="sc-fjdhpX iJuInZ"
+    class="sc-jzJRlG kKEMns"
   >
     <div
-      class="sc-gZMcBi hpgAcJ"
+      class="sc-gqjmRU bdKHZi"
       id="capture"
     >
       <h1
-        class="sc-gqjmRU ctLfvQ"
-        size="5"
+        class="sc-VigVT gEAXRM"
+        size="4"
       >
-        Hello DEV 🎉
+        DEV banner generator 🎉
       </h1>
     </div>
     <div
-      class="sc-jzJRlG kFlBgG"
+      class="sc-cSHVUG dtvCtR"
     >
       <div
-        class="sc-htoDjs kKtqja"
+        class="sc-dnqmqq jBNPgH"
       >
         <details
-          class="sc-dnqmqq iGdcAj"
+          class="sc-iwsKbI jrDyKB"
           open=""
         >
           <summary
-            class="sc-iwsKbI hPLzFK"
+            class="sc-gZMcBi WtlHs"
           >
             Content
           </summary>
@@ -41,15 +69,15 @@ exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
             </label>
             <input
               class="sc-bdVaJa eQjeEW"
-              value="Hello DEV 🎉"
+              value="DEV banner generator 🎉"
             />
           </div>
         </details>
         <details
-          class="sc-dnqmqq iGdcAj"
+          class="sc-iwsKbI jrDyKB"
         >
           <summary
-            class="sc-iwsKbI hPLzFK"
+            class="sc-gZMcBi WtlHs"
           >
             Colors
           </summary>
@@ -349,7 +377,7 @@ exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
                           title="#000000"
                         >
                           <div
-                            style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 1;"
+                            style="position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; background: rgb(255, 255, 255); border-radius: 50%; opacity: 0;"
                           />
                         </div>
                       </span>
@@ -483,15 +511,15 @@ exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
                       style="display: flex; padding-bottom: 6px; padding-right: 5px; position: relative;"
                     >
                       <div
-                        style="position: absolute; top: 6px; left: 5px; height: 9px; width: 9px; background: rgb(0, 0, 0);"
+                        style="position: absolute; top: 6px; left: 5px; height: 9px; width: 9px; background: rgb(21, 21, 19);"
                       />
                       <div
                         style="position: relative; flex: 6;"
                       >
                         <input
                           spellcheck="false"
                           style="width: 80%; padding: 0px 0px 0px 20%; outline: none; background: none; font-size: 12px; color: rgb(51, 51, 51); height: 16px;"
-                          value="#000000"
+                          value="#151513"
                         />
                         <span
                           style="display: none;"
@@ -505,7 +533,7 @@ exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
                         <input
                           spellcheck="false"
                           style="width: 70%; padding: 0px 0px 0px 30%; outline: none; background: none; font-size: 12px; color: rgb(51, 51, 51); height: 16px;"
-                          value="0"
+                          value="21"
                         />
                         <span
                           style="position: absolute; top: 3px; left: 0px; line-height: 16px; text-transform: uppercase; font-size: 12px; color: rgb(153, 153, 153);"
@@ -519,7 +547,7 @@ exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
                         <input
                           spellcheck="false"
                           style="width: 70%; padding: 0px 0px 0px 30%; outline: none; background: none; font-size: 12px; color: rgb(51, 51, 51); height: 16px;"
-                          value="0"
+                          value="21"
                         />
                         <span
                           style="position: absolute; top: 3px; left: 0px; line-height: 16px; text-transform: uppercase; font-size: 12px; color: rgb(153, 153, 153);"
@@ -533,7 +561,7 @@ exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
                         <input
                           spellcheck="false"
                           style="width: 70%; padding: 0px 0px 0px 30%; outline: none; background: none; font-size: 12px; color: rgb(51, 51, 51); height: 16px;"
-                          value="0"
+                          value="19"
                         />
                         <span
                           style="position: absolute; top: 3px; left: 0px; line-height: 16px; text-transform: uppercase; font-size: 12px; color: rgb(153, 153, 153);"
@@ -1529,10 +1557,10 @@ exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
           </div>
         </details>
         <details
-          class="sc-dnqmqq iGdcAj"
+          class="sc-iwsKbI jrDyKB"
         >
           <summary
-            class="sc-iwsKbI hPLzFK"
+            class="sc-gZMcBi WtlHs"
           >
             Sizes
           </summary>
@@ -1552,7 +1580,7 @@ exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
               class="sc-bdVaJa eQjeEW"
               min="1"
               type="number"
-              value="5"
+              value="4"
             />
           </div>
           <div
@@ -1575,14 +1603,42 @@ exports[`<GeneratorWrapper /> Snapshots should match snapshot 1`] = `
             />
           </div>
         </details>
+        <details
+          class="sc-iwsKbI jrDyKB"
+        >
+          <summary
+            class="sc-gZMcBi WtlHs"
+          >
+            Background Image
+          </summary>
+          <div
+            class="sc-htoDjs eLmeJr"
+          >
+            <div
+              class="dropzone"
+              tabindex="0"
+            >
+              <input
+                autocomplete="off"
+                multiple=""
+                style="display: none;"
+                tabindex="-1"
+                type="file"
+              />
+              <p>
+                Drag 'n' drop some files here, or click to select files
+              </p>
+            </div>
+          </div>
+        </details>
       </div>
       <button
-        class="sc-VigVT clWEVx"
+        class="sc-jTzLTM eFvtnT"
       >
         RANDOMISE
       </button>
       <a
-        class="sc-jTzLTM GVzYn"
+        class="sc-fjdhpX blBloQ"
         download="banner.png"
         href="#"
         id="download-button"

diff --git a/src/components/InputWrapper/ImageInput/ImageInput.js b/src/components/InputWrapper/ImageInput/ImageInput.js
@@ -0,0 +1,44 @@
+import React, {useCallback} from 'react';
+import styled from "styled-components"
+import {useDropzone} from 'react-dropzone';
+
+
+const InputBlock = styled.div`
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border: 2px dashed;
+  border-radius: 20px;
+  width: 480px;
+  font-family: sans-serif;
+  margin: 40px auto;
+  padding: 20px;
+`
+
+const ImageInput = ({ image, setImage }) => {
+	const onDrop = useCallback(acceptedFiles => {
+      const file = acceptedFiles[0]
+    			let reader = new FileReader();
+  				reader.readAsDataURL(file)
+  				reader.onloadend = () => {
+      				setImage(reader.result)
+   				}  				
+    }, [])
+
+	const {acceptedFiles, getRootProps, getInputProps} = useDropzone({onDrop});
+
+	return (
+
+		<>
+		<InputBlock>
+			<div {...getRootProps({className: 'dropzone'})}>
+           		<input {...getInputProps()} />
+            	<p>Drag 'n' drop some files here, or click to select files</p>
+        	</div>
+		</InputBlock>
+		</>
+	)
+}
+
+export default ImageInput
diff --git a/src/components/InputWrapper/ImageInput/index.js b/src/components/InputWrapper/ImageInput/index.js
@@ -0,0 +1 @@
+export { default as ImageInput } from "./ImageInput"
diff --git a/src/components/InputWrapper/InputWrapper.js b/src/components/InputWrapper/InputWrapper.js
@@ -5,6 +5,8 @@ import styled from "styled-components"
 import { ContentInput } from "components/InputWrapper/ContentInput"
 import { ColorInput } from "components/InputWrapper/ColorInput"
 import { SizeInput } from "components/InputWrapper/SizeInput"
+import { ImageInput } from "components/InputWrapper/ImageInput"
+
 
 const Wrapper = styled.div`
   display: flex;
@@ -35,8 +37,8 @@ const Summary = styled.summary`
 `
 
 const InputWrapper = ({ values, setters }) => {
-  const { bgColor, title, titleSize, titleColor, borderColor, borderSize } = values
-  const { setBgColor, setTitle, setTitleSize, setTitleColor, setBorderColor, setBorderSize } = setters
+  const { bgColor, title, titleSize, titleColor, borderColor, borderSize, image } = values
+  const { setBgColor, setTitle, setTitleSize, setTitleColor, setBorderColor, setBorderSize, setImage } = setters
 
   return (
     <Wrapper>
@@ -56,6 +58,10 @@ const InputWrapper = ({ values, setters }) => {
         <Summary>Sizes</Summary>
         <SizeInput titleSize={titleSize} borderSize={borderSize} setTitleSize={setTitleSize} setBorderSize={setBorderSize} />
       </Detail>
+      <Detail>
+        <Summary>Background Image</Summary>
+        <ImageInput image={image} setImage={setImage}/>
+      </Detail>
     </Wrapper>
   )
 }

diff --git a/src/components/InputWrapper/__snapshots__/InputWrapper.spec.js.snap b/src/components/InputWrapper/__snapshots__/InputWrapper.spec.js.snap
@@ -3,14 +3,14 @@
 exports[`<InputWrappr /> Snapshots should match snapshot 1`] = `
 <div>
   <div
-    class="sc-htoDjs kKtqja"
+    class="sc-dnqmqq jBNPgH"
   >
     <details
-      class="sc-dnqmqq iGdcAj"
+      class="sc-iwsKbI jrDyKB"
       open=""
     >
       <summary
-        class="sc-iwsKbI hPLzFK"
+        class="sc-gZMcBi WtlHs"
       >
         Content
       </summary>
@@ -29,10 +29,10 @@ exports[`<InputWrappr /> Snapshots should match snapshot 1`] = `
       </div>
     </details>
     <details
-      class="sc-dnqmqq iGdcAj"
+      class="sc-iwsKbI jrDyKB"
     >
       <summary
-        class="sc-iwsKbI hPLzFK"
+        class="sc-gZMcBi WtlHs"
       >
         Colors
       </summary>
@@ -1512,10 +1512,10 @@ exports[`<InputWrappr /> Snapshots should match snapshot 1`] = `
       </div>
     </details>
     <details
-      class="sc-dnqmqq iGdcAj"
+      class="sc-iwsKbI jrDyKB"
     >
       <summary
-        class="sc-iwsKbI hPLzFK"
+        class="sc-gZMcBi WtlHs"
       >
         Sizes
       </summary>
@@ -1558,6 +1558,34 @@ exports[`<InputWrappr /> Snapshots should match snapshot 1`] = `
         />
       </div>
     </details>
+    <details
+      class="sc-iwsKbI jrDyKB"
+    >
+      <summary
+        class="sc-gZMcBi WtlHs"
+      >
+        Background Image
+      </summary>
+      <div
+        class="sc-htoDjs eLmeJr"
+      >
+        <div
+          class="dropzone"
+          tabindex="0"
+        >
+          <input
+            autocomplete="off"
+            multiple=""
+            style="display: none;"
+            tabindex="-1"
+            type="file"
+          />
+          <p>
+            Drag 'n' drop some files here, or click to select files
+          </p>
+        </div>
+      </div>
+    </details>
   </div>
 </div>
 `;
diff --git a/src/components/Output/Output.js b/src/components/Output/Output.js
@@ -13,6 +13,7 @@ const Wrapper = styled.div`
   border: 1px solid #dbdbdb;
   border: ${(props) => `${props.borderSize}px solid ${props.borderColor}`};
   box-sizing: border-box;
+  background-image: url(${(props) => props.image});
 
   @media (max-width: 1279px) {
     width: auto;
@@ -26,10 +27,10 @@ const Title = styled.h1`
 `
 
 const Output = ({ values }) => {
-  const { bgColor, title, titleSize, titleColor, borderColor, borderSize } = values
+  const { bgColor, title, titleSize, titleColor, borderColor, borderSize, image } = values
 
   return (
-    <Wrapper bgColor={bgColor} titleColor={titleColor} borderColor={borderColor} borderSize={borderSize} id="capture">
+    <Wrapper bgColor={bgColor} titleColor={titleColor} borderColor={borderColor} borderSize={borderSize} image={image} id="capture">
       <Title size={titleSize}>{title}</Title>
     </Wrapper>
   )
@@ -42,7 +43,8 @@ Output.propTypes = {
     titleSize: PropTypes.string,
     titleColor: PropTypes.string,
     borderColor: PropTypes.string,
-    hasBorder: PropTypes.bool
+    hasBorder: PropTypes.bool,
+    image: PropTypes.string
   }).isRequired
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as ImageInput } from "./ImageInput"