From 7de49ebb08ec38ea3102ed09917f3d3c21f995c0 Mon Sep 17 00:00:00 2001
From: hanif salafi <hanifsalafi456@gmail.com>
Date: Thu, 2 Jan 2025 10:32:38 +0700
Subject: [PATCH] feat: add file upload in content image

---
 components/form/content/image-form.tsx | 69 ++++++++++++++++----------
 1 file changed, 44 insertions(+), 25 deletions(-)

diff --git a/components/form/content/image-form.tsx b/components/form/content/image-form.tsx
index 8e8edb02..998cf17f 100644
--- a/components/form/content/image-form.tsx
+++ b/components/form/content/image-form.tsx
@@ -10,7 +10,7 @@ import * as z from "zod";
 import { Upload } from 'tus-js-client';
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useRouter } from "next/navigation";
+import { redirect, useRouter } from "next/navigation";
 import {
   Select,
   SelectContent,
@@ -52,7 +52,7 @@ import { useDropzone } from "react-dropzone";
 import { Icon } from "@iconify/react";
 import { CloudUpload } from "lucide-react";
 import Image from "next/image";
-import { error } from "@/config/swal";
+import { error, loading } from "@/config/swal";
 import { Item } from "@radix-ui/react-dropdown-menu";
 
 interface FileWithPreview extends File {
@@ -111,7 +111,8 @@ export default function FormImage() {
   });
 
   let fileTypeId = "1";
-  let progressInfo = [];
+  let progressInfo: any = [];
+  let counterUpdateProgress = 0;
   const [progressList, setProgressList] = useState<any>([]);
   let uploadPersen = 0;
   const [isStartUpload, setIsStartUpload] = useState(false);
@@ -344,6 +345,7 @@ export default function FormImage() {
   };
 
   const save = async (data: ImageSchema) => {
+    loading();
     const finalTitle = isSwitchOn ? title : data.title;
     const requestData = {
       ...data,
@@ -413,17 +415,7 @@ export default function FormImage() {
     
     Cookies.remove('idCreate');
 
-    MySwal.fire("Sukses", "Data berhasil disimpan.", "success");
-
-    MySwal.fire({
-      title: "Sukses",
-      text: "Data berhasil disimpan.",
-      icon: "success",
-      confirmButtonColor: "#3085d6",
-      confirmButtonText: "OK",
-    }).then(() => {
-      // router.push("/en/contributor/content/image");
-    });
+    // MySwal.fire("Sukses", "Data berhasil disimpan.", "success");
   };
 
   // function showProgress() {
@@ -465,32 +457,59 @@ export default function FormImage() {
         filename: file.name,
         filetype: file.type,
         duration,
-        isWatermark: true, // hardcode
+        isWatermark: 'true', // hardcode
       },
       onError: async (e: any) => {
         console.log('Error upload :', e);
         error(e);
       },
       onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
-        // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
-        // progressInfo[idx].percentage = uploadPersen;
-        // counterUpdateProgress++;
-        // // console.log(counterUpdateProgress);
-        // setProgressList(progressInfo);
-        // setCounterProgress(counterUpdateProgress);
+        const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
+        progressInfo[idx].percentage = uploadPersen;
+        counterUpdateProgress++;
+        console.log(counterUpdateProgress);
+        setProgressList(progressInfo);
+        setCounterProgress(counterUpdateProgress);
       },
       onSuccess: async () => {
         uploadPersen = 100;
-        // progressInfo[idx].percentage = 100;
-        // counterUpdateProgress++;
-        // setCounterProgress(counterUpdateProgress);
-        // successTodo();
+        progressInfo[idx].percentage = 100;
+        counterUpdateProgress++;
+        setCounterProgress(counterUpdateProgress);
+        successTodo();
       },
     });
 
     upload.start();
   }
 
+  const successSubmit = (redirect: string) => {
+    MySwal.fire({
+      title: "Sukses",
+      text: "Data berhasil disimpan.",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push(redirect);
+    });
+  }
+
+  function successTodo() {
+    let counter = 0;
+    for (const element of progressInfo) {
+      if (element.percentage == 100) {
+        counter++;
+      }
+    }
+    if (counter == progressInfo.length) {
+      setIsStartUpload(false);
+      // hideProgress();
+      Cookies.remove('idCreate');
+      successSubmit("/in/contributor/content/image/");
+    }
+  }
+
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {