Fix FileInput dengan Dropzone

src/app/admin/(dashboard)/kesehatan/kontak-darurat/[id]/edit/page.tsx

@@ -4,8 +4,9 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import kontakDarurat from '@/app/admin/(dashboard)/_state/kesehatan/kontak-darurat/kontakDarurat';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -89,49 +90,82 @@ function EditKontakDarurat() {
         </Button>
       </Box>
       <Stack gap={"xs"}>
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Edit Kontak Darurat</Title>
-          <TextInput
-            value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
-          />
-          <Box>
-            <Text fz="sm" fw="bold">Deskripsi</Text>
-            <EditEditor
-              value={formData.deskripsi}
-              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+          <Stack gap="xs">
+            <Title order={3}>Edit Kontak Darurat</Title>
+            <TextInput
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              label={<Text fz="sm" fw="bold">Judul</Text>}
+              placeholder="masukkan judul"
             />
-          </Box>
+            <Box>
+              <Text fz="sm" fw="bold">Deskripsi</Text>
+              <EditEditor
+                value={formData.deskripsi}
+                onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+              />
+            </Box>
+            <Box>
+              <Text fz={"md"} fw={"bold"}>Gambar</Text>
+              <Box>
+                <Dropzone
+                  onDrop={(files) => {
+                    const selectedFile = files[0]; // Ambil file pertama
+                    if (selectedFile) {
+                      setFile(selectedFile);
+                      setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                    }
+                  }}
+                  onReject={() => toast.error('File tidak valid.')}
+                  maxSize={5 * 1024 ** 2} // Maks 5MB
+                  accept={{ 'image/*': [] }}
+                >
+                  <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                    <Dropzone.Accept>
+                      <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                    </Dropzone.Accept>
+                    <Dropzone.Reject>
+                      <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                    </Dropzone.Reject>
+                    <Dropzone.Idle>
+                      <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                    </Dropzone.Idle>
 
-          <FileInput
-            label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
-              );
-              setPreviewImage(base64);
-            }}
-          />
+                    <div>
+                      <Text size="xl" inline>
+                        Drag gambar ke sini atau klik untuk pilih file
+                      </Text>
+                      <Text size="sm" c="dimmed" inline mt={7}>
+                        Maksimal 5MB dan harus format gambar
+                      </Text>
+                    </div>
+                  </Group>
+                </Dropzone>
 
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg="gray">
-              <IconImageInPicture />
-            </Center>
-          )}
-
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan
-          </Button>
-        </Stack>
-      </Paper>
+                {/* Tampilkan preview kalau ada */}
+                {previewImage && (
+                  <Box mt="sm">
+                    <Image
+                      src={previewImage}
+                      alt="Preview"
+                      style={{
+                        maxWidth: '100%',
+                        maxHeight: '200px',
+                        objectFit: 'contain',
+                        borderRadius: '8px',
+                        border: '1px solid #ddd',
+                      }}
+                    />
+                  </Box>
+                )}
+              </Box>
+            </Box>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>
+              Simpan
+            </Button>
+          </Stack>
+        </Paper>
       </Stack>
     </Box >
   );

src/app/admin/(dashboard)/kesehatan/kontak-darurat/create/page.tsx

@@ -1,113 +1,147 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useProxy } from 'valtio/utils';
-import kontakDarurat from '../../../_state/kesehatan/kontak-darurat/kontakDarurat';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
-import ApiFetch from '@/lib/api-fetch';
+import { useProxy } from 'valtio/utils';
 import CreateEditor from '../../../_com/createEditor';
