diff --git a/frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx b/frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx index aaaae3a..be704f9 100644 --- a/frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx +++ b/frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx @@ -20,6 +20,7 @@ export default function ImageUploadFolderForm({ const memberId = profile?.id || 0; const [files, setFiles] = useState([]); + const [inputKey, setInputKey] = useState(0); const [isDragging, setIsDragging] = useState(false); const [isUploading, setIsUploading] = useState(false); const [isUploaded, setIsUploaded] = useState(false); @@ -44,8 +45,6 @@ export default function ImageUploadFolderForm({ if (newFiles) { setFiles((prevFiles) => [...prevFiles, ...Array.from(newFiles)]); } - - event.target.value = ''; }; const handleDragOver = (event: React.DragEvent) => { @@ -62,8 +61,9 @@ export default function ImageUploadFolderForm({ setIsDragging(false); }; - const handleRemoveFile = (index: number) => { - setFiles(files.filter((_, i) => i != index)); + const handleRemoveFile = () => { + setFiles([]); + setInputKey((prevKey) => prevKey + 1); }; const handleUpload = async () => { @@ -101,6 +101,7 @@ export default function ImageUploadFolderForm({ )} > )} {files.length > 0 && ( -
    - {files.map((file, index) => ( -
  • - {file.webkitRelativePath || file.name} - {isUploading ? ( -
    - {isUploaded ? ( - - ) : isFailed ? ( - - ) : ( - - )} -
    +
    + + {files[0].webkitRelativePath.substring(0, files[0].webkitRelativePath.indexOf('/'))} {} + + {isUploading ? ( +
    + {isUploaded ? ( + + ) : isFailed ? ( + ) : ( - + )} -
  • - ))} -
+ + ) : ( + + )} + )} {isUploading ? (