Refactor: 파일 업로드 presinged 수정
This commit is contained in:
정현조
parent
aa2619e93d
commit
532303e777
@ -5,6 +5,7 @@ import useAuthStore from '@/stores/useAuthStore';
|
||||
import { CircleCheckBig, CircleDashed, CircleX, X } from 'lucide-react';
|
||||
import { FixedSizeList } from 'react-window';
|
||||
import useUploadFiles from '@/hooks/useUploadFiles';
|
||||
import useUploadImagePresignedQuery from '@/queries/images/useUploadImagePresignedQuery';
|
||||
import { unzipFilesWithPath, extractFilesRecursivelyWithPath } from '@/utils/fileUtils';
|
||||
|
||||
interface ImagePreSignedFormProps {
|
||||
@ -34,9 +35,11 @@ export default function ImagePreSignedForm({
|
||||
const [isUploaded, setIsUploaded] = useState<boolean>(false);
|
||||
const [isFailed, setIsFailed] = useState<boolean>(false);
|
||||
const [progress, setProgress] = useState<number>(0);
|
||||
const [uploadStatus, setUploadStatus] = useState<(boolean | null)[]>([]);
|
||||
|
||||
// Ensure to destructure the uploadFiles function properly from the hook
|
||||
const { uploadFiles } = useUploadFiles();
|
||||
|
||||
const uploadImageFile = useUploadImagePresignedQuery();
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
setFiles([]);
|
||||
@ -45,6 +48,7 @@ export default function ImagePreSignedForm({
|
||||
setIsUploaded(false);
|
||||
setIsFailed(false);
|
||||
setProgress(0);
|
||||
setUploadStatus([]);
|
||||
};
|
||||
|
||||
const handleRefetch = () => {
|
||||
@ -65,6 +69,7 @@ export default function ImagePreSignedForm({
|
||||
}
|
||||
|
||||
setFiles((prevFiles) => [...prevFiles, ...processedFiles]);
|
||||
setUploadStatus((prevStatus) => [...prevStatus, ...processedFiles.map(() => null)]);
|
||||
}
|
||||
|
||||
event.target.value = '';
|
||||
@ -103,6 +108,7 @@ export default function ImagePreSignedForm({
|
||||
}
|
||||
|
||||
setFiles((prevFiles) => [...prevFiles, ...processedFiles]);
|
||||
setUploadStatus((prevStatus) => [...prevStatus, ...processedFiles.map(() => null)]);
|
||||
} else {
|
||||
const droppedFiles = event.dataTransfer.files;
|
||||
if (droppedFiles) {
|
||||
@ -111,12 +117,14 @@ export default function ImagePreSignedForm({
|
||||
processedFiles.push({ path: file.name, file });
|
||||
}
|
||||
setFiles((prevFiles) => [...prevFiles, ...processedFiles]);
|
||||
setUploadStatus((prevStatus) => [...prevStatus, ...processedFiles.map(() => null)]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveFile = (index: number) => {
|
||||
setFiles(files.filter((_, i) => i !== index));
|
||||
setUploadStatus((prevStatus) => prevStatus.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const handleUpload = async () => {
|
||||
@ -138,21 +146,54 @@ export default function ImagePreSignedForm({
|
||||
}
|
||||
}
|
||||
|
||||
if (uploadType === 'file') {
|
||||
uploadImageFile.mutate(
|
||||
{
|
||||
memberId,
|
||||
projectId,
|
||||
folderId,
|
||||
files: finalFiles.map(({ file }) => file), // Extract only the file
|
||||
progressCallback: (index: number) => {
|
||||
setUploadStatus((prevStatus) => {
|
||||
const newStatus = [...prevStatus];
|
||||
newStatus[index] = true; // Mark as uploaded
|
||||
return newStatus;
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
handleRefetch();
|
||||
setIsUploaded(true);
|
||||
},
|
||||
onError: () => {
|
||||
setIsFailed(true);
|
||||
setUploadStatus((prevStatus) => prevStatus.map((status) => (status === null ? false : status)));
|
||||
},
|
||||
}
|
||||
);
|
||||
} else {
|
||||
try {
|
||||
await uploadFiles({
|
||||
files: finalFiles,
|
||||
files: finalFiles, // Pass the files with path and file
|
||||
projectId,
|
||||
folderId,
|
||||
memberId,
|
||||
onProgress: (progressValue) => setProgress(progressValue),
|
||||
onProgress: (progressValue: number) => {
|
||||
setProgress(progressValue);
|
||||
},
|
||||
});
|
||||
|
||||
setUploadStatus(finalFiles.map(() => true));
|
||||
setIsUploaded(true);
|
||||
handleRefetch();
|
||||
} catch (error) {
|
||||
setIsFailed(true);
|
||||
setUploadStatus(finalFiles.map(() => false));
|
||||
console.error('업로드 실패:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@ -176,7 +217,7 @@ export default function ImagePreSignedForm({
|
||||
type="file"
|
||||
webkitdirectory={uploadType === 'folder' ? '' : undefined}
|
||||
multiple={uploadType !== 'zip'}
|
||||
accept={uploadType === 'zip' ? '.zip' : undefined}
|
||||
accept={uploadType === 'zip' ? '.zip' : uploadType === 'file' ? '.jpg,.jpeg,.png' : undefined}
|
||||
className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
|
||||
onChange={handleChange}
|
||||
/>
|
||||
@ -212,13 +253,13 @@ export default function ImagePreSignedForm({
|
||||
<span className="truncate">{files[index].path}</span>
|
||||
{isUploading ? (
|
||||
<div className="p-2">
|
||||
{isUploaded ? (
|
||||
{uploadStatus[index] === true ? (
|
||||
<CircleCheckBig
|
||||
className="stroke-green-500"
|
||||
size={16}
|
||||
strokeWidth="2"
|
||||
/>
|
||||
) : isFailed ? (
|
||||
) : uploadStatus[index] === false ? (
|
||||
<CircleX
|
||||
className="stroke-red-500"
|
||||
size={16}
|
||||
|
||||
@ -8,12 +8,6 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from '../ui/dropdown-menu';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
|
||||
import ImageUploadForm from '../ImageUploadModal/ImageUploadForm';
|
||||
import ImageUploadPresignedForm from '../ImageUploadPresignedModal/ImageUploadPresignedForm';
|
||||
import useUploadImageFileQuery from '@/queries/projects/useUploadImageFileQuery';
|
||||
import useUploadImageFolderFileQuery from '@/queries/projects/useUploadImageFolderFileQuery';
|
||||
import useUploadImageZipQuery from '@/queries/projects/useUploadImageZipQuery';
|
||||
import useUploadImageFolderQuery from '@/queries/projects/useUploadImageFolderQuery';
|
||||
import ImagePreSignedForm from '../ImagePreSignedForm';
|
||||
|
||||
export default function WorkspaceDropdownMenu({
|
||||
@ -25,25 +19,11 @@ export default function WorkspaceDropdownMenu({
|
||||
folderId: number;
|
||||
onRefetch: () => void;
|
||||
}) {
|
||||
const [isOpenUploadFile, setIsOpenUploadFile] = React.useState<boolean>(false);
|
||||
const [isOpenUpload, setIsOpenUpload] = React.useState<boolean>(false);
|
||||
const [fileCount, setFileCount] = React.useState<number>(0);
|
||||
const [isOpenUploadPresigned, setIsOpenUploadPresigned] = React.useState<boolean>(false);
|
||||
const [presignedCount, setPresignedCount] = React.useState<number>(0);
|
||||
const [isOpenUploadFolderFile, setIsOpenUploadFolderFile] = React.useState<boolean>(false);
|
||||
const [isOpenUploadFolder, setIsOpenUploadFolder] = React.useState<boolean>(false);
|
||||
const [isOpenUploadZip, setIsOpenUploadZip] = React.useState<boolean>(false);
|
||||
const [isOpenTestUpload, setIsOpenTestUpload] = React.useState<boolean>(false);
|
||||
const [uploadType, setUploadType] = React.useState<'file' | 'folder' | 'zip'>('file');
|
||||
|
||||
const uploadImageZipMutation = useUploadImageZipQuery();
|
||||
const uploadImageFolderFileMutation = useUploadImageFolderFileQuery();
|
||||
const uploadImageFileMutation = useUploadImageFileQuery();
|
||||
const uploadImageFolderMutation = useUploadImageFolderQuery();
|
||||
|
||||
const handleCloseUploadFile = () => setIsOpenUploadFile(false);
|
||||
const handleCloseUploadFolderFile = () => setIsOpenUploadFolderFile(false);
|
||||
const handleCloseUploadFolder = () => setIsOpenUploadFolder(false);
|
||||
const handleCloseUploadZip = () => setIsOpenUploadZip(false);
|
||||
const handleCloseTestUpload = () => setIsOpenTestUpload(false);
|
||||
const handleCloseUpload = () => setIsOpenUpload(false);
|
||||
|
||||
const handleFileCount = (fileCount: number) => {
|
||||
setFileCount(fileCount);
|
||||
@ -56,148 +36,59 @@ export default function WorkspaceDropdownMenu({
|
||||
<Menu size={16} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56">
|
||||
<DropdownMenuItem onClick={() => console.log('프로젝트 이름 수정')}>프로젝트 이름 수정</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setUploadType('file');
|
||||
setIsOpenUpload(true);
|
||||
}}
|
||||
>
|
||||
파일 업로드
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={() => setIsOpenUploadFile(true)}>파일 업로드</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setIsOpenUploadPresigned(true)}>
|
||||
파일 업로드 (PresignedUrl 이용)
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setUploadType('folder');
|
||||
setIsOpenUpload(true);
|
||||
}}
|
||||
>
|
||||
폴더 업로드
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setIsOpenUploadFolderFile(true)}>
|
||||
폴더 업로드 (파일 업로드 API 이용)
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setUploadType('zip');
|
||||
setIsOpenUpload(true);
|
||||
}}
|
||||
>
|
||||
압축 파일 업로드
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setIsOpenUploadFolder(true)}>
|
||||
폴더 업로드 (백엔드 구현 필요)
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setIsOpenUploadZip(true)}>폴더 압축파일 업로드</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setIsOpenTestUpload(true)}>
|
||||
테스트 업로드 (PresignedUrl 이용)
|
||||
</DropdownMenuItem>{' '}
|
||||
{/* 새로운 메뉴 항목 추가 */}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{/* 기존 Dialogs */}
|
||||
<Dialog
|
||||
open={isOpenUploadFile}
|
||||
onOpenChange={setIsOpenUploadFile}
|
||||
>
|
||||
<DialogTrigger asChild></DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader title={fileCount > 0 ? `파일 업로드 (${fileCount})` : '파일 업로드'} />
|
||||
<ImageUploadForm
|
||||
onClose={handleCloseUploadFile}
|
||||
onRefetch={onRefetch}
|
||||
onFileCount={(fileCount: number) => setFileCount(fileCount)}
|
||||
projectId={projectId}
|
||||
folderId={folderId}
|
||||
uploadImageZipMutation={uploadImageZipMutation}
|
||||
uploadImageFolderFileMutation={uploadImageFolderFileMutation}
|
||||
uploadImageFileMutation={uploadImageFileMutation}
|
||||
uploadImageFolderMutation={uploadImageFolderMutation}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
open={isOpenUploadPresigned}
|
||||
onOpenChange={setIsOpenUploadPresigned}
|
||||
open={isOpenUpload}
|
||||
onOpenChange={setIsOpenUpload}
|
||||
>
|
||||
<DialogTrigger asChild></DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader
|
||||
title={presignedCount > 0 ? `파일 업로드 PreSigned (${presignedCount})` : '파일 업로드 PreSigned'}
|
||||
title={
|
||||
fileCount > 0
|
||||
? `파일 업로드 (${fileCount})`
|
||||
: uploadType === 'file'
|
||||
? '파일 업로드'
|
||||
: uploadType === 'folder'
|
||||
? '폴더 업로드'
|
||||
: '압축 파일 업로드'
|
||||
}
|
||||
/>
|
||||
<ImageUploadPresignedForm
|
||||
onClose={() => setIsOpenUploadPresigned(false)}
|
||||
onRefetch={onRefetch}
|
||||
onFileCount={(fileCount: number) => setPresignedCount(fileCount)}
|
||||
projectId={projectId}
|
||||
folderId={folderId}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
open={isOpenUploadFolderFile}
|
||||
onOpenChange={setIsOpenUploadFolderFile}
|
||||
>
|
||||
<DialogTrigger asChild></DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader title="폴더 업로드 (파일 업로드 API 이용)" />
|
||||
<ImageUploadForm
|
||||
onClose={handleCloseUploadFolderFile}
|
||||
onRefetch={onRefetch}
|
||||
onFileCount={handleFileCount}
|
||||
projectId={projectId}
|
||||
folderId={folderId}
|
||||
isFolderUpload={true}
|
||||
uploadImageZipMutation={uploadImageZipMutation}
|
||||
uploadImageFolderFileMutation={uploadImageFolderFileMutation}
|
||||
uploadImageFileMutation={uploadImageFileMutation}
|
||||
uploadImageFolderMutation={uploadImageFolderMutation}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
open={isOpenUploadFolder}
|
||||
onOpenChange={setIsOpenUploadFolder}
|
||||
>
|
||||
<DialogTrigger asChild></DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader title="폴더 업로드 (백엔드 구현 필요)" />
|
||||
<ImageUploadForm
|
||||
onClose={handleCloseUploadFolder}
|
||||
onRefetch={onRefetch}
|
||||
onFileCount={handleFileCount}
|
||||
projectId={projectId}
|
||||
folderId={folderId}
|
||||
isFolderBackendUpload={true}
|
||||
uploadImageZipMutation={uploadImageZipMutation}
|
||||
uploadImageFolderFileMutation={uploadImageFolderFileMutation}
|
||||
uploadImageFileMutation={uploadImageFileMutation}
|
||||
uploadImageFolderMutation={uploadImageFolderMutation}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
open={isOpenUploadZip}
|
||||
onOpenChange={setIsOpenUploadZip}
|
||||
>
|
||||
<DialogTrigger asChild></DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader title="폴더 압축파일 업로드" />
|
||||
<ImageUploadForm
|
||||
onClose={handleCloseUploadZip}
|
||||
onRefetch={onRefetch}
|
||||
onFileCount={handleFileCount}
|
||||
projectId={projectId}
|
||||
folderId={folderId}
|
||||
isZipUpload={true}
|
||||
uploadImageZipMutation={uploadImageZipMutation}
|
||||
uploadImageFolderFileMutation={uploadImageFolderFileMutation}
|
||||
uploadImageFileMutation={uploadImageFileMutation}
|
||||
uploadImageFolderMutation={uploadImageFolderMutation}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 테스트 업로드 Dialog */}
|
||||
<Dialog
|
||||
open={isOpenTestUpload}
|
||||
onOpenChange={setIsOpenTestUpload}
|
||||
>
|
||||
<DialogTrigger asChild></DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader title="테스트 업로드 (PresignedUrl 이용)" />
|
||||
<ImagePreSignedForm
|
||||
onClose={handleCloseTestUpload}
|
||||
onClose={handleCloseUpload}
|
||||
onRefetch={onRefetch}
|
||||
onFileCount={(fileCount: number) => setFileCount(fileCount)}
|
||||
onFileCount={handleFileCount}
|
||||
projectId={projectId}
|
||||
folderId={folderId}
|
||||
uploadType="folder" // zip flie 가능
|
||||
uploadType={uploadType}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user