feat: update axios

components/form/content/image-form.tsx

@@ -7,6 +7,7 @@ import { Label } from "@/components/ui/label";
 import { Card } from "@/components/ui/card";
 import { zodResolver } from "@hookform/resolvers/zod";
 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";
@@ -51,6 +52,8 @@ 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 { Item } from "@radix-ui/react-dropdown-menu";
 
 interface FileWithPreview extends File {
   preview: string;
@@ -108,6 +111,11 @@ export default function FormImage() {
   });
 
   let fileTypeId = "1";
+  let progressInfo = [];
+  const [progressList, setProgressList] = useState<any>([]);
+  let uploadPersen = 0;
+  const [isStartUpload, setIsStartUpload] = useState(false);
+  const [counterProgress, setCounterProgress] = useState(0);
 
   const [files, setFiles] = useState<FileWithPreview[]>([]);
   
@@ -354,6 +362,9 @@ export default function FormImage() {
       isInternationalMedia: false,
     };
     
+    let id = Cookies.get('idCreate');
+
+    if (id == undefined) {
       const response = await createMedia(requestData);
       console.log("Form Data Submitted:", requestData);
   
@@ -361,19 +372,46 @@ export default function FormImage() {
         MySwal.fire("Error", response?.message, "error");
         return;
       }
+      Cookies.set('idCreate', response?.data.data, { expires: 1 });
+      id = response?.data?.data;
 
-    const imageId = response?.data?.data.id;
+      // Upload Thumbnail
-    if (imageId && thumbnail) {
+      if (fileTypeId == '1') {
         const formMedia = new FormData();
-      formMedia.append("file", thumbnail);
+        formMedia.append('file', files[0]);
-
+        const responseThumbnail = await uploadThumbnail(
-      const responseThumbnail = await uploadThumbnail(imageId, formMedia);
+          formMedia,
-
+          id,
-      if (responseThumbnail?.error) {
+        );
-        MySwal.fire("Error", responseThumbnail?.message, "error");
+        if (responseThumbnail?.error == true) {
-        return;
+          error(responseThumbnail?.message);
+          return false;
         }
       }
+    }
+
+    // Upload File
+    const progressInfoArr = [];
+    for (const item of files) {
+      progressInfoArr.push({ percentage: 0, fileName: item.name });
+    }
+    progressInfo = progressInfoArr;
+    setIsStartUpload(true);
+    setProgressList(progressInfoArr);
+
+    close();
+    // showProgress();
+    files.map( async (item: any, index: number) => {
+      await uploadResumableFile(
+        index,
+        String(id),
+        item,
+        fileTypeId == '2' || fileTypeId == '4' ? item.duration : '0',
+      );
+    });
+
+    
+    Cookies.remove('idCreate');
 
     MySwal.fire("Sukses", "Data berhasil disimpan.", "success");
 
@@ -384,10 +422,18 @@ export default function FormImage() {
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
     }).then(() => {
-      router.push("/en/contributor/content/image");
+      // router.push("/en/contributor/content/image");
     });
   };
 
+  // function showProgress() {
+  //   $('#modalProgress').modal('show');
+  // }
+
+  // function hideProgress() {
+  //   $('#modalProgress').modal('hide');
+  // }
+
   const onSubmit = (data: ImageSchema) => {
     MySwal.fire({
       title: "Simpan Data",
@@ -404,6 +450,47 @@ export default function FormImage() {
     });
   };
 
+  async function uploadResumableFile(idx: number, id: string, file: any, duration: string) {
+    console.log(idx, id, file, duration);
+
+    // const placements = getPlacement(file.placements);
+    // console.log("Placementttt:  : ", placements);
+
+    const upload = new Upload(file, {
+      endpoint: `${process.env.NEXT_PUBLIC_API}/media/file/upload`,
+      retryDelays: [0, 3000, 6000, 12_000, 24_000],
+      chunkSize: 20_000,
+      metadata: {
+        mediaid: id,
+        filename: file.name,
+        filetype: file.type,
+        duration,
+        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);
+      },
+      onSuccess: async () => {
+        uploadPersen = 100;
+        // progressInfo[idx].percentage = 100;
+        // counterUpdateProgress++;
+        // setCounterProgress(counterUpdateProgress);
+        // successTodo();
+      },
+    });
+
+    upload.start();
+  }
+
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {

package-lock.json

@@ -130,6 +130,7 @@
         "swiper": "^11.1.15",
         "tailwind-merge": "^2.5.5",
         "tailwindcss-animate": "^1.0.7",
+        "tus-js-client": "^4.2.3",
         "use-places-autocomplete": "^4.0.1",
         "vaul": "^0.9.1",
         "yup": "^1.6.1",
@@ -3881,6 +3882,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -4163,6 +4169,15 @@
         "simple-swizzle": "^0.2.2"
       }
     },
