Skip to content

Commit

Permalink
Merge pull request #51 from yanghun0070/feature/imageupload
Browse files Browse the repository at this point in the history
Implement MinIO object storage Docker integration
  • Loading branch information
yanghun0070 authored Mar 7, 2021
2 parents 1b80f51 + 0c7fea8 commit da80655
Show file tree
Hide file tree
Showing 27 changed files with 535 additions and 107 deletions.
8 changes: 4 additions & 4 deletions dayco-app/src/actions/posts.js
Original file line number Diff line number Diff line change
Expand Up @@ -147,9 +147,9 @@ export function dispatchDeletePostsFail() {
}
}

export function createPosts(title, content) {
export function createPosts(title, content, fileBase64, fileName) {
return dispatch => {
return API.createPosts(title, content)
return API.createPosts(title, content, fileBase64, fileName)
.then(async(response) => {
dispatch(Alert.createAlert({
variant : 'success',
Expand All @@ -167,9 +167,9 @@ export function createPosts(title, content) {
}
}

export function editPosts(id, title, content, author) {
export function editPosts(id, title, content, author, fileBase64, fileName) {
return dispatch => {
return API.editPosts(id, title, content, author)
return API.editPosts(id, title, content, author, fileBase64, fileName)
.then(async(response) => {
dispatch(editPostsSuccess(response.data));
dispatch(Alert.createAlert({
Expand Down
2 changes: 1 addition & 1 deletion dayco-app/src/actions/profile.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export function changeProfile(email, pw, fileBase64, fileName) {
.then(async(response) => {
dispatch(Alert.createAlert({
variant : 'success',
message : ' 프로필 수정 성공하였습니다.'
message : '프로필 수정 되셨습니다.'
}));
}).catch(function (error) {
dispatch(Alert.createAlert({
Expand Down
3 changes: 1 addition & 2 deletions dayco-app/src/components/common/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,7 @@ class Header extends Component {
<Navbar.Brand href="#" onClick={this.onLogout}>
{this.props.user.currentUser.picture ? (
<Image
// src={require(this.props.user.currentUser.picture)}
style={{ backgroundImage: `url(${this.props.user.currentUser.picture})`}}
src={this.props.user.currentUser.picture}
alt={this.props.user.currentUser.name}
width={26} height={26}
roundedCircle
Expand Down
78 changes: 71 additions & 7 deletions dayco-app/src/components/posts/PostEditModal.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React, { Component } from 'react';
import { Form, Button, Modal } from 'react-bootstrap';
import { Form, Button, Modal, Card } from 'react-bootstrap';
import { connect } from 'react-redux';
import { withRouter } from "react-router";
import { createPosts, editPosts, deletePosts,
hidePostsEditModal } from '../../actions/posts';
import question from '../img/the-question-mark.png';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faSmileBeam, faSms } from '@fortawesome/free-solid-svg-icons'
import { POSTS_CREATED, POSTS_DELETED, POSTS_EDITED,
Expand All @@ -17,12 +18,17 @@ class PostsEditModal extends Component {
this.state = {
requestId: -1,
requestTitle: '',
requestContent: ''
requestContent: '',
requestFileBase64: '',
requestFileName: ''
}
this.imageUploader = React.createRef()
this.uploadedImage = React.createRef()

this.requestTitleChange = this.requestTitleChange.bind(this);
this.requestContentChange = this.requestContentChange.bind(this);
}

hideModal() {
this.props.hidePostsEditModal();
}
Expand All @@ -35,16 +41,45 @@ class PostsEditModal extends Component {
this.setState({requestContent: event.target.value});
}

handleImageUpload = e => {
const [file] = e.target.files;
if (file) {
const originalFileName = file.name
const reader = new FileReader();
const { current } = this.uploadedImage;
current.file = file;
reader.onload = e => {
current.src = e.target.result;
const dataIndex = current.src.indexOf(',') + 1
const fileBase64 = current.src.substring(
dataIndex,
current.src.length)
this.setState({
requestFileBase64: fileBase64,
requestFileName: originalFileName
})
};
reader.readAsDataURL(file);
}
};

createPosts = () => {
if(this.props.isSocket === true) {
this.sendMessage("/app/posts",
JSON.stringify({
status: POSTS_CREATED,
title: this.state.requestTitle,
content: this.state.requestContent}));
content: this.state.requestContent,
fileBase64 :this.state.requestFileBase64,
fileName : this.state.requestFileName
}));
this.props.hidePostsEditModal();
} else {
this.props.createPosts(this.state.requestTitle, this.state.requestContent);
this.props.createPosts(this.state.requestTitle,
this.state.requestContent,
this.state.requestFileBase64,
this.state.requestFileName
);
}
}

Expand All @@ -54,13 +89,19 @@ class PostsEditModal extends Component {
status: POSTS_EDITED,
id: this.props.id,
title: this.state.requestTitle,
content: this.state.requestContent}));
content: this.state.requestContent,
fileBase64 :this.state.requestFileBase64,
fileName : this.state.requestFileName
}));
this.props.hidePostsEditModal();
} else {
this.props.editPosts(this.props.id,
this.state.requestTitle,
this.state.requestContent,
this.props.author)
this.props.author,
this.state.requestFileBase64,
this.state.requestFileName
)
}
}

Expand Down Expand Up @@ -106,6 +147,29 @@ class PostsEditModal extends Component {
{
(this.props.status !== POSTS_DELETE_MODAL) ?
<Modal.Body>
<Form.Group controlId="formImage">
<Form.Control
type="file"
accept="image/*"
onChange={this.handleImageUpload}
ref={this.imageUploader}
style={{display: "none"}}/>
<div
style={{
border: "1px dashed black"}}
onClick={() => this.imageUploader.current.click()}>
<Card.Img
variant="top"
ref={this.uploadedImage}
style={{
width: "100%",
height: "100%",
position: "acsolute"
}}
src={question}/>
</div>
이미지를 Upload 하세요.
</Form.Group>
<Form.Control type="text"
name="requestTitle" id="requestTitle"
onChange={this.requestTitleChange}
Expand Down
2 changes: 1 addition & 1 deletion dayco-app/src/components/posts/PostsList.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ class PostsList extends Component {
key={posts.id}
id={posts.id}
title={posts.title}
thumbnail={question}
thumbnail={(posts.fileSavedUrl) ? posts.fileSavedUrl: question}
author={posts.author}
content={posts.content}
modifiedDate={posts.modifiedDate}
Expand Down
21 changes: 13 additions & 8 deletions dayco-app/src/services/http.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,13 @@ export function getCurrentUser() {
});
}

export function createPosts(title, content) {
export function createPosts(title, content, fileBase64, fileName) {
const token = Cookies.get("token") ? Cookies.get("token") : null;
return axios.post(API_BASE_URL + "/posts", {
title: title,
content: content
content: content,
fileBase64: fileBase64,
fileName: fileName,
}, {
headers: {
'Content-type': 'application/json',
Expand All @@ -47,12 +49,14 @@ export function createPosts(title, content) {
});
}

export function editPosts(id, title, content, author) {
export function editPosts(id, title, content, author, fileBase64, fileName) {
const token = Cookies.get("token") ? Cookies.get("token") : null;
return axios.put(API_BASE_URL + "/posts/" + id, {
title: title,
content: content,
author: author
author: author,
fileBase64: fileBase64,
fileName: fileName
}, {
headers: {
'Content-type': 'application/json',
Expand Down Expand Up @@ -175,11 +179,12 @@ export function deletePostsComment(commentId) {
//Profile 변경한다.
export function changeProfile(email, pw, fileBase64, fileName) {
const token = Cookies.get("token") ? Cookies.get("token") : null;

return axios.post(API_BASE_URL + "/profile/change", {
email: email,
password: pw,
fileBase64: fileBase64,
fileName: fileName
email: (email) ? email: null,
password: (pw) ? pw : null,
fileBase64: (fileBase64) ? fileBase64 : null,
fileName: (fileName) ? fileName : null
}, {
headers: {
'Content-type': 'application/json',
Expand Down
1 change: 1 addition & 0 deletions dayco-uaa/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ dependencies {
compile group: 'org.springframework.boot', name: 'spring-boot-starter-hateoas', version: '1.2.2.RELEASE'
compile group: 'org.springframework.boot', name: 'spring-boot-starter-oauth2-client', version: '2.2.6.RELEASE'
compile group: 'org.springframework.boot', name: 'spring-boot-starter-thymeleaf', version: '2.2.6.RELEASE'
compile group: 'io.minio', name: 'minio', version: '8.0.3'

implementation 'org.springframework.boot:spring-boot-starter'
implementation 'org.springframework.boot:spring-boot-starter-web'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ public UaaUserDetailService(UserJpaRepository userJpaRepository) {
@Override
public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
User user = this.userJpaRepository.findByUserId(username).orElseThrow(
() -> new UsernameNotFoundException("Username: " + username + " not found"));
() -> new UsernameNotFoundException("Username: " + username + " not found"));
org.springframework.security.core.userdetails.User.withUsername(user.getUserId())
.password(user.getPassword())
.roles(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
import org.springframework.hateoas.Link;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.security.core.userdetails.UsernameNotFoundException;
import org.springframework.stereotype.Controller;
import org.springframework.web.HttpRequestMethodNotSupportedException;
import org.springframework.web.bind.MethodArgumentNotValidException;
Expand Down Expand Up @@ -152,6 +153,15 @@ public Object invalidJwtAuthenticationExceptionHandler(InvalidJwtAuthenticationE
return responseErrorMessage(request, message);
}

@ExceptionHandler(UsernameNotFoundException.class)
public Object typeMismatchExceptionHandler(UsernameNotFoundException exception, HttpServletRequest request,
Locale locale) {
GlobalMessage message = new GlobalMessage();
message.setStatus(HttpStatus.BAD_REQUEST.value());
message.setMessage(messageSourceAccessor.getMessage(String.valueOf(HttpStatus.BAD_REQUEST.value())));
return responseErrorMessage(request, message);
}

@RequestMapping(value = "/errors/{errorCode}")
public Object errorHandler(HttpServletRequest request,
@PathVariable int errorCode,
Expand Down
Loading

0 comments on commit da80655

Please sign in to comment.