yapp-project#26 파일(이미지) 업로드 및 데이터베이스 업로드

See: Github issue yapp-project#26 --------------------------------------- ### 작업파일 * enrolment 내부 이미지 처리 부분 --------------------------------------- ### 작업내용 * react-dropzone 연동 --------------------------------------- ### Issue * 업로드 된 이미지 모두 삭제하고 다시 업로드 할 시 렌더 오류발생
Sung-jin · May 4, 2019 · 6b0a3b0 · 6b0a3b0
1 parent 2482d94
commit 6b0a3b0
Show file tree

Hide file tree

Showing 3 changed files with 165 additions and 46 deletions.
diff --git a/src/containers/Enrolment/Enrolment.jsx b/src/containers/Enrolment/Enrolment.jsx
@@ -39,7 +39,8 @@ class Enrolment extends Component {
         "totalVolume": 0
       },
       "stuffID": 0,
-      "color_idx": ""
+      "color_idx": "",
+      "images": []
     };
 
     this.onChangeStepStatus = this.onChangeStepStatus.bind(this);
@@ -141,7 +142,11 @@ class Enrolment extends Component {
           contents={this.contents[2]}
         />});
         this.setState({ middle: ""});
-        this.setState({ step: <Step3/> });
+        this.setState({ 
+          step: <Step3
+            saveImage={this.onSaveImages}
+          /> 
+        });
         break;
       default:
         break;
@@ -327,10 +332,13 @@ class Enrolment extends Component {
       enrolmentData.stuff[colorNumber].color = "#" + ((1 << 24) + (parseInt(rgb[0]) << 16) + (parseInt(rgb[1]) << 8) + parseInt(rgb[2])).toString(16).slice(1);
 
       this.setState(enrolmentData);
-      console.log(this.state);
     }
   };
 
+  onSaveImages = images => {
+    this.setState({images: images});
+  }
+
   onSaveRecipe = () => {
     let doneView = document.querySelector("#done-container");
     let cup = this.state.enrolmentData.info.name;

diff --git a/src/containers/Enrolment/Function/Enrolment.scss b/src/containers/Enrolment/Function/Enrolment.scss
@@ -485,38 +485,16 @@
         height: 100%;
         box-sizing: border-box;
 
-        .thums-image {
-        display: block;
-        width: 100%;
-        height: 80%;
-        border: 1px solid #707070;
-        box-sizing: border-box;
-      }
-
-      .other-image {
-        height: 15%;
-        padding-top: 5%;
-
-        .images-item {
-          display: inline-block;
-          position: relative;
-          width: 11.625%;
-          padding-bottom: 11.625%;
-          margin-right: 1%;
-          border: 1px solid #707070;
-          box-sizing: border-box;
-        }
-
-        .images-item:last-child {
-          margin-right: 0;
+        .delete-thumb {
+            display: block;
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            right: 0;
+            top: 0;
+            background-color: #fff;
+            z-index: 9999;
         }
-      }
-
-      .other-image::after {
-        display: block;
-        content: '';
-        clear: both;
-      }
     }
 }
 

diff --git a/src/containers/Enrolment/Function/Step3.jsx b/src/containers/Enrolment/Function/Step3.jsx
@@ -1,25 +1,158 @@
-import React from "react";
+import React, {useEffect, useState} from 'react';
+import {useDropzone} from 'react-dropzone';
 import classNames from "classnames/bind";
 import styles from "./Enrolment.scss";
 
 const cx = classNames.bind(styles);
 