+    "node_modules/combine-errors": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/combine-errors/-/combine-errors-3.0.3.tgz",
+      "integrity": "sha512-C8ikRNRMygCwaTx+Ek3Yr+OuZzgZjduCOfSQBjbM8V3MfgcjSTeto/GXP6PAwKvJz/v15b7GHZvx5rOlczFw/Q==",
+      "dependencies": {
+        "custom-error-instance": "2.1.1",
+        "lodash.uniqby": "4.5.0"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -4279,6 +4294,11 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/custom-error-instance": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/custom-error-instance/-/custom-error-instance-2.1.1.tgz",
+      "integrity": "sha512-p6JFxJc3M4OTD2li2qaHkDCw9SfMw82Ldr6OC9Je1aXiGfhx2W8p3GaoeaGrPJTUN9NirTM/KTxHWMUdR1rsUg=="
+    },
     "node_modules/cytoscape": {
       "version": "3.30.4",
       "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.30.4.tgz",
@@ -7904,6 +7924,11 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-2.2.4.tgz",
       "integrity": "sha512-lBHj60ezci2u1v2FqnZIraShGgEXq35qCzMv4lITyHGppTnA13rwR0MgwyNJh9TnDs3aXUvd1xjAotfraMHX/Q=="
     },
+    "node_modules/js-base64": {
+      "version": "3.7.7",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.7.tgz",
+      "integrity": "sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw=="
+    },
     "node_modules/js-cookie": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
@@ -8157,6 +8182,46 @@
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
+    "node_modules/lodash._baseiteratee": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash._baseiteratee/-/lodash._baseiteratee-4.7.0.tgz",
+      "integrity": "sha512-nqB9M+wITz0BX/Q2xg6fQ8mLkyfF7MU7eE+MNBNjTHFKeKaZAPEzEg+E8LWxKWf1DQVflNEn9N49yAuqKh2mWQ==",
+      "dependencies": {
+        "lodash._stringtopath": "~4.8.0"
+      }
+    },
+    "node_modules/lodash._basetostring": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-4.12.0.tgz",
+      "integrity": "sha512-SwcRIbyxnN6CFEEK4K1y+zuApvWdpQdBHM/swxP962s8HIxPO3alBH5t3m/dl+f4CMUug6sJb7Pww8d13/9WSw=="
+    },
+    "node_modules/lodash._baseuniq": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz",
+      "integrity": "sha512-Ja1YevpHZctlI5beLA7oc5KNDhGcPixFhcqSiORHNsp/1QTv7amAXzw+gu4YOvErqVlMVyIJGgtzeepCnnur0A==",
+      "dependencies": {
+        "lodash._createset": "~4.0.0",
+        "lodash._root": "~3.0.0"
+      }
+    },
+    "node_modules/lodash._createset": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/lodash._createset/-/lodash._createset-4.0.3.tgz",
+      "integrity": "sha512-GTkC6YMprrJZCYU3zcqZj+jkXkrXzq3IPBcF/fIPpNEAB4hZEtXU8zp/RwKOvZl43NUmwDbyRk3+ZTbeRdEBXA=="
+    },
+    "node_modules/lodash._root": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz",
+      "integrity": "sha512-O0pWuFSK6x4EXhM1dhZ8gchNtG7JMqBtrHdoUFUWXD7dJnNSUze1GuyQr5sOs0aCvgGeI3o/OJW8f4ca7FDxmQ=="
+    },
+    "node_modules/lodash._stringtopath": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/lodash._stringtopath/-/lodash._stringtopath-4.8.0.tgz",
+      "integrity": "sha512-SXL66C731p0xPDC5LZg4wI5H+dJo/EO4KTqOMwLYCH3+FmmfAKJEZCm6ohGpI+T1xwsDsJCfL4OnhorllvlTPQ==",
+      "dependencies": {
+        "lodash._basetostring": "~4.12.0"
+      }
+    },
     "node_modules/lodash.clonedeep": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
