Front-end add save image button

@@ -9,12 +9,12 @@ import {
   FormGroup,
   FormGroup,
   Label,
   Label,
 } from 'reactstrap';
 } from 'reactstrap';
-import s from './Subject.module.scss';
 
 
 class Subject extends PureComponent {
 class Subject extends PureComponent {
   constructor(props) {
   constructor(props) {
     super(props);
     super(props);
     this.onChangeInputImage = this.onChangeInputImage.bind(this);
     this.onChangeInputImage = this.onChangeInputImage.bind(this);
+    this.onClickSaveImage = this.onClickSaveImage.bind(this);
     this.state = {
     this.state = {
       defaultSelectVal: 'Andromeda',
       defaultSelectVal: 'Andromeda',
       imageFiles: [],
       imageFiles: [],
@@ -35,32 +35,30 @@ class Subject extends PureComponent {
     reader.readAsDataURL(e.target.files[0]);
     reader.readAsDataURL(e.target.files[0]);
   }
   }
 
 
-  async componentDidUpdate() {
-    const isReceivingData = true;
+  onClickSaveImage(e) {
+    e.preventDefault();
+    console.log(this.state.imageFiles);
+    console.log("save image");
+    this.setState({
+      imageFiles:[],
+    });
   }
   }
 
 
   render() {
   render() {
-    const isReceivingData = true;
-    const display = isReceivingData ? 'none' : 'block';
-    const style = {
-      height: '1200px',
-      display: display
-    };
-    console.log(this.state.imageFiles)
     return (
     return (
-      <div className={s.root}>
+      <div>
         <h1 className="page-title mb-xlg mt-lg">Photo <small>Upload</small></h1>
         <h1 className="page-title mb-xlg mt-lg">Photo <small>Upload</small></h1>
         <Row>
         <Row>
         <Col lg="6" md={12}>
         <Col lg="6" md={12}>
             <Widget
             <Widget
             >
             >
               <Form>
               <Form>
-                <blockquote className="blockquote blockquote-reverse">
+                <blockquote className="blockquote blockquote">
                   <p>침입자로 분류하지 않을 방문자의 사진을 업로드 하세요.</p>
                   <p>침입자로 분류하지 않을 방문자의 사진을 업로드 하세요.</p>
                 </blockquote>
                 </blockquote>
 
 
                 <FormGroup row>
                 <FormGroup row>
-                  <Label md="2" className="text-md-right">
+                  <Label md="3" className="text-md-right">
                     Image upload
                     Image upload
                   </Label>
                   </Label>
                   <Col md="8">
                   <Col md="8">
@@ -81,12 +79,8 @@ class Subject extends PureComponent {
                       </div>
                       </div>
                     </div>
                     </div>
                     <div>
                     <div>
-                      <Button type="button" color="default"><Label>Select image</Label></Button>
+                      <Button type="button" color="default" onClick={this.onClickSaveImage}>Select image</Button>
                     </div>
                     </div>
-              {/* <div>
-                      <Button type="button" color="default"><Label for="fileupload2">Select
-                        image</Label></Button>
-                    </div> */}
                   </Col>
                   </Col>
                 </FormGroup>
                 </FormGroup>
               </Form>
               </Form>

 @import '../../styles/app';
 @import '../../styles/app';
 
 
-:global {
-//   @import '../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg';
-//   @import '../../../../node_modules/react-select2-wrapper/css/select2';
-//   @import '../../../../node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox';
-//   @import '../../../../node_modules/react-datetime/css/react-datetime';
-//   @import '../../../../node_modules/rc-color-picker/dist/rc-color-picker';
-//   @import '../../../../node_modules/bootstrap-slider/dist/css/bootstrap-slider';
-//   @import '../../../../node_modules/jasny-bootstrap/dist/css/jasny-bootstrap';
-//   @import '../../../../node_modules/react-mde/lib/styles/scss/react-mde-all';
-}
-
-.autogrow {
-  overflow: hidden;
-  resize: none;
-}
-
-.wysiwygWrapper {
-  border: 1px solid #ccc !important;
-  overflow: visible;
-  height: 270px;
-}
-
-.wysiwygToolbar {
-  color: $gray-800 !important;
-  background-color: #ddd !important;
-  border-color: transparent !important;
-
-  :global {
-    .rdw-option-wrapper {
-      font-family: 'Open Sans', sans-serif;
-      font-size: 14px;
-      height: 30px;
-      min-width: 30px;
-      margin: 0;
-      background: #f8f8f8;
-    }
-
-    .rdw-dropdown-wrapper {
-      background: #f8f8f8;
-    }
-  }
-}
-
-.wysiwygEditor {
-  position: relative !important;
-  overflow: hidden !important;
-  height: 150px;
-  line-height: 0.1;
-}
-
-.select2 {
-  :global {
-    .select2-container {
-      width: 100% !important;
-    }
-
-    .select2-selection--single {
-      border-color: $input-border-color;
-
-      &,
-      & :global .select2-selection__arrow {
-        height: $input-height;
-      }
-
-      & :global .select2-selection__rendered {
-        line-height: $input-height;
-      }
-    }
-  }
-}
+// .autogrow {
+//   overflow: hidden;
+//   resize: none;
+// }
 
 
 .root {
 .root {
   :global {
   :global {
@@ -77,14 +11,6 @@
      * Switchery.
      * Switchery.
      */
      */
 
 
-    .abc-checkbox,
-    .abc-radio {
-      .form-check-input {
-        position: relative;
-        margin: 0;
-      }
-    }
-
     .display-inline-block {
     .display-inline-block {
       display: inline-block;
       display: inline-block;
     }
     }