+const insertNthumbs = {
+  display: 'block',
+  width: '100%',
+  height: '80%',
+  border: '1px solid #707070',
+  boxSizing: 'border-box'
+}
+
+const textStyle = {
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  justifyContent: 'center',
+  alignItems: 'center',
+  margin: '0'
+};
+
+const thumbsContainer = {
+  display: 'flex',
+  marginTop: 16,
+  overflowX: 'auto' 
+};
+
+const thumb = {
+  display: 'inline-flex',
+  borderRadius: 2,
+  border: '1px solid #eaeaea',
+  marginBottom: 8,
+  marginRight: 8,
+  width: 100,
+  height: 100,
+  padding: 4,
+  boxSizing: 'border-box'
+};
+
+const fullThumb = {
+  width: '100%',
+  height: '100%'
+}
+
+const thumbInner = {
+  display: 'flex',
+  position: 'relative',
+  minWidth: 0,
+  overflow: 'hidden'
+};
+
+const img = {
+  display: 'block',
+  width: 'auto',
+  height: '100%'
+};
+
+const addImgae = {
+  display: 'block',
+  width: '90px',
+  height: '100%',
+}
+
 const EnrolmentStep3 = (props) => {
+  const [files, setFiles] = useState([]);
+  let fileIndex = [];
+  const selectThumb = (file) => {
+    document.querySelector("#imgThumb").src = file.preview;
+  }
+
+  const deleteThumb = (thisFile, fileIdx) => {
+    let thumb = document.querySelector("#imgThumb").src;
+    let fileIndex = files.findIndex(file => file.name === thisFile.name);
+
+    if (fileIdx.length === 1) {
+      fileIdx.pop();
+      // document.querySelector("#insertContainer").style.visibility = 'visible';
+      // document.querySelector("#thumbContainer").style.visibility = 'hidden';
+    } else if (thumb === files[fileIndex].preview) {
+      fileIdx.splice(fileIndex, 1);
+      document.querySelector("#imgThumb").src = files[0].preview;
+    } else fileIdx.splice(fileIndex, 1);
+
+    props.saveImage(files, fileIndex);
+
+    document.querySelector(`#${thisFile.idx}`).style.display = 'none';
+  }
+
+  const {getRootProps, getInputProps} = useDropzone({
+    accept: 'image/*',
+    onDrop: acceptedFiles => {
+      setFiles(acceptedFiles.map((file, idx) => {
+        fileIndex.push(idx);
+        return Object.assign(file, {
+        preview: URL.createObjectURL(file),
+        idx: `image${idx}`
+      })
+    }));
+      // document.querySelector("#imgThumb").src = acceptedFiles[0].preview;
+      // document.querySelector("#insertContainer").style.visibility = 'hidden';
+      // document.querySelector("#thumbContainer").style.visibility = 'visible';
+
+      props.saveImage(acceptedFiles, fileIndex);
+    }
+  });
+
+  const images = files.map(file => (
+    <div id={file.idx} style={Object.assign({}, thumb, file.display ? "display : block" : "display : none")} key={file.name}>
+      <div style={thumbInner}>
+        <span className={cx("delete-thumb")} onClick={deleteThumb.bind(this, file, fileIndex)}></span>
+        <img
+          onClick={selectThumb.bind(this, file)}
+          alt="cockatil"
+          src={file.preview}
+          style={img}
+        />
+      </div>
+    </div>
+  ));
+
+  useEffect(() => () => {
+    // Make sure to revoke the data uris to avoid memory leaks
+    files.forEach(file => URL.revokeObjectURL(file.preview));
+  }, [files]);
+
   return (
     <div className={cx("step", "step3")}>
         <div className={cx("step3-container")}>
-            <span className={cx("thums-image")}></span>
-
-            <div className={cx("other-image")}>
-                <span className={cx("images-item")}></span>
-                <span className={cx("images-item")}></span>
-                <span className={cx("images-item")}></span>
-                <span className={cx("images-item")}></span>
-                <span className={cx("images-item")}></span>
-                <span className={cx("images-item")}></span>
-                <span className={cx("images-item")}></span>
-                <span className={cx("images-item")}></span>
+          <div id="insertContainer" style={insertNthumbs} {...getRootProps({className: 'dropzone'})}>
+            <input {...getInputProps()} />
+            <p style={textStyle}>Drag 'n' drop some photo here, or click to select files</p>
+
+            <div id="thumbContainer" style={Object.assign({}, insertNthumbs, {visibility: 'hidden', position: 'absolute', top: 0, left: 0})}>
+              <div style={Object.assign({}, thumb, fullThumb)}>
+                <div style={thumbInner}>
+                  <img id="imgThumb" alt="Thumb"/>
+                </div>
+              </div>
             </div>
+          </div>
+
+          <aside style={thumbsContainer}>
+            <div style={thumb}>
+              <div style={thumbInner}>
+                <span
+                  style={addImgae}
+                />
+              </div>
+            </div>
+
+            {files && files.length ? images : ""}
+          </aside>
         </div>
     </div>
   );