update drone

components/form/article/create-image-form.tsx

@@ -131,6 +131,8 @@ export default function CreateImageForm() {
   const [startDateValue, setStartDateValue] = useState<Date | undefined>();
   const [startTimeValue, setStartTimeValue] = useState<string>("");
 
+  const [mediaLibrary, setMediaLibrary] = useState<any[]>([]);
+
   const { getRootProps, getInputProps } = useDropzone({
     onDrop: (acceptedFiles) => {
       setFiles((prevFiles) => [
@@ -499,13 +501,25 @@ export default function CreateImageForm() {
   //   setValue("tags", uniqueArray as [string, ...string[]]);
   // };
 
+  const handleUploadLibrary = async (files: any) => {
+    const fileArray = Array.from(files);
+
+    // contoh tanpa backend (preview local)
+    const newFiles = fileArray.map((file: any) => ({
+      name: file.name,
+      url: URL.createObjectURL(file),
+    }));
+
+    setMediaLibrary((prev) => [...prev, ...newFiles]);
+  };
+
   return (
     <form
       className="flex flex-col lg:flex-row gap-8 text-black"
       onSubmit={handleSubmit(onSubmit)}
     >
       <div className="w-full lg:w-[65%] bg-white rounded-lg p-8 flex flex-col gap-1">
-        <p className="text-sm">Judulss</p>
+        <p className="text-sm">Judul</p>
         <Controller
           control={control}
           name="title"
@@ -625,6 +639,7 @@ export default function CreateImageForm() {
               </div>
             </div>
           </div>
+
           {files.length ? (
             <Fragment>
               <div>{fileList}</div>
@@ -636,9 +651,59 @@ export default function CreateImageForm() {
             </Fragment>
           ) : null}
         </Fragment>
+
         {filesValidation !== "" && files.length < 1 && (
           <p className="text-red-400 text-sm mb-3">Upload File Media</p>
         )}
+
+        {/* ================== TAMBAHAN DI SINI ================== */}
+
+        <p className="text-sm mt-6">File Media Library</p>
+
+        {/* Upload ke Media Library */}
+        <div className="border-dashed border rounded-md p-6 text-center mb-4">
+          <input
+            type="file"
+            accept="image/png, image/jpeg, image/jpg"
+            multiple
+            onChange={(e) => handleUploadLibrary(e.target.files)}
+            className="hidden"
+            id="mediaLibraryUpload"
+          />
+
+          <label
+            htmlFor="mediaLibraryUpload"
+            className="cursor-pointer flex flex-col items-center"
+          >
+            <CloudUploadIcon size={40} className="text-gray-400" />
+            <p className="mt-2 text-sm text-muted-foreground">
+              Klik untuk upload ke Media Library
+            </p>
+          </label>
+        </div>
+
+        {/* List Media */}
+        {/* <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-3">
+          {mediaLibrary.length ? (
+            mediaLibrary.map((item, index) => (
+              <div
+                key={index}
+                className="border rounded-md overflow-hidden shadow-sm hover:shadow-md transition"
+              >
+                <img
+                  src={item?.url}
+                  alt={item?.name}
+                  className="w-full h-32 object-cover"
+                />
+                <div className="p-2 text-xs truncate">{item.name}</div>
+              </div>
+            ))
+          ) : (
+            <div className="text-sm text-muted-foreground col-span-full text-center">
+              Belum ada file di media library
+            </div>
+          )}
+        </div> */}
       </div>
       <div className="w-full lg:w-[35%]  flex flex-col gap-8">
         <div className="h-fit bg-white rounded-lg p-8 flex flex-col gap-1">