@@ -8183,6 +8248,20 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
+    "node_modules/lodash.uniqby": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.5.0.tgz",
+      "integrity": "sha512-IRt7cfTtHy6f1aRVA5n7kT8rgN3N1nH6MOWLcHfpWG2SH19E3JksLK38MktLxZDhlAjCP9jpIXkOnRXlu6oByQ==",
+      "dependencies": {
+        "lodash._baseiteratee": "~4.7.0",
+        "lodash._baseuniq": "~4.6.0"
+      }
+    },
     "node_modules/longest-streak": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
@@ -10753,6 +10832,21 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proper-lockfile": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.2.tgz",
+      "integrity": "sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "retry": "^0.12.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
+    "node_modules/proper-lockfile/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
+    },
     "node_modules/property-expr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
@@ -10805,6 +10899,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -11791,6 +11890,11 @@
       "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
       "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
     },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+    },
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -11835,6 +11939,14 @@
       "integrity": "sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==",
       "deprecated": "https://github.com/lydell/resolve-url#deprecated"
     },
+    "node_modules/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -13053,6 +13165,34 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
+    "node_modules/tus-js-client": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/tus-js-client/-/tus-js-client-4.2.3.tgz",
+      "integrity": "sha512-UkQUCeDWKh5AwArcasIJWcL5EP66XPypKQtsdPu82wNnTea8eAUHdpDx3DcfZgDERAiCII895zMYkXri4M1wzw==",
+      "dependencies": {
+        "buffer-from": "^1.1.2",
+        "combine-errors": "^3.0.3",
+        "is-stream": "^2.0.0",
+        "js-base64": "^3.7.2",
+        "lodash.throttle": "^4.1.1",
+        "proper-lockfile": "^4.1.2",
+        "url-parse": "^1.5.7"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tus-js-client/node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -13427,6 +13567,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "node_modules/use-callback-ref": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",

package.json

@@ -131,6 +131,7 @@
     "swiper": "^11.1.15",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
+    "tus-js-client": "^4.2.3",
     "use-places-autocomplete": "^4.0.1",
     "vaul": "^0.9.1",
     "yup": "^1.6.1",

service/auth.ts

@@ -1,3 +1,4 @@
+import qs from "qs";
 import { getAPIDummy } from "./http-config/axiosCustom";
 import { httpPost } from "./http-config/http-base-service";
 import {
@@ -8,7 +9,10 @@ import {
 
 export async function login(data: any) {
   const pathUrl = "signin";
-  return httpPost(pathUrl, data);
+  const headers = {
+    'content-type': 'application/x-www-form-urlencoded',
+  };
+  return httpPost(pathUrl, headers, qs.stringify(data));
 }
 
 export async function getProfile(token: any) {

service/http-config/axios-interceptor-instance.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 import Cookies from "js-cookie";
-import { login } from "../login-services";
+import { login } from "../auth";
 
 const baseURL = "https://netidhub.com/api/";
 
@@ -39,14 +39,17 @@ axiosInterceptorInstance.interceptors.response.use(
     if (error.response.status === 401 && !originalRequest._retry) {
       originalRequest._retry = true;
       const data = {
-        refreshToken: refreshToken,
         grant_type: "refresh_token",
+        refresh_token: refreshToken,
         client_id: "mediahub-app",
       };
+      console.log("refresh token ", data);
       const res = await login(data);
-      if (res.data?.data?.access_token) {
+      const { access_token } = res.data;
-        Cookies.set("access_token", res.data.data.access_token);
+      const { refresh_token } = res.data;
-        Cookies.set("refresh_token", res.data.data.refresh_token);
+      if (access_token) {
+        Cookies.set("access_token", access_token);
+        Cookies.set("refresh_token", refresh_token);
         return axiosInterceptorInstance(originalRequest);
       }
     }