feat: fix upload image

chowjustin · Nov 6, 2024 · 86795aa · 86795aa
1 parent 99d70f9
commit 86795aa
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 45 deletions.
diff --git a/src/app/(auth)/signin/hooks/useLoginMutation.ts b/src/app/(auth)/signin/hooks/useLoginMutation.ts
@@ -26,7 +26,7 @@ export default function useLoginMutation() {
       const token = res.data.token;
       setToken(token);
 
-      const user = await api.get<ApiResponse<User>>("/users/me/");
+      const user = await api.get<ApiResponse<User>>("/users/me");
       if (user) login({ ...user.data.data, token: token });
 
       return res;

diff --git a/src/app/(auth)/signup/page.tsx b/src/app/(auth)/signup/page.tsx
@@ -2,6 +2,7 @@
 
 import Button from "@/components/buttons/Button";
 import Input from "@/components/form/Input";
+import UploadFile from "@/components/form/UploadFile";
 import NextImage from "@/components/NextImage";
 import Typography from "@/components/Typography";
 import api from "@/lib/api";
@@ -18,7 +19,7 @@ type SignUpRequest = {
   username: string;
   email: string;
   password: string;
-  ttd: string;
+  ttd: File | null;
 };
 
 export default function SignUp() {
@@ -35,7 +36,30 @@ export default function SignUp() {
     SignUpRequest
   >({
     mutationFn: async (data: SignUpRequest) => {
-      return await api.post("/users/signup", data);
+      // return await api.post("/users/signup", data);
+      //   return await api.post("/users/signup", data, {
+      //     headers: {
+      //       "Content-Type": "multipart/form-data",
+      //     },
+      //   });
+      // },
+      const formData = new FormData();
+
+      // Append form fields to the FormData
+      formData.append("name", data.name);
+      formData.append("username", data.username);
+      formData.append("email", data.email);
+      formData.append("password", data.password);
+
+      if (data.ttd) {
+        formData.append("ttd", data.ttd);
+      }
+
+      return await api.post("/users/signup", formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      });
     },
     onSuccess: (_, variables) => {
       const { username } = variables;
@@ -116,13 +140,15 @@ export default function SignUp() {
                   },
                 }}
               />
-              <Input
-                id="ttd"
-                label="Upload Tanda Tangan (.png)"
-                placeholder="Tanda Tangan"
-                className="h-[250px]"
-                validation={{ required: "Tanda tangan harus diisi" }}
-              />
+              <div>
+                <UploadFile
+                  label="Upload File"
+                  id="image"
+                  maxSize={2000000}
+                  helperText="Format file .jpeg .jpg .png .pdf, maksimum 2 MB"
+                  validation={{ required: "This field is required" }}
+                />
+              </div>
             </div>
             <div className="w-full h-full flex flex-col items-center gap-3 max-md:gap-1">
               <Button

diff --git a/src/app/sandbox/form/page.tsx b/src/app/sandbox/form/page.tsx
@@ -2,32 +2,27 @@
 
 import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
 
-import Input from "@/components/form/Input";
-import UploadImage from "@/components/form/UploadImage";
+import UploadFile from "@/components/form/UploadFile";
 import Button from "@/components/buttons/Button";
-import axios, { AxiosError, AxiosResponse } from "axios";
-import { ApiError, ApiResponse } from "@/types/api";
+import { ApiError } from "@/types/api";
 import { useMutation } from "@tanstack/react-query";
 import api from "@/lib/api";
 import toast from "react-hot-toast";
-import useAuthStore from "@/app/stores/useAuthStore";
+import { Input } from "@nextui-org/react";
 
 export default function FormSandbox() {
   const methods = useForm();
 
   const { handleSubmit } = methods;
 
-  const { user } = useAuthStore();
-
-  const { mutate: handleImageUpload, isPending } = useMutation<
+  const { mutate: handleImageUpload } = useMutation<
     // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     any,
     ApiError,
     FormData
   >({
     mutationFn: async (data) => {
-      await axios;
-      api
+      await api
         .post("/users/file", data, {
           headers: {
             "Content-Type": "multipart/form-data",
@@ -45,17 +40,13 @@ export default function FormSandbox() {
   });
   // biome-ignore lint/suspicious/noExplicitAny: <explanation>
   const onSubmit: SubmitHandler<any> = (data) => {
-    // Prepare the FormData object
     const formData = new FormData();
 
-    // Append the image file from react-hook-form
     if (data.image && data.image[0]) {
-      formData.append("file", data.image[0]); // data.image[0] is the uploaded image file
+      formData.append("file", data.image[0]);
     }
 
-    // Trigger the mutation to upload the image
     handleImageUpload(formData);
-    // console.log(data);
   };
 
   return (
@@ -66,19 +57,19 @@ export default function FormSandbox() {
             className="w-[600px] flex flex-col gap-4"
             onSubmit={handleSubmit(onSubmit)}
           >
-            {/* <Input id="Test" label="Username Tujuan" placeholder="Username" />
+            <Input id="Test" label="Username Tujuan" placeholder="Username" />
             <Input
               id="Test"
               label="Username Tujuan"
               placeholder="Username"
               readOnly
-            /> */}
+            />
             <div>
-              <UploadImage
-                label="Upload Image"
+              <UploadFile
+                label="Upload File"
                 id="image"
                 maxSize={2000000}
-                helperText="Format file .jpeg .jpg .png, maksimum 2 MB"
+                helperText="Format file .jpeg .jpg .png .pdf, maksimum 2 MB"
                 validation={{ required: "This field is required" }}
               />
             </div>

diff --git a/src/components/form/HelperText.tsx b/src/components/form/HelperText.tsx
@@ -13,12 +13,10 @@ export default function HelperText({
   return (
     <div className="flex space-x-1">
       <Typography
-        as="p"
-        font="Inter"
         weight="regular"
-        variant="p"
+        variant="sm"
         className={clsxm(
-          "text-xs !leading-tight text-gray-900",
+          "text-sm !leading-tight text-gray-900",
           helperTextClassName,
         )}
       >

diff --git a/src/components/form/UploadImage.tsx → src/components/form/UploadFile.tsx b/src/components/form/UploadImage.tsx → src/components/form/UploadFile.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { Accept, FileRejection, useDropzone } from "react-dropzone";
 import {
@@ -28,7 +30,7 @@ export type DropzoneInputProps = {
   className?: string;
 };
 
-export default function UploadImage({
+export default function UploadFile({
   id,
   label,
   helperText,
@@ -111,11 +113,13 @@ export default function UploadImage({
     <div className="w-full space-y-1.5 rounded-md">
       {label && (
         <label htmlFor={id} className="flex space-x-1">
-          <Typography weight="bold" className="text-sm text-typo-main">
+          <Typography variant="sm" className="text-sm text-gray-900">
             {label}
           </Typography>
           {validation?.required && (
-            <Typography className="font-bold text-danger-main">*</Typography>
+            <Typography variant="sm" className="text-sm text-red-500">
+              *
+            </Typography>
           )}
         </label>
       )}
@@ -152,20 +156,20 @@ export default function UploadImage({
               >
                 <div className="flex flex-row items-center gap-[6px]">
                   <Typography
-                    variant="p"
-                    className="text-center text-xl text-typo-secondary"
+                    variant="sm"
+                    className="text-center text-sm text-typo-secondary"
                   >
                     <HiOutlineArrowUpCircle />
                   </Typography>
                   <Typography
-                    variant="p"
+                    variant="sm"
                     className="text-center text-typo-secondary"
                   >
                     Drag and drop file
                   </Typography>
                 </div>
                 <Typography
-                  variant="p"
+                  variant="sm"
                   className="text-center text-typo-secondary"
                 >
                   Or
@@ -179,11 +183,11 @@ export default function UploadImage({
                   </Typography>
                 </div>
                 <Typography
-                  variant="p"
-                  className="text-center text-typo-secondary"
+                  variant="sm"
+                  className="text-center text-sm text-typo-secondary"
                 >
-                  Files allowed: {accept["image/*"].join(", ")} up to{" "}
-                  {maxSize / 1000000} MB
+                  Files allowed: .jpg .jpeg .png .pdf up to {maxSize / 1000000}{" "}
+                  MB
                 </Typography>
               </div>
             </div>