From 77a0a082f0a5e1977c85a651a078376eab0d6df1 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Thu, 6 Nov 2025 15:27:18 +0700
Subject: <MIqdad> multiple image SJ

---
 app/lib/camera/component/sjCamera.tsx | 89 +++++++++++++++++++++++------------
 1 file changed, 58 insertions(+), 31 deletions(-)

(limited to 'app/lib/camera/component')

diff --git a/app/lib/camera/component/sjCamera.tsx b/app/lib/camera/component/sjCamera.tsx
index 9dbe2dc..ea5c5e2 100644
--- a/app/lib/camera/component/sjCamera.tsx
+++ b/app/lib/camera/component/sjCamera.tsx
@@ -1,46 +1,73 @@
-import React from "react";
+import React, { useRef } from "react";
 import useCameraStore from "../hooks/useCameraStore";
 import { IconButton } from "@mui/material";
 import { PendingActions } from "@mui/icons-material";
 
 const SjCamera: React.FC = () => {
   const { setImageSj } = useCameraStore();
-  const handleSuratJalanCapture = (
+  const fileRef = useRef<HTMLInputElement | null>(null);
+
+  const readFilesAsDataURL = (files: FileList | null): Promise<string[]> =>
+    new Promise((resolve) => {
+      if (!files || files.length === 0) return resolve([]);
+      const list = Array.from(files);
+      const out: string[] = [];
+      let done = 0;
+      list.forEach((f) => {
+        const fr = new FileReader();
+        fr.onload = (e) => {
+          const dataUrl = (e.target?.result as string) || "";
+          if (dataUrl) out.push(dataUrl);
+          done += 1;
+          if (done === list.length) resolve(out);
+        };
+        fr.onerror = () => {
+          done += 1;
+          if (done === list.length) resolve(out);
+        };
+        fr.readAsDataURL(f);
+      });
+    });
+
+  const handleSuratJalanCapture = async (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setImageSj(reader.result as string);
-      };
-      reader.readAsDataURL(file);
+    const imgs = await readFilesAsDataURL(event.target.files);
+    if (imgs.length > 0) {
+      // APPEND: panggil setImageSj untuk tiap foto
+      imgs.forEach((img) => setImageSj(img));
     }
+    // reset supaya bisa pilih file yang sama lagi
+    if (fileRef.current) fileRef.current.value = "";
   };
 
   return (
-    <>
-      <div className="p-4 py-8 items-center border-2 rounded-md shadow-sm w-[49%] text-center">
-        <input
-          type="file"
-          accept="image/*"
-          onChange={handleSuratJalanCapture}
-          className="hidden"
-          id="suratJalanInput"
-        />
-        <label htmlFor="suratJalanInput" className="text-gray-600">
-          <IconButton
-            color="primary"
-            aria-label="upload picture"
-            component="span"
-          >
-            <PendingActions fontSize="large" />
-          </IconButton>
-          <br />
-          Foto Surat Jalan
-        </label>
-      </div>
-    </>
+    <div className="p-4 py-8 items-center border-2 rounded-md shadow-sm w-[49%] text-center">
+      <input
+        ref={fileRef}
+        id="suratJalanInput"
+        type="file"
+        accept="image/*"
+        capture="environment"
+        multiple
+        className="hidden"
+        onChange={handleSuratJalanCapture}
+      />
+      <label
+        htmlFor="suratJalanInput"
+        className="text-gray-600 cursor-pointer select-none"
+      >
+        <IconButton
+          color="primary"
+          aria-label="upload picture"
+          component="span"
+        >
+          <PendingActions fontSize="large" />
+        </IconButton>
+        <br />
+        Foto Surat Jalan
+      </label>
+    </div>
   );
 };
 
-- 
cgit v1.2.3