Feat: 업로드 완료 또는 실패 시 닫기 버튼 추가

This commit is contained in:
홍창기 2024-09-22 04:15:01 +09:00
parent 5fde35a619
commit 1236c080f5
No known key found for this signature in database
GPG Key ID: 9FF142041B4A91B9
3 changed files with 83 additions and 41 deletions

View File

@ -60,5 +60,8 @@ export async function uploadImageFolder(memberId: number, projectId: number, fil
params: { memberId },
}
)
.then(({ data }) => data);
.then(({ data }) => data)
.catch((error) => {
return Promise.reject(error);
});
}

View File

@ -4,13 +4,27 @@ import { cn } from '@/lib/utils';
import { uploadImageFolder } from '@/api/imageApi';
import useAuthStore from '@/stores/useAuthStore';
export default function ImageFolderUploadForm({ projectId, parentId }: { projectId: number; parentId: number }) {
export default function ImageFolderUploadForm({
onClose,
projectId,
parentId,
}: {
onClose: () => void;
projectId: number;
parentId: number;
}) {
const profile = useAuthStore((state) => state.profile);
const memberId = profile?.id || 0;
const [files, setFiles] = useState<File[]>([]);
const [isDragging, setIsDragging] = useState<boolean>(false);
const [isUploading, setIsUploading] = useState<boolean>(false);
const [progress, setProgress] = useState<number>(0);
const [isFailed, setIsFailed] = useState<boolean>(false);
const handleClose = () => {
onClose();
};
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const newFiles = event.target.files;
@ -34,55 +48,79 @@ export default function ImageFolderUploadForm({ projectId, parentId }: { project
setIsDragging(false);
};
const handleClick = async () => {
const handleUpload = async () => {
setIsUploading(true);
await uploadImageFolder(memberId, projectId, files, parentId);
setFiles([]);
setIsUploading(false);
setProgress(0);
await uploadImageFolder(memberId, projectId, files, parentId)
.then(() => {
setProgress(100);
})
.catch(() => {
setProgress(100);
setIsFailed(true);
});
};
return (
<div className="flex flex-col gap-5">
<div
className={cn(
'relative flex h-[200px] w-full cursor-pointer items-center justify-center rounded-lg border-2 text-center',
isDragging ? 'border-solid border-primary bg-blue-200' : 'border-dashed border-gray-500 bg-gray-100'
)}
>
<input
type="file"
webkitdirectory=""
multiple
className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
onChange={handleChange}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
/>
{isDragging ? (
<p className="text-primary"> </p>
) : (
<p className="text-gray-500">
<br />
</p>
)}
</div>
{!isUploading && (
<div
className={cn(
'relative flex h-[200px] w-full cursor-pointer items-center justify-center rounded-lg border-2 text-center',
isDragging ? 'border-solid border-primary bg-blue-200' : 'border-dashed border-gray-500 bg-gray-100'
)}
>
<input
type="file"
webkitdirectory=""
// multiple
className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
onChange={handleChange}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
/>
{isDragging ? (
<p className="text-primary"> </p>
) : (
<p className="text-gray-500">
<br />
</p>
)}
</div>
)}
{files.length > 0 && (
<ul>
{files.map((file, index) => (
<li key={index}>{file.webkitRelativePath}</li>
<li key={index}>{file.webkitRelativePath || file.name}</li>
))}
</ul>
)}
<Button
onClick={handleClick}
variant="outlinePrimary"
disabled={files.length === 0 || isDragging || isUploading}
>
{isUploading ? `업로드 중... 0%` : '업로드'}
</Button>
{isUploading ? (
<Button
onClick={handleClose}
variant="outlinePrimary"
className={
isFailed
? 'border-red-500 text-red-500 hover:bg-red-500 dark:border-red-500 dark:text-red-500 dark:hover:bg-red-500'
: ''
}
disabled={progress != 100}
>
{progress === 100 ? (isFailed ? '업로드 실패 (닫기)' : '업로드 완료 (닫기)') : `업로드 중... ${progress}%`}
</Button>
) : (
<Button
onClick={handleUpload}
variant="outlinePrimary"
disabled={files.length === 0}
>
</Button>
)}
</div>
);
}

View File

@ -7,7 +7,7 @@ export default function WorkSpaceCreateModal({ projectId, parentId = 0 }: { proj
const [isOpen, setIsOpen] = React.useState(false);
const handleOpen = () => setIsOpen(true);
// const handleClose = () => setIsOpen(false);
const handleClose = () => setIsOpen(false);
return (
<Dialog
@ -25,6 +25,7 @@ export default function WorkSpaceCreateModal({ projectId, parentId = 0 }: { proj
<DialogContent className="max-w-2xl">
<DialogHeader title="폴더 업로드" />
<ImageFolderUploadForm
onClose={handleClose}
projectId={projectId}
parentId={parentId}
/>