completed thumbnail upload and apply

Author: velopert

velog-backend/src/database/models/UserThumbnail.js

@@ -0,0 +1,22 @@
+// @flow
+import Sequelize from 'sequelize';
+import db from 'database/db';
+import { primaryUUID } from 'lib/common';
+import { User } from 'database/models';
+
+const UserThumbnail = db.define('user_thumbnail', {
+  id: primaryUUID,
+  fk_user_id: Sequelize.UUID,
+  path: Sequelize.STRING,
+  filesize: Sequelize.INTEGER,
+});
+
+UserThumbnail.associate = () => {
+  UserThumbnail.belongsTo(User, {
+    foreignKey: 'fk_user_id',
+    onDelete: 'CASCADE',
+    onUpdate: 'restrict',
+  });
+};
+
+export default UserThumbnail;

velog-backend/src/database/models/index.js

@@ -17,3 +17,4 @@ export { default as PostImage } from './PostImage';
 export { default as Feed } from './Feed';
 export { default as PostScore } from './PostScore';
 export { default as PostRead } from './PostRead';
+export { default as UserThumbnail } from './UserThumbnail';

velog-backend/src/database/sync.js

@@ -18,6 +18,7 @@ import {
   Feed,
   PostScore,
   PostRead,
+  UserThumbnail,
 } from './models';
 import * as views from './views';
 
@@ -39,6 +40,7 @@ export function associate() {
   Feed.associate();
   PostScore.associate();
   PostRead.associate();
+  UserThumbnail.associate();
 }
 export default function sync() {
   associate();

velog-backend/src/router/auth/auth.ctrl.js

@@ -270,30 +270,45 @@ export const createLocalAccount = async (ctx: Context): Promise<*> => {
   }
 };
 
