diff --git a/apps/cs/src/pages/image/ui/image-page2.tsx b/apps/cs/src/pages/image/ui/image-page2.tsx new file mode 100644 index 000000000..2067c1332 --- /dev/null +++ b/apps/cs/src/pages/image/ui/image-page2.tsx @@ -0,0 +1,80 @@ +"use client"; + +import { Upload } from "tus-js-client"; +import { FileUploader } from "@common/components/ui"; +import { PageLayout } from "@/shared/ui/page-layout"; +import { AUTH_USER_ID, CLAIM_NAME, ENDPOINT } from "@/shared/config"; +import { getCookie } from "@/shared/lib"; + +function ImagePage() { + const handleUpload = (e: React.ChangeEvent) => { + const file = e.target.files?.item(0); + if (!file) return; + + //const p_atflCd = store.getState().upload.atflCd; // Redux 스토어에서 atflCd 가져오기 + + + const upload = new Upload(file, { + endpoint: `${ENDPOINT.ATTACH_SERVICE.TUS_UPLOAD}`, + chunkSize: 10 * 1024 * 1024, // 5MB chunk size + headers: { + [CLAIM_NAME]: getCookie(CLAIM_NAME) ?? "", + [AUTH_USER_ID]: getCookie(AUTH_USER_ID) ?? "", + }, + retryDelays: [0, 3000, 5000, 10000, 20000], + metadata: { + filename: file.name, + filetype: file.type + // atflCd: p_atflCd, + }, + onError: function (error) { + console.log("Failed because: " + error); + }, + onProgress: function (bytesUploaded, bytesTotal) { + const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2); + console.log(bytesUploaded, bytesTotal, percentage + "%"); + }, + onSuccess: function () { + console.log( + "Download %s from %s", + (upload.file as File).name, + upload.url, + ); + console.log("upload._req:", upload._req); + + if(upload._req){ + const xhr = upload._req._xhr; // 업로드에 사용된 XMLHttpRequest 객체 + const xFileInfo = xhr.getResponseHeader('X-file-info'); // X-file-info 헤더 가져오기 + if (xFileInfo) { + const fileInfo = JSON.parse(xFileInfo); + console.log('fileInfo :', fileInfo); + const downloadUrl = `${ENDPOINT.ATTACH_SERVICE.TUS_DOWNLOAD}/${fileInfo.atflId}`; + console.log('Download URL:', downloadUrl); + // store.dispatch(setAtflCd(fileInfo.atflCd)); // atflCd 저장 + } + + } + }, + }); + + upload.findPreviousUploads().then(function (previousUploads) { + if (previousUploads.length) { + upload.resumeFromPreviousUpload(previousUploads[0]!); + } + upload.start(); + }); + }; + + return ( + +
+
+

이미지 목록

+
+ +
+
+ ); +} + +export { ImagePage };