From 4a11cf0f9456d4e4bedeae19a0373dad034fe38f Mon Sep 17 00:00:00 2001
From: Thanu Poptiphueng <tpcrasite@gmail.com>
Date: Sat, 20 Apr 2024 17:36:18 +0700
Subject: [PATCH] added test image upload

---
 src/router/index.js       |  8 ++++++-
 src/utils/fileUpload.js   |  8 +++++++
 src/utils/trpc.js         |  6 ++++++
 src/views/UploadImage.vue | 45 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/fileUpload.js
 create mode 100644 src/views/UploadImage.vue

diff --git a/src/router/index.js b/src/router/index.js
index 644f220..6c22073 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,7 @@ import CheckSurvey from "@/views/CheckSurvey.vue";
 import QuestionList from "@/views/QuestionList.vue";
 import RegisterForm from "@/views/RegisterForm.vue";
 import SearchUser from "@/views/SearchUser.vue";
+import UploadImage from "@/views/UploadImage.vue";
 const routes = [
   {
     path: "/",
@@ -26,6 +27,10 @@ const routes = [
     path: "/search",
     component: SearchUser,
   },
+  {
+    path: "/upload",
+    component: UploadImage,
+  },
 ];
 
 const router = createRouter({
@@ -33,4 +38,5 @@ const router = createRouter({
   routes,
 });
 
-export default router;
\ No newline at end of file
+export default router;
+
diff --git a/src/utils/fileUpload.js b/src/utils/fileUpload.js
new file mode 100644
index 0000000..7cf36cd
--- /dev/null
+++ b/src/utils/fileUpload.js
@@ -0,0 +1,8 @@
+export function createFormData(request, file) {
+  const formData = new FormData();
+  Object.entries(request.formData).forEach(([key, value]) => {
+    formData.append(key, value);
+  });
+  formData.append("file", file, file.name);
+  return formData;
+}
diff --git a/src/utils/trpc.js b/src/utils/trpc.js
index eaac7d2..e3df304 100644
--- a/src/utils/trpc.js
+++ b/src/utils/trpc.js
@@ -5,6 +5,12 @@ export const client = createTRPCProxyClient({
   links: [
     httpBatchLink({
       url: CONFIG.api_url,
+      headers: () => {
+        let token = localStorage.getItem("token");
+        return {
+          Authorization: token ? `Bearer ${token}` : "",
+        };
+      },
     }),
   ],
 });
diff --git a/src/views/UploadImage.vue b/src/views/UploadImage.vue
new file mode 100644
index 0000000..7c870e3
--- /dev/null
+++ b/src/views/UploadImage.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <input
+      type="file"
+      @change="onFileChanged($event)"
+      accept="image/*"
+      capture
+    />
+    <button @click="uploadImage()">Upload</button>
+  </div>
+</template>
+<script>
+import { client } from "@/utils/trpc";
+import { createFormData } from "@/utils/fileUpload";
+export default {
+  data: () => ({
+    file: null,
+  }),
+  methods: {
+    onFileChanged(event) {
+      const file = event.target.files[0];
+      this.file = file;
+    },
+
+    async uploadImage() {
+      if (!this.file) {
+        return;
+      }
+      let request = await client.user.requestChangeImage.mutate({
+        imageName: this.file.name,
+        contentType: this.file.type,
+      });
+      let formData = createFormData(request, this.file);
+      await fetch(request.postURL, {
+        method: "POST",
+        body: formData,
+      }).then(() => {
+        client.user.confirmChangeImage.mutate();
+      });
+      console.log("done");
+    },
+  },
+};
+</script>
+<style></style>