+// TODO: query optimization needed
 export const check = async (ctx: Context): Promise<*> => {
   if (!ctx.user) {
     ctx.status = 401;
     return;
   }
 
-  const now = new Date();
-  if (ctx.tokenExpire - now < 1000 * 60 * 60 * 24 * 4) {
-    try {
-      const user = await User.findById(ctx.user.id);
-      const token = await user.generateToken();
-      // $FlowFixMe: intersection bug
-      ctx.cookies.set('access_token', token, {
-        httpOnly: true,
-        maxAge: 1000 * 60 * 60 * 24 * 7,
-      });
-    } catch (e) {
-      ctx.throw(500, e);
+  try {
+    const now = new Date();
+    const user = await User.findById(ctx.user.id);
+    if (!user) {
+      ctx.status = 401;
+      return;
     }
+    const profile = await user.getProfile();
+    const data = {
+      id: user.id,
+      displayName: profile.display_name,
+      thumbnail: profile.thumbnail,
+      username: user.username,
+    };
+    if (ctx.tokenExpire - now < 1000 * 60 * 60 * 24 * 4) {
+      try {
+        const token = await user.generateToken();
+        // $FlowFixMe: intersection bug
+        ctx.cookies.set('access_token', token, {
+          httpOnly: true,
+          maxAge: 1000 * 60 * 60 * 24 * 7,
+        });
+      } catch (e) {
+        ctx.throw(500, e);
+      }
+    }
+    ctx.body = {
+      user: data,
+    };
+  } catch (e) {
+    console.log(e);
   }
-
-  ctx.body = {
-    user: ctx.user,
-  };
 };
 
 export const logout = (ctx: Context) => {

velog-backend/src/router/files/files.ctrl.js

@@ -8,10 +8,11 @@ import PostImage from 'database/models/PostImage';
 import { isUUID } from 'lib/common';
 import downloadImage from 'lib/downloadImage';
 import mimeTypes from 'mime-types';
+import UserThumbnail from 'database/models/UserThumbnail';
 
 const s3 = new AWS.S3({ region: 'ap-northeast-2', signatureVersion: 'v4' });
 
-export const createSignedUrl: Middleware = async (ctx: Context) => {
+export const createPostImageSignedUrl: Middleware = async (ctx: Context) => {
   const { post_id, filename } = (ctx.request.body: any);
   if (!post_id) {
     ctx.status = 400;
@@ -57,7 +58,9 @@ export const createSignedUrl: Middleware = async (ctx: Context) => {
       fk_post_id: post_id,
       fk_user_id: ctx.user.id,
     });
-    const imagePath = `post-images/${ctx.user.username}/${postImage.id}/${filename}`;
+    const imagePath = `post-images/${ctx.user.username}/${
+      postImage.id
+    }/${filename}`;
     postImage.path = imagePath;
     await postImage.save();
     const url = await s3.getSignedUrl('putObject', {
@@ -96,6 +99,33 @@ export const retrieveSize: Middleware = async (ctx: Context) => {
   // return result
 };
 
+export const createThumbnailSignedUrl: Middleware = async (ctx) => {
+  const { id: userId, username } = ctx.user;
+  const { filename } = (ctx.request.body: any);
+
+  try {
+    const contentType = mimeTypes.contentType(filename);
+    const userThumbnail = UserThumbnail.build({
+      fk_user_id: userId,
+    });
+    const imagePath = `thumbnails/${username}/${userThumbnail.id}-${filename}`;
+    userThumbnail.path = imagePath;
+    await userThumbnail.save();
+    const url = await s3.getSignedUrl('putObject', {
+      Bucket: 's3.images.velog.io',
+      Key: imagePath,
+      ContentType: contentType,
+    });
+    ctx.body = {
+      url,
+      image_path: imagePath,
+      id: userThumbnail.id,
+    };
+  } catch (e) {
+    ctx.throw(500, e);
+  }
+};
+
 export const upload: Middleware = async (ctx: Context) => {
   const { files, fields } = (ctx.request.body: any);
   // check whether every parameter exists
@@ -169,7 +199,9 @@ export const upload: Middleware = async (ctx: Context) => {
       fk_user_id: ctx.user.id,
       filesize: stats.size,
     });
-    const imagePath = `post-images/${ctx.user.username}/${postImage.id}/${image.name}`;
+    const imagePath = `post-images/${ctx.user.username}/${postImage.id}/${
+      image.name
+    }`;
     console.log(imagePath);
     postImage.path = imagePath;
     const read = fs.createReadStream(image.path);

velog-backend/src/router/files/index.js

@@ -6,7 +6,16 @@ import * as filesCtrl from './files.ctrl';
 
 const files: Router = new Router();
 
-files.post('/create-url', filesCtrl.createSignedUrl);
+files.post(
+  '/create-url/post-image',
+  needsAuth,
+  filesCtrl.createPostImageSignedUrl,
+);
+files.post(
+  '/create-url/thumbnail',
+  needsAuth,
+  filesCtrl.createThumbnailSignedUrl,
+);
 files.post('/upload', needsAuth, filesCtrl.upload);
 files.post('/retrieve-size/:id', checkUUID, filesCtrl.retrieveSize);
 

velog-backend/src/router/me/me.ctrl.js

@@ -12,6 +12,7 @@ export const updateProfile = async (ctx: Context): Promise<*> => {
       .min(1)
       .max(40),
     short_bio: Joi.string().max(140),
+    thumbnail: Joi.string(),
   });
 
   if (!validateSchema(ctx, schema)) {
@@ -21,6 +22,7 @@ export const updateProfile = async (ctx: Context): Promise<*> => {
   type BodySchema = {
     display_name?: string,
     short_bio?: string,
+    thumbnail?: string,
   };
 
   const body: BodySchema = (ctx.request.body: any);
@@ -36,7 +38,7 @@ export const updateProfile = async (ctx: Context): Promise<*> => {
       ctx.throw(500, 'Invalid Profile');
     }
 
-    ['display_name', 'short_bio'].forEach((key) => {
+    ['display_name', 'short_bio', 'thumbnail'].forEach((key) => {
       if (body[key]) {
         profile[key] = body[key];
       }

velog-frontend/src/components/settings/SettingProfile/SettingProfile.js

@@ -10,6 +10,7 @@ import './SettingProfile.scss';
 type Props = {
   profile: Profile,
   onUpdateProfile: ({ displayName: string, shortBio: string }) => any,
+  onUploadThumbnail: () => any,
 };
 
 type State = {
@@ -70,13 +71,13 @@ class SettingProfile extends Component<Props, State> {
     }
   };
   render() {
-    const { profile } = this.props;
+    const { profile, onUploadThumbnail } = this.props;
     const { editing, displayName, shortBio } = this.state;
     return (
       <div className="SettingProfile">
         <div className="thumbnail-area">
           <img src={profile.thumbnail || defaultThumbnail} alt="thumbnail" />
-          <Button large fullWidth>
+          <Button large fullWidth onClick={onUploadThumbnail}>
             썸네일 변경
           </Button>
         </div>

velog-frontend/src/containers/settings/SettingProfileContainer.js

@@ -4,12 +4,16 @@ import type { State } from 'store';
 import { connect } from 'react-redux';
 import SettingProfile from 'components/settings/SettingProfile/SettingProfile';
 import { type UserData } from 'store/modules/user';
-import { SettingsActions } from 'store/actionCreators';
+import { SettingsActions, UserActions } from 'store/actionCreators';
 import { type Profile } from 'store/modules/profile';
+import { type UploadInfo } from 'store/modules/settings';
+import axios from 'axios';
+import storage, { keys } from 'lib/storage';
 
 type Props = {
   user: ?UserData,
   profile: ?Profile,
+  uploadInfo: ?UploadInfo,
 };
 
 class SettingProfileContainer extends Component<Props> {
@@ -29,21 +33,65 @@ class SettingProfileContainer extends Component<Props> {
     }
   }
 
+  uploadFile = async (file: any) => {
+    try {
+      await SettingsActions.createThumbnailSignedUrl(file.name);
+      if (!this.props.uploadInfo) return;
+      const { url, image_path: imagePath } = this.props.uploadInfo;
+      await axios.put(url, file, {
+        headers: {
+          'Content-Type': file.type,
+        },
+        withCredentials: false,
+        onUploadProgress: (e) => {
+          if (window.nanobar) {
+            window.nanobar.go(e.loaded / e.total * 100);
+          }
+        },
+      });
+      const imageUrl = `https://images.velog.io/${imagePath}`;
+      await SettingsActions.updateProfile({
+        thumbnail: imageUrl,
+      });
+      await UserActions.checkUser();
+      storage.set(keys.user, this.props.user);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+  onUploadThumbnail = () => {
+    const upload = document.createElement('input');
+    upload.type = 'file';
+    upload.onchange = (e) => {
+      if (!upload.files) return;
+      const file = upload.files[0];
+      this.uploadFile(file);
+    };
+    upload.click();
+  };
+
   onUpdateProfile = ({ displayName, shortBio }: { displayName: string, shortBio: string }) => {
     return SettingsActions.updateProfile({ displayName, shortBio });
   };
 
   render() {
     const { profile } = this.props;
     if (!profile) return null;
-    return <SettingProfile profile={profile} onUpdateProfile={this.onUpdateProfile} />;
+    return (
+      <SettingProfile
+        profile={profile}
+        onUpdateProfile={this.onUpdateProfile}
+        onUploadThumbnail={this.onUploadThumbnail}
+      />
+    );
   }
 }
 
 export default connect(
   ({ user, settings }: State) => ({
     user: user.user,
     profile: settings.profile,
+    uploadInfo: settings.uploadInfo,
   }),
   () => ({}),
 )(SettingProfileContainer);

velog-frontend/src/containers/write/CodeEditorContainer.js

@@ -98,7 +98,7 @@ class CodeEditorContainer extends Component<Props> {
     try {
       WriteActions.setUploadStatus(true);
       if (!this.props.uploadUrl) return;
-      const response = await axios.put(this.props.uploadUrl, file, {
+      await axios.put(this.props.uploadUrl, file, {
         headers: {
           'Content-Type': file.type,
         },
@@ -109,7 +109,6 @@ class CodeEditorContainer extends Component<Props> {
           }
         },
       });
-      console.log(this.props.imagePath);
       if (!this.props.imagePath) return;
       const imageUrl = `${'\n'}![${file.name}](https://images.velog.io/${
         this.props.imagePath