Add avatar functionality for user profile

deepwell/src/endpoints/file.rs

@@ -23,9 +23,9 @@ use crate::models::file::Model as FileModel;
 use crate::models::file_revision::Model as FileRevisionModel;
 use crate::services::blob::BlobService;
 use crate::services::file::{
-    DeleteFile, DeleteFileOutput, EditFile, EditFileOutput, GetFileDetails,
-    GetFileOutput, MoveFile, MoveFileOutput, RestoreFile, RestoreFileOutput, UploadFile,
-    UploadFileOutput,
+    DeleteFile, DeleteFileOutput, EditFile, EditFileOutput, GetBlobOutput,
+    GetFileDetails, GetFileOutput, MoveFile, MoveFileOutput, RestoreFile,
+    RestoreFileOutput, UploadFile, UploadFileOutput,
 };
 use crate::services::Result;
 use crate::web::{Bytes, FileDetails};
@@ -36,10 +36,18 @@ use crate::web::{Bytes, FileDetails};
 pub async fn blob_get(
     ctx: &ServiceContext<'_>,
     params: Params<'static>,
-) -> Result<Vec<u8>> {
+) -> Result<GetBlobOutput> {
     info!("Getting blob for S3 hash");
     let hash: Bytes = params.parse()?;
-    BlobService::get(ctx, hash.as_ref()).await
+    let data = BlobService::get(ctx, hash.as_ref()).await?;
+    let metadata = BlobService::get_metadata(ctx, hash.as_ref()).await?;
+
+    let output = GetBlobOutput {
+        data,
+        mime: metadata.mime,
+        size: metadata.size,
+    };
+    Ok(output)
 }
 
 pub async fn file_get(

deepwell/src/services/file/structs.rs

@@ -79,6 +79,13 @@ pub struct GetFileOutput {
     pub hidden_fields: Vec<String>,
 }
 
+#[derive(Serialize, Debug, Clone)]
+pub struct GetBlobOutput {
+    pub data: Vec<u8>,
+    pub mime: String,
+    pub size: i64,
+}
+
 #[derive(Deserialize, Debug, Clone)]
 pub struct EditFile {
     pub site_id: i64,

framerail/src/lib/server/deepwell/getFile.ts

@@ -0,0 +1,13 @@
+import { client } from "$lib/server/deepwell/index.ts"
+
+export async function getFileByHash(
+  /** Either a Uint8Array or a hex string */
+  fileHash: Uint8Array | string
+): Promise<Blob> {
+  let res = await client.request(
+    "blob_get",
+    typeof fileHash === "string" ? fileHash : Buffer.from(fileHash).toString("hex")
+  )
+
+  return new Blob([new Uint8Array(res.data)], { type: res.mime })
+}

framerail/src/lib/server/deepwell/user.ts

@@ -50,6 +50,10 @@ export async function userEdit(
   }
   if (Array.isArray(params.locales) && params.locales.every((v) => typeof v === "string"))
     data.locales = params.locales
+  if (params.avatar instanceof File && params.avatar.type.startsWith("image/")) {
+    let srcBuf = await params.avatar.arrayBuffer()
+    data.avatar = Buffer.from(srcBuf).toString("hex")
+  }
 
   return client.request("user_edit", {
     user: userId,

framerail/src/lib/server/load/user.ts

@@ -1,5 +1,6 @@
 import defaults from "$lib/defaults"
 import { parseAcceptLangHeader } from "$lib/locales"
+import { getFileByHash } from "$lib/server/deepwell/getFile"
 import { translate } from "$lib/server/deepwell/translate"
 import { userView } from "$lib/server/deepwell/user.ts"
 import type { TranslateKeys } from "$lib/types"
@@ -55,6 +56,15 @@ export async function loadUser(username?: string, request, cookies) {
       delete viewData.user[sensitiveKeys[i]]
     }
 
+    // Get user avatar image
+    if (viewData.user.avatar_s3_hash !== null) {
+      let avatar = await getFileByHash(new Uint8Array(viewData.user.avatar_s3_hash))
+      let dataurl = `data:${avatar.type};base64,${Buffer.from(
+        await avatar.arrayBuffer()
+      ).toString("base64")}`
+      viewData.user.avatar = dataurl
+    }
+
     translateKeys = {
       ...translateKeys,
 
@@ -64,9 +74,11 @@ export async function loadUser(username?: string, request, cookies) {
       "cancel": {},
 
       // User profile attributes
+      "avatar": {},
       "user-profile-info.name": {},
       "user-profile-info.real-name": {},
       "user-profile-info.email": {},
+      "user-profile-info.avatar": {},
       "user-profile-info.gender": {},
       "user-profile-info.birthday": {},
       "user-profile-info.location": {},

framerail/src/lib/sigma-esque/sigma-esque.svelte

@@ -65,6 +65,11 @@
         outline: 1px solid var(--error);
       }
     }
+
+    .user-attribute.avatar img {
+      max-width: 200px;
+      max-height: 200px;
+    }
   }
 
   .header {

framerail/src/routes/[x+2d]/user/+page.svelte

@@ -5,6 +5,7 @@
   let showErrorPopup = useErrorPopup()
 
   let isEdit = false
+  let avatarFiles: FileList
 
   async function saveEdit() {
     let form = document.getElementById("editor")
@@ -61,6 +62,16 @@
       type="text"
       value={$page.data.user.email}
     />
+    <label for="avatar"
+      >{$page.data.internationalization?.["user-profile-info.avatar"]}</label
+    >
+    <input
+      name="avatar"
+      class="user-attribute avatar"
+      accept="image/png,image/jpeg,image/bmp"
+      type="file"
+      bind:files={avatarFiles}
+    />
     <label for="gender"
       >{$page.data.internationalization?.["user-profile-info.gender"]}</label
     >

framerail/src/routes/[x+2d]/user/+server.ts

@@ -17,6 +17,7 @@ export async function POST(event) {
     let biography = data.get("biography")?.toString().trim()
     let userPage = data.get("user-page")?.toString().trim()
     let locales = data.get("locales")?.toString().trim()
+    let avatar = data.get("avatar")?.valueOf()
 
     let body: Record<string, any> = {
       name,
@@ -27,7 +28,8 @@ export async function POST(event) {
       location,
       biography,
       user_page: userPage,
-      locales: locales?.split(" ").filter((v) => v.trim())
+      locales: locales?.split(" ").filter((v) => v.trim()),
+      avatar
     }
 
     let res = await userEdit(session?.user_id, body)

framerail/src/routes/[x+2d]/user/[slug]/page.svelte

@@ -31,6 +31,19 @@
     </div>
   {/if}
 
+  {#if $page.data.user.avatar}
+    <div class="user-attribute avatar">
+      <span class="user-attribute-label"
+        >{$page.data.internationalization?.["user-profile-info.avatar"]}</span
+      >
+      <img
+        class="user-attribute-value"
+        alt={$page.data.internationalization?.avatar}
+        src={$page.data.user.avatar}
+      />
+    </div>
+  {/if}
+
   {#if $page.data.user.birthday}
     <div class="user-attribute birthday">
       <span class="user-attribute-label"

locales/fluent/base/en.ftl

@@ -68,6 +68,7 @@ title = Title
 upload = Upload
 view = View
 vote = Vote
+avatar = Profile image
 
 search = Search
   .placeholder = Search...

locales/fluent/base/zh_Hans.ftl

@@ -67,6 +67,7 @@ title = 标题
 upload = 上传
 view = 检视
 vote = 评分
+avatar = 头像
 
 search = 搜索
   .placeholder = 搜索……

locales/fluent/user-profile/en.ftl

@@ -2,6 +2,7 @@ user-profile-info =
   .name = Name:
   .real-name = Real name:
   .email = Email:
+  .avatar = Profile image:
   .pronouns = Pronouns:
   .birthday = Birthday:
   .location = Location:

locales/fluent/user-profile/zh_Hans.ftl

@@ -2,6 +2,7 @@ user-profile-info =
   .name = 姓名：
   .real-name = 真实姓名：
   .email = 电邮地址：
+  .avatar = 头像：
   .pronouns = 性别代称：
   .birthday = 生日：
   .location = 定位：