diff --git a/components/form/content/image-form.tsx b/components/form/content/image-form.tsx index 9b92a0c6..8e8edb02 100644 --- a/components/form/content/image-form.tsx +++ b/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([]); + let uploadPersen = 0; + const [isStartUpload, setIsStartUpload] = useState(false); + const [counterProgress, setCounterProgress] = useState(0); const [files, setFiles] = useState([]); @@ -353,28 +361,58 @@ export default function FormImage() { isYoutube: false, isInternationalMedia: false, }; + + let id = Cookies.get('idCreate'); - const response = await createMedia(requestData); - console.log("Form Data Submitted:", requestData); - - if (response?.error) { - MySwal.fire("Error", response?.message, "error"); - return; - } - - const imageId = response?.data?.data.id; - if (imageId && thumbnail) { - const formMedia = new FormData(); - formMedia.append("file", thumbnail); - - const responseThumbnail = await uploadThumbnail(imageId, formMedia); - - if (responseThumbnail?.error) { - MySwal.fire("Error", responseThumbnail?.message, "error"); + if (id == undefined) { + const response = await createMedia(requestData); + console.log("Form Data Submitted:", requestData); + + if (response?.error) { + MySwal.fire("Error", response?.message, "error"); return; } + Cookies.set('idCreate', response?.data.data, { expires: 1 }); + id = response?.data?.data; + + // Upload Thumbnail + if (fileTypeId == '1') { + const formMedia = new FormData(); + formMedia.append('file', files[0]); + const responseThumbnail = await uploadThumbnail( + formMedia, + id, + ); + if (responseThumbnail?.error == true) { + 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"); MySwal.fire({ @@ -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) => { const file = e.target.files?.[0]; if (file) { diff --git a/package-lock.json b/package-lock.json index 15eef23e..8d683e4b 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 71c8239a..e7554270 100644 --- a/package.json +++ b/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", diff --git a/service/auth.ts b/service/auth.ts index 476c2bb1..97dc3248 100644 --- a/service/auth.ts +++ b/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) { diff --git a/service/http-config/axios-interceptor-instance.ts b/service/http-config/axios-interceptor-instance.ts index 51fcb1e9..1c360122 100644 --- a/service/http-config/axios-interceptor-instance.ts +++ b/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) { - Cookies.set("access_token", res.data.data.access_token); - Cookies.set("refresh_token", res.data.data.refresh_token); + const { access_token } = res.data; + const { refresh_token } = res.data; + if (access_token) { + Cookies.set("access_token", access_token); + Cookies.set("refresh_token", refresh_token); return axiosInterceptorInstance(originalRequest); } }