feat: add file upload feature, 서버와 연결

feat: add file upload feature, 서버와 연결

Author: RJihyeon

frontend/api/upload.tsx

@@ -0,0 +1,43 @@
+
+const BASE_URL="http://0.0.0.0:8000"
+const AUTH_TOKEN="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxfQ.J8Qj4p5xrAMj0GKjddGky-oeAOlWxjT8KOCisXzSOdU"
+
+
+export async function uploadFile(file: File): Promise<string> {
+    const formData = new FormData();
+    formData.append("audio_file", file); // 필드 이름을 FastAPI와 동일하게 설정
+
+    //임시지정, 수정해야함(아마도 url에서 뽑는 방식)
+    const toUserId=1;
+
+  
+    // `to_user_id`를 URL의 쿼리 파라미터로 추가
+    const url = `${BASE_URL}/voice?to_user_id=${toUserId}`;
+  
+    try {
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${AUTH_TOKEN}`, // 인증 토큰 추가
+        },
+        body: formData,
+      });
+  
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(
+          `Failed to upload file: HTTP ${response.status}, ${errorText}`
+        );
+      }
+  
+      const result = await response.json();
+      console.log("Upload result:", result);
+      return result.message || "File uploaded successfully!";
+
+    } catch (error) {
+      if (error instanceof Error) {
+        throw new Error(`Upload failed: ${error.message}`);
+      }
+      throw new Error("An unknown error occurred during upload.");
+    }
+  }

frontend/components/send/SectionUpload.tsx

@@ -1,6 +1,6 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
 import UploadResult from "../../islands/uploadResult.tsx";
-import Upload from "./upload.tsx";
+import Upload from "../../islands/upload.tsx";
 
 export default function SectionUpload() {
   return (
@@ -12,7 +12,7 @@ export default function SectionUpload() {
           <div className={"px-2 my-2 flex flex-col gap-2 items-center"}>
             <h2 className={"hidden"}>Send</h2>
             <h3>Send a file</h3>
-            <Upload message={"Upload a text file"} />
+            <Upload  initialMessage="Upload a text file" />
           </div>
         </div>
         <div className={"w-2 h-full bg-slate-600 hidden md:block"}>

frontend/components/send/upload.tsx

@@ -12,6 +12,7 @@ import * as $Counter from "./islands/Counter.tsx";
 import * as $DropdownListForm from "./islands/DropdownListForm.tsx";
 import * as $Inbox from "./islands/Inbox.tsx";
 import * as $ProfileEdit from "./islands/ProfileEdit.tsx";
+import * as $upload from "./islands/upload.tsx";
 import * as $uploadResult from "./islands/uploadResult.tsx";
 import type { Manifest } from "$fresh/server.ts";
 
@@ -29,6 +30,7 @@ const manifest = {
     "./islands/DropdownListForm.tsx": $DropdownListForm,
     "./islands/Inbox.tsx": $Inbox,
     "./islands/ProfileEdit.tsx": $ProfileEdit,
+    "./islands/upload.tsx": $upload,
     "./islands/uploadResult.tsx": $uploadResult,
   },
   baseUrl: import.meta.url,

frontend/fresh.gen.ts

@@ -0,0 +1,57 @@
+import { useState } from "preact/hooks";
+import { uploadFile } from "../api/upload.tsx";
+
+
+interface UploadProps {
+  initialMessage?: string;
+}
+
+export default function Upload({ initialMessage }: UploadProps) {
+  const [message, setMessage] = useState(initialMessage || "");
+  async function handleFormSubmit(event: Event) {
+    event.preventDefault(); // 기본 form 동작 방지
+
+    const form = event.target as HTMLFormElement;
+    const input = form.elements.namedItem("my-file") as HTMLInputElement;
+    console.log("Input element:", input); // input 요소가 제대로 가져와졌는지 확인
+    const file = input.files?.[0];
+    console.log("Selected file:", file); // 선택된 파일이 제대로 가져와졌는지 확인
+
+    if (!file) {
+      setMessage("No file selected!");
+      return;
+    }
+
+    try {
+      const resultMessage = await uploadFile(file);
+      setMessage(resultMessage);
+    } catch (error) {
+      if (error instanceof Error) {
+        setMessage(`Error: ${error.message}`);
+      } else {
+        setMessage("An unknown error occurred!");
+      }
+    }
+  }
+
+  return (
+    <>
+     <form
+        method="post"
+        encType="multipart/form-data"
+        className={"flex flex-row gap-2 items-center"}
+        onSubmit={handleFormSubmit} // 폼 제출 이벤트 핸들러 추가
+      >
+        <div>
+          <input type="file" name="my-file" accept=".mp3"/>
+        </div>
+        <div>
+          <button className={"bg-red-400"} type="submit">
+            Upload
+          </button>
+        </div>
+      </form>
+      {message ? <p>{message}</p> : null}
+    </>
+  );
+}

frontend/islands/upload.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "preact/hooks";
-import Upload from "../../components/send/upload.tsx";
+import Upload from "../../islands/upload.tsx";
 import SectionUpload from "../../components/send/SectionUpload.tsx";
 import ChevronBg from "../../components/chevronBg.tsx";
 import TitleDivider from "../../components/common/TitleDivider.tsx";