feat: add axios config and upload button (#20)

* Dev/backend@0.0.0 (#5)

* remove golang

* Init fastapi (#11)

* inited fastapi

* updated .gitignore and added template .env file

* remove unused script in poetry

* add simple Readme

* update Readme

* added read different .env files based on command line args & update dockerfile

* File card initial commit

* feat: add axios config and upload button

* refactor: add default value in config and type in pastExamApi

* chore: add project README for documentation

* Revert "Dev/backend@0.0.0 (#5)"

This reverts commit 316d9e3.

---------

Co-authored-by: Owen Lin <106612301+owenowenisme@users.noreply.github.com>
Co-authored-by: d-ben-b <155895903+d-ben-b@users.noreply.github.com>
Co-authored-by: unknown <f74107048@gs.ncku.edu.tw>
Co-authored-by: owenowenisme <mses010108@gmail.com>

Author: 4 people

frontend/components/FileUploadField.tsx

@@ -1,31 +1,51 @@
 'use client';
 import Image from 'next/image';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
+import pastExamApi from '@/module/pastExamApi';
 
 interface FileWithPreview extends File {
   preview: string;
 }
-
 export const FileUploadField = () => {
-  const [files, setFiles] = useState<FileWithPreview[]>([]);
-
+  /**
+   * @todo
+   * 1. Use uploaderId from user global state
+   * 2. Handle multiple file submit
+   * 3. Handle filename (Base on file or explicit input)
+   */
+  const [file, setFile] = useState<FileWithPreview | null>(null);
+  const [uploaderId] = useState(1);
+  const [fileName, setFileName] = useState('');
+  useEffect(() => {
+    return () => {
+      if (file?.preview) {
+        URL.revokeObjectURL(file.preview);
+      }
+    };
+  }, [file]);
   const onDrop = useCallback((acceptedFiles: File[]) => {
-    const mappedFiles = acceptedFiles.map((file) =>
-      Object.assign(file, {
-        preview: URL.createObjectURL(file),
-      }),
-    );
-    setFiles((prevFiles) => [...prevFiles, ...mappedFiles]);
+    if (acceptedFiles.length > 0) {
+      const uploadedFile = acceptedFiles[0];
+      const mappedFile = Object.assign(uploadedFile, {
+        preview: URL.createObjectURL(uploadedFile),
+      });
+      setFile(mappedFile);
+      setFileName(uploadedFile.name);
+    }
   }, []);
 
   const { getRootProps, getInputProps } = useDropzone({
     onDrop,
-    multiple: true,
+    multiple: false,
   });
 
-  const removeFile = (fileName: string): void => {
-    setFiles((prevFiles) => prevFiles.filter((file) => file.name !== fileName));
+  const removeFile = (): void => {
+    if (file?.preview) {
+      URL.revokeObjectURL(file.preview);
+    }
+    setFile(null);
+    setFileName('');
   };
 
   const formatFileSize = (bytes: number): string => {
@@ -35,6 +55,30 @@ export const FileUploadField = () => {
     return `${(bytes / 1024).toFixed(2)} KB`;
   };
 
+  const handleSubmit = async () => {
+    if (!file) {
+      alert('No file uploaded!');
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append('upload_file', file);
+    formData.append('file_name', fileName || file.name);
+    formData.append('uploader_id', uploaderId.toString());
+
+    try {
+      const response = await pastExamApi.uploadFile(formData);
+
+      if (response) {
+        alert('File uploaded successfully!');
+        setFile(null);
+      }
+    } catch (error) {
+      console.error('Error uploading file:', error);
+      alert('Failed to upload file.');
+    }
+  };
+
   return (
     <>
       <div
@@ -43,49 +87,53 @@ export const FileUploadField = () => {
       >
         <div className="flex h-full w-full flex-col justify-center rounded-xl border-2 border-dotted p-5">
           <input {...getInputProps()} />
-          <p>Drag & drop files here, or click to select files</p>
+          <p>Drag & drop a file here, or click to select a file</p>
           <button
             type="button"
             className="mt-2 max-w-40 self-center rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
           >
-            Select Files
+            Select File
           </button>
         </div>
       </div>
-      {files.length !== 0 && (
+      {file && (
         <div className="mt-4">
-          <h3 className="font-semibold">Selected Files</h3>
-          <ul className="mt-2 space-y-4">
-            {files.map((file, index) => (
-              <li
-                key={index}
-                className="flex items-center justify-between rounded-xl border border-gray-300 p-2"
-              >
-                <div className="flex items-center space-x-4">
-                  <div className="relative h-12 w-12 overflow-hidden rounded sm:h-16 sm:w-16 md:h-20 md:w-20 lg:h-24 lg:w-24">
-                    <Image
-                      src={file.preview}
-                      alt={file.name}
-                      fill
-                      className="object-cover"
-                    />
-                  </div>
-                  <div>
-                    <p className="font-medium">{file.name}</p>
-                    <p className="text-sm text-slate-50">
-                      {`${file.name.split('.')[1]} - ${formatFileSize(file.size)}`}
-                    </p>
-                  </div>
-                </div>
-                <button
-                  onClick={() => removeFile(file.name)}
-                  className="rounded-lg bg-red-500 px-2 py-1 text-white hover:bg-red-600"
-                >
-                  Remove
-                </button>
-              </li>
-            ))}
-          </ul>
+          <h3 className="font-semibold">Selected File</h3>
+          <div className="mt-2 flex items-center justify-between rounded-xl border border-gray-300 p-2">
+            <div className="flex items-center space-x-4">
+              <div className="relative h-12 w-12 overflow-hidden rounded sm:h-16 sm:w-16 md:h-20 md:w-20 lg:h-24 lg:w-24">
+                <Image
+                  src={file.preview}
+                  alt={file.name}
+                  fill
+                  className="object-cover"
+                />
+              </div>
+              <div>
+                <p className="font-medium">{file.name}</p>
+                <p className="text-sm text-slate-50">
+                  {formatFileSize(file.size)}
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={removeFile}
+              className="rounded-lg bg-red-500 px-2 py-1 text-white hover:bg-red-600"
+            >
+              Remove
+            </button>
+          </div>
+        </div>
+      )}
+      {file && (
+        <div className="mt-4 flex justify-end">
+          <button
+            type="button"
+            onClick={handleSubmit}
+            className="rounded-lg bg-green-500 px-4 py-2 text-white hover:bg-green-600"
+          >
+            Upload
+          </button>
         </div>
       )}
     </>

frontend/module/pastExamApi.ts

@@ -0,0 +1,72 @@
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+interface UploadResponse {
+  success: boolean;
+  fileId: string;
+  url: string;
+}
+class PastExamApi {
+  private axiosInstance: AxiosInstance;
+
+  constructor() {
+    this.axiosInstance = axios.create({
+      baseURL: process.env.NEXT_PUBLIC_API_URL,
+      timeout: 15000,
+    });
+
+    this.axiosInstance.interceptors.request.use(
+      (config) => {
+        console.log(`Sending request to ${config.baseURL}${config.url}`);
+        return config;
+      },
+      (error) => {
+        console.error('Request error:', error);
+        return Promise.reject(error);
+      },
+    );
+
+    this.axiosInstance.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        console.error('Response error:', error.response?.data || error.message);
+        return Promise.reject(error);
+      },
+    );
+  }
+
+  private async request<T>(config: AxiosRequestConfig): Promise<T> {
+    try {
+      const response: AxiosResponse<T> =
+        await this.axiosInstance.request(config);
+      return response.data;
+    } catch (error) {
+      console.error(`Error in request to ${config.url}:`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * Upload file with `multipart/form-data`.
+   * @param formData - FormData containing the file and associated data.
+   */
+
+  async uploadFile(formData: FormData): Promise<UploadResponse> {
+    try {
+      const response = await this.request<UploadResponse>({
+        url: '/file',
+        method: 'POST',
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        data: formData,
+      });
+      console.log('File uploaded successfully:', response);
+      return response;
+    } catch (error) {
+      console.error('Error uploading file:', error);
+      throw error;
+    }
+  }
+}
+
+const pastExamApi = new PastExamApi();
+export default pastExamApi;

frontend/next.config.js

@@ -30,4 +30,16 @@ const nextConfig = {
     }
   };
 
-module.exports = nextConfig;
+module.exports = {
+  env: {
+    NEXT_PUBLIC_API_URL:
+      process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000',
+  },
+  onDevelopment: () => {
+    if (!process.env.NEXT_PUBLIC_API_URL) {
+      console.warn(
+        'Warning: NEXT_PUBLIC_API_URL is not set, using default value',
+      );
+    }
+  },
+};

frontend/package.json

@@ -52,6 +52,7 @@
     "@typescript-eslint/parser": "8.11.0",
     "@vercel/git-hooks": "1.0.0",
     "autoprefixer": "10.4.19",
+    "cross-env": "7.0.3",
     "eslint": "9.13.0",
     "eslint-config-next": "15.0.1",
     "eslint-plugin-react": "7.37.2",