diff --git a/src/components/Uploader/FileUploader.tsx b/src/components/Uploader/FileUploader.tsx index 80e411b5..de81cfd5 100644 --- a/src/components/Uploader/FileUploader.tsx +++ b/src/components/Uploader/FileUploader.tsx @@ -1,8 +1,10 @@ import React from 'react'; import { useDropzone } from 'react-dropzone'; +import toast from 'react-hot-toast'; import { Typography } from '@mui/material'; import { VscNewFile } from 'react-icons/vsc'; +import { FILE, MAX_FILE_SIZE } from '@constants/apiResponseMessage'; import FileUploadListTable from './FileUploadList'; interface FileUploaderProps { @@ -24,7 +26,45 @@ const FileUploader = ({ setFilesToAdd((prevFiles) => [...prevFiles, ...acceptedFiles]); }; - const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop }); + const onDropRejected = (rejectedFiles: { file: File; errors: { code: string }[] }[]) => { + rejectedFiles.forEach(({ errors }) => { + errors.forEach((error) => { + if (error.code === 'file-too-large') { + toast.error(FILE.error.exceedFileSize, { + style: { + maxWidth: 1500, + }, + }); + } else if (error.code === 'file-invalid-type') { + toast.error(FILE.error.disallowedFileExtension, { + style: { + maxWidth: 1500, + }, + }); + } + }); + }); + }; + + const { getRootProps, getInputProps, isDragActive } = useDropzone({ + onDrop, + onDropRejected, + maxSize: MAX_FILE_SIZE, + accept: { + 'image/jpg': ['.jpg', '.jpeg', '.png', '.gif', '.svg', '.bmp', '.ico'], + 'video/mp4': ['.mp4'], + 'audio/mp3': ['.mp3'], + 'audio/wav': ['.wav'], + 'text/plain': ['.txt'], + 'application/pdf': ['.pdf'], + 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.doc', '.docx'], + 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xls', '.xlsx'], + 'application/vnd.openxmlformats-officedocument.presentationml.presentation': ['.ppt', '.pptx'], + 'application/zip': ['.zip'], + 'application/x-7z-compressed': ['.7z'], + 'application/vnd.hancom.hwpx': ['.hwp', '.hwpx'], + }, + }); const handleDeleteUploadFileClick = (fileName: string, fileId?: number) => { if (fileId && setFileIdsToDelete && setExistingFiles) { @@ -53,7 +93,13 @@ const FileUploader = ({ - 클릭 또는 드래그하여 파일을 첨부하세요 + + 클릭 또는 드래그하여 파일을 첨부하세요 + + 지원하는 파일: .jpg, .jpeg, .png, .gif, .svg, .mp4, .mp3, .txt, .pdf, .docx, .xlsx, .pptx, .zip, .7z, + .hwpx, etc. + + diff --git a/src/constants/apiResponseMessage.ts b/src/constants/apiResponseMessage.ts index e05fd888..4d9979fb 100644 --- a/src/constants/apiResponseMessage.ts +++ b/src/constants/apiResponseMessage.ts @@ -64,5 +64,6 @@ export const FILE = { error: { uploadFail: '업로드가 실패하였습니다.', exceedFileSize: `파일이 제한된 크기(${formatFileSize(MAX_FILE_SIZE)})를 초과하였습니다.`, + disallowedFileExtension: '해당 파일 확장자는 허용되지 않습니다.', }, } as const;