feat(FE-65): enhance MovementForm to support file uploads with FormData conversion

src/components/pages/inventory/movement/form/MovementForm.tsx

@@ -24,13 +24,17 @@ import {
   ProductSchema,
   EkspedisiSchema,
 } from '@/components/pages/inventory/movement/form/MovementForm.schema';
-import { useMovementFormHandlers } from './useMovementFormHandlers';
+import {
+  useMovementFormHandlers,
+  containsFile,
+} from './useMovementFormHandlers';
 import {
   ProductApi,
   SupplierApi,
   WarehouseApi,
 } from '@/services/api/master-data';
 import { toast } from 'react-hot-toast';
+import FileInput from '@/components/input/FileInput';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -62,6 +66,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     validationSchema:
       type === 'edit' ? UpdateMovementFormSchema : MovementFormSchema,
     onSubmit: async (values) => {
+      console.log(
+        'Dokumen:',
+        values.ekspedisi?.map((e) => e.dokumen)
+      );
+
       setMovementFormErrorMessage('');
       const payload: CreateMovementPayload = {
         alasan_transfer: values.alasan_transfer,
@@ -88,6 +97,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         })),
       };
 
+      console.log('containsFile:', containsFile(payload));
+      console.log('payload:', payload);
+
       switch (type) {
         case 'add':
           await createMovementHandler(payload);
@@ -810,9 +822,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           />
                         </td>
                         <td>
-                          <TextInput
+                          <FileInput
                             required
-                            type='file'
                             name={`ekspedisi.${idx}.dokumen`}
                             onChange={(e) => {
                               const file = e.target.files?.[0];

src/components/pages/inventory/movement/form/useMovementFormHandlers.ts

@@ -8,6 +8,7 @@ import {
   UpdateMovementPayload,
 } from '@/types/api/inventory/movement';
 import { isResponseError } from '@/lib/api-helper';
+import { containsFile, toFormData } from '@/lib/form-data';
 
 export const useMovementFormHandlers = (initialValuesId?: number) => {
   const router = useRouter();
@@ -17,7 +18,11 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
 
   const createMovementHandler = useCallback(
     async (payload: CreateMovementPayload) => {
-      const res = await MovementApi.create(payload);
+      const finalPayload = containsFile(payload)
+        ? (toFormData(payload) as unknown as CreateMovementPayload)
+        : payload;
+
+      const res = await MovementApi.create(finalPayload);
       if (isResponseError(res)) {
         setMovementFormErrorMessage(res.message);
         return;
@@ -30,7 +35,11 @@ export const useMovementFormHandlers = (initialValuesId?: number) => {
 
   const updateMovementHandler = useCallback(
     async (movementId: number, payload: UpdateMovementPayload) => {
-      const res = await MovementApi.update(movementId, payload);
+      const finalPayload = containsFile(payload)
+        ? (toFormData(payload) as unknown as UpdateMovementPayload)
+        : payload;
+
+      const res = await MovementApi.update(movementId, finalPayload);
       if (res?.status === 'error') {
         setMovementFormErrorMessage(res.message);
         return;

src/lib/form-data.ts

@@ -0,0 +1,45 @@
+export function toFormData(
+  value: unknown,
+  form = new FormData(),
+  parentKey?: string
+) {
+  if (value === undefined || value === null) {
+    if (parentKey) form.append(parentKey, '');
+    return form;
+  }
+
+  if (value instanceof File) {
+    if (!parentKey) throw new Error('File must have a key');
+    form.append(parentKey, value);
+    return form;
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((v, i) => {
+      const key = parentKey ? `${parentKey}[${i}]` : `${i}`;
+      toFormData(v, form, key);
+    });
+    return form;
+  }
+
+  if (typeof value === 'object') {
+    Object.entries(value as Record<string, unknown>).forEach(([k, v]) => {
+      const key = parentKey ? `${parentKey}[${k}]` : k;
+      toFormData(v, form, key);
+    });
+    return form;
+  }
+
+  if (parentKey) form.append(parentKey, String(value));
+  return form;
+}
+
+export function containsFile(obj: unknown): boolean {
+  if (!obj) return false;
+  if (obj instanceof File) return true;
+  if (Array.isArray(obj)) return obj.some(containsFile);
+  if (typeof obj === 'object') {
+    return Object.values(obj as Record<string, unknown>).some(containsFile);
+  }
+  return false;
+}

src/services/api/base.ts

@@ -4,9 +4,11 @@ import { BaseApiResponse } from '@/types/api/api-general';
 
 export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
   basePath: string;
+  header?: Record<string, string>;
 
-  constructor(basePath: string) {
+  constructor(basePath: string, header?: Record<string, string>) {
     this.basePath = basePath;
+    this.header = header;
   }
 
   async getAllFetcher(endpoint: string): Promise<BaseApiResponse<T[]>> {
@@ -23,42 +25,52 @@ export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
       if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
         return error.response?.data;
       }
-
       return undefined;
     }
   }
 
   async create(payload: CreatePayloadGeneric) {
+    const isFormData =
+      typeof FormData !== 'undefined' && payload instanceof FormData;
     try {
+      const headers = isFormData
+        ? { ...(this.header ?? {}) }
+        : { 'Content-Type': 'application/json', ...(this.header ?? {}) };
+
       const createRes = await httpClient<BaseApiResponse<T>>(this.basePath, {
         method: 'POST',
         body: payload,
+        headers,
       });
-
       return createRes;
     } catch (error: unknown) {
       if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
         return error.response?.data;
       }
-
       return undefined;
     }
   }
 
   async update(id: number, payload: UpdatePayloadGeneric) {
+    const isFormData =
+      typeof FormData !== 'undefined' && payload instanceof FormData;
     try {
       const updatePath = `${this.basePath}/${id}`;
+
+      const headers = isFormData
+        ? { ...(this.header ?? {}) }
+        : { 'Content-Type': 'application/json', ...(this.header ?? {}) };
+
       const updateRes = await httpClient<BaseApiResponse<T>>(updatePath, {
         method: 'PATCH',
         body: payload,
+        headers,
       });
-
       return updateRes;
     } catch (error: unknown) {
       if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
         return error.response?.data;
       }
-
       return undefined;
     }
   }
@@ -69,13 +81,11 @@ export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
       const deleteRes = await httpClient<BaseApiResponse>(deletePath, {
         method: 'DELETE',
       });
-
       return deleteRes;
     } catch (error) {
       if (axios.isAxiosError<BaseApiResponse>(error)) {
         return error.response?.data;
       }
-
       return undefined;
     }
   }