+import kontakDarurat from '../../../_state/kesehatan/kontak-darurat/kontakDarurat';
+import { Dropzone } from '@mantine/dropzone';
 
 
 function CreateKontakDarurat() {
-    const router = useRouter();
-    const kontakDaruratState = useProxy(kontakDarurat)
-    const [previewImage, setPreviewImage] = useState<string | null>(null);
-    const [file, setFile] = useState<File | null>(null);
-  
-    const resetForm = () => {
-      kontakDaruratState.create.form = {
-        name: "",
-        deskripsi: "",
-        imageId: "",
-      };
-      setPreviewImage(null);
-      setFile(null);
+  const router = useRouter();
+  const kontakDaruratState = useProxy(kontakDarurat)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  const resetForm = () => {
+    kontakDaruratState.create.form = {
+      name: "",
+      deskripsi: "",
+      imageId: "",
     };
-  
-    const handleSubmit = async () => {
-      if (!file) {
-        return toast.warn("Pilih file gambar terlebih dahulu");
-      }
-  
-      const res = await ApiFetch.api.fileStorage.create.post({
-        file,
-        name: file.name,
-      });
-  
-      const uploaded = res.data?.data;
-      if (!uploaded?.id) {
-        return toast.error("Gagal upload gambar");
-      }
-  
-      kontakDaruratState.create.form.imageId = uploaded.id;
-  
-      await kontakDaruratState.create.create();
-  
-      resetForm();
-      router.push("/admin/kesehatan/kontak-darurat")
+    setPreviewImage(null);
+    setFile(null);
+  };
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
     }
-    return (
-      <Box>
-        <Box mb={10}>
-          <Button variant="subtle" onClick={() => router.back()}>
-            <IconArrowBack color={colors['blue-button']} size={25} />
-          </Button>
-        </Box>
-  
-        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-          <Stack gap="xs">
-            <Title order={3}>Create Kontak Darurat</Title>
-  
-            <TextInput
-              value={kontakDaruratState.create.form.name}
-              onChange={(val) => {
-                kontakDaruratState.create.form.name = val.target.value;
-              }}
-              label={<Text fz="sm" fw="bold">Judul</Text>}
-              placeholder="masukkan judul"
-            />
-  
-            <Box>
-              <Text fz="sm" fw="bold">Deskripsi</Text>
-              <CreateEditor
-                value={kontakDaruratState.create.form.deskripsi}
-                onChange={(val) => {
-                  kontakDaruratState.create.form.deskripsi = val;
-                }}
-              />
-            </Box>
-  
-              <FileInput
-                label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
-                value={file}
-                onChange={async (e) => {
-                  if (!e) return;
-                  setFile(e);
-                  const base64 = await e.arrayBuffer().then((buf) =>
-                    'data:image/png;base64,' + Buffer.from(buf).toString('base64')
-                  );
-                  setPreviewImage(base64);
-                }}
-              />
-  
-              {previewImage ? (
-                <Image alt="" src={previewImage} w={200} h={200} />
-              ) : (
-                <Center w={200} h={200} bg="gray">
-                  <IconImageInPicture />
-                </Center>
-              )}
-  
-              <Button onClick={handleSubmit} bg={colors['blue-button']}>
-                Simpan 
-              </Button>
-          </Stack>
-        </Paper>
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    });
+
+    const uploaded = res.data?.data;
+    if (!uploaded?.id) {
+      return toast.error("Gagal upload gambar");
+    }
+
+    kontakDaruratState.create.form.imageId = uploaded.id;
+
+    await kontakDaruratState.create.create();
+
+    resetForm();
+    router.push("/admin/kesehatan/kontak-darurat")
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
       </Box>
-    );
+
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Create Kontak Darurat</Title>
+
+          <TextInput
+            value={kontakDaruratState.create.form.name}
+            onChange={(val) => {
+              kontakDaruratState.create.form.name = val.target.value;
+            }}
+            label={<Text fz="sm" fw="bold">Judul</Text>}
+            placeholder="masukkan judul"
+          />
+
+          <Box>
+            <Text fz="sm" fw="bold">Deskripsi</Text>
+            <CreateEditor
+              value={kontakDaruratState.create.form.deskripsi}
+              onChange={(val) => {
+                kontakDaruratState.create.form.deskripsi = val;
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+            </Box>
+          </Box>
+          <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
 }
 
 export default CreateKontakDarurat;