feat: update upload form content

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);

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);

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);

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);