Fix: 같은 폴더 다시 추가하면 선택 안되는 문제 수정, 파일 목록 대신 폴더 이름만 보이도록 변경

This commit is contained in:
홍창기 2024-09-30 14:11:54 +09:00
parent db5d243fb1
commit 8fbc2b9221

View File

@ -20,6 +20,7 @@ export default function ImageUploadFolderForm({
const memberId = profile?.id || 0;
const [files, setFiles] = useState<File[]>([]);
const [inputKey, setInputKey] = useState<number>(0);
const [isDragging, setIsDragging] = useState<boolean>(false);
const [isUploading, setIsUploading] = useState<boolean>(false);
const [isUploaded, setIsUploaded] = useState<boolean>(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<HTMLDivElement>) => {
@ -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({
)}
>
<input
key={inputKey}
type="file"
webkitdirectory=""
// multiple
@ -122,13 +123,10 @@ export default function ImageUploadFolderForm({
</div>
)}
{files.length > 0 && (
<ul className="m-0 max-h-[260px] list-none overflow-y-auto p-0">
{files.map((file, index) => (
<li
key={index}
className="flex items-center justify-between p-1"
>
<span className="truncate">{file.webkitRelativePath || file.name}</span>
<div className={'flex items-center justify-between p-1'}>
<span className="truncate">
{files[0].webkitRelativePath.substring(0, files[0].webkitRelativePath.indexOf('/'))} {}
</span>
{isUploading ? (
<div className="p-2">
{isUploaded ? (
@ -154,7 +152,7 @@ export default function ImageUploadFolderForm({
) : (
<button
className={'cursor-pointer p-2'}
onClick={() => handleRemoveFile(index)}
onClick={handleRemoveFile}
>
<X
color="red"
@ -163,9 +161,7 @@ export default function ImageUploadFolderForm({
/>
</button>
)}
</li>
))}
</ul>
</div>
)}
{isUploading ? (
<Button