From 1dfdc10c302924407b96e0bcf5e913fcc27c0974 Mon Sep 17 00:00:00 2001
From: hanif salafi <hanifsalafi456@gmail.com>
Date: Fri, 10 Jan 2025 10:52:56 +0700
Subject: [PATCH] feat: update upload form content

---
 components/form/content/audio-form.tsx | 13 +++++++++++++
 components/form/content/image-form.tsx |  7 +++++--
 components/form/content/teks-form.tsx  | 13 +++++++++++++
 components/form/content/video-form.tsx | 12 ++++++++++++
 4 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/components/form/content/audio-form.tsx b/components/form/content/audio-form.tsx
index df77cc94..94d2e478 100644
--- a/components/form/content/audio-form.tsx
+++ b/components/form/content/audio-form.tsx
@@ -52,6 +52,7 @@ import Image from "next/image";
 import { error, loading } from "@/config/swal";
 import { Item } from "@radix-ui/react-dropdown-menu";
 import dynamic from "next/dynamic";
+import { getCsrfToken } from "@/service/auth";
 
 interface FileWithPreview extends File {
   preview: string;
@@ -528,8 +529,16 @@ export default function FormAudio() {
     // const placements = getPlacement(file.placements);
     // console.log("Placementttt:  : ", placements);
 
+    const resCsrf = await getCsrfToken();
+    const csrfToken = resCsrf?.data?.token;
+    console.log("CSRF TOKEN : ", csrfToken);
+    const headers = {
+      "X-XSRF-TOKEN": csrfToken
+    };
+
     const upload = new Upload(file, {
       endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`,
+      headers: headers,
       retryDelays: [0, 3000, 6000, 12_000, 24_000],
       chunkSize: 20_000,
       metadata: {
@@ -539,6 +548,10 @@ export default function FormAudio() {
         duration,
         isWatermark: "false", // hardcode
       },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject()
+        xhr.withCredentials = true
+      },
       onError: async (e: any) => {
         console.log("Error upload :", e);
         error(e);
diff --git a/components/form/content/image-form.tsx b/components/form/content/image-form.tsx
index a0375ca3..a429a018 100644
--- a/components/form/content/image-form.tsx
+++ b/components/form/content/image-form.tsx
@@ -543,8 +543,7 @@ export default function FormImage() {
     const csrfToken = resCsrf?.data?.token;
     console.log("CSRF TOKEN : ", csrfToken);
     const headers = {
-      "Content-Type": "application/json",
-      "X-XSRF-TOKEN": csrfToken,
+      "X-XSRF-TOKEN": csrfToken
     };
 
     const upload = new Upload(file, {
@@ -559,6 +558,10 @@ export default function FormImage() {
         duration,
         isWatermark: "true", // hardcode
       },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject()
+        xhr.withCredentials = true
+      },
       onError: async (e: any) => {
         console.log("Error upload :", e);
         error(e);
diff --git a/components/form/content/teks-form.tsx b/components/form/content/teks-form.tsx
index 17439a50..fa587340 100644
--- a/components/form/content/teks-form.tsx
+++ b/components/form/content/teks-form.tsx
@@ -52,6 +52,7 @@ import Image from "next/image";
 import { error, loading } from "@/config/swal";
 import { Item } from "@radix-ui/react-dropdown-menu";
 import dynamic from "next/dynamic";
+import { getCsrfToken } from "@/service/auth";
 
 interface FileWithPreview extends File {
   preview: string;
@@ -527,8 +528,16 @@ export default function FormTeks() {
     // const placements = getPlacement(file.placements);
     // console.log("Placementttt:  : ", placements);
 
+    const resCsrf = await getCsrfToken();
+    const csrfToken = resCsrf?.data?.token;
+    console.log("CSRF TOKEN : ", csrfToken);
+    const headers = {
+      "X-XSRF-TOKEN": csrfToken
+    };
+
     const upload = new Upload(file, {
       endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`,
+      headers: headers,
       retryDelays: [0, 3000, 6000, 12_000, 24_000],
       chunkSize: 20_000,
       metadata: {
@@ -538,6 +547,10 @@ export default function FormTeks() {
         duration,
         isWatermark: "false", // hardcode
       },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject()
+        xhr.withCredentials = true
+      },
       onError: async (e: any) => {
         console.log("Error upload :", e);
         error(e);
diff --git a/components/form/content/video-form.tsx b/components/form/content/video-form.tsx
index 09cccbb1..b48cae67 100644
--- a/components/form/content/video-form.tsx
+++ b/components/form/content/video-form.tsx
@@ -52,6 +52,7 @@ import Image from "next/image";
 import { error, loading } from "@/config/swal";
 import { Item } from "@radix-ui/react-dropdown-menu";
 import dynamic from "next/dynamic";
+import { getCsrfToken } from "@/service/auth";
 
 const CustomEditor = dynamic(
   () => {
@@ -526,9 +527,16 @@ export default function FormVideo() {
 
     // const placements = getPlacement(file.placements);
     // console.log("Placementttt:  : ", placements);
+    const resCsrf = await getCsrfToken();
+    const csrfToken = resCsrf?.data?.token;
+    console.log("CSRF TOKEN : ", csrfToken);
+    const headers = {
+      "X-XSRF-TOKEN": csrfToken
+    };
 
     const upload = new Upload(file, {
       endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`,
+      headers: headers,
       retryDelays: [0, 3000, 6000, 12_000, 24_000],
       chunkSize: 20_000,
       metadata: {
@@ -538,6 +546,10 @@ export default function FormVideo() {
         duration,
         isWatermark: "false", // hardcode
       },
+      onBeforeRequest: function (req) {
+        var xhr = req.getUnderlyingObject()
+        xhr.withCredentials = true
+      },
       onError: async (e: any) => {
         console.log("Error upload :", e);
         error(e);