박선진

Front-end add save image button

......@@ -9,12 +9,12 @@ import {
FormGroup,
Label,
} from 'reactstrap';
import s from './Subject.module.scss';
class Subject extends PureComponent {
constructor(props) {
super(props);
this.onChangeInputImage = this.onChangeInputImage.bind(this);
this.onClickSaveImage = this.onClickSaveImage.bind(this);
this.state = {
defaultSelectVal: 'Andromeda',
imageFiles: [],
......@@ -35,32 +35,30 @@ class Subject extends PureComponent {
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() {
const isReceivingData = true;
const display = isReceivingData ? 'none' : 'block';
const style = {
height: '1200px',
display: display
};
console.log(this.state.imageFiles)
return (
<div className={s.root}>
<div>
<h1 className="page-title mb-xlg mt-lg">Photo <small>Upload</small></h1>
<Row>
<Col lg="6" md={12}>
<Widget
>
<Form>
<blockquote className="blockquote blockquote-reverse">
<blockquote className="blockquote blockquote">
<p>침입자로 분류하지 않을 방문자의 사진을 업로드 하세요.</p>
</blockquote>
<FormGroup row>
<Label md="2" className="text-md-right">
<Label md="3" className="text-md-right">
Image upload
</Label>
<Col md="8">
......@@ -81,12 +79,8 @@ class Subject extends PureComponent {
</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>
<Button type="button" color="default"><Label for="fileupload2">Select
image</Label></Button>
</div> */}
</Col>
</FormGroup>
</Form>
......
@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 {
:global {
......@@ -77,14 +11,6 @@
* Switchery.
*/
.abc-checkbox,
.abc-radio {
.form-check-input {
position: relative;
margin: 0;
}
}
.display-inline-block {
display: inline-block;
}
......