jhynsoo/worlabel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'fe/fix/image-upload' into 'fe/develop'

Browse Source 
Fix: 이미지 업로드 시 같은 파일이 다시 선택 안되는 현상 수정, 이미지 업로드 시작 후 제거 버튼 대신 상태 아이콘 나오도록 변경

See merge request s11-s-project/S11P21S002!166
This commit is contained in:
정현조 2024-09-25 09:58:10 +09:00
commit 27c5dbc2b8
3 changed files with 111 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/components/ImageUploadFileModal/ImageUploadFileForm.tsx
View File

@ -2,7 +2,7 @@ import { useState } from 'react';
import { Button } from '../ui/button';
import { cn } from '@/lib/utils';
import useAuthStore from '@/stores/useAuthStore';
import { X } from 'lucide-react';
import { CircleCheckBig, CircleDashed, CircleX, X } from 'lucide-react';
import useUploadImageFileQuery from '@/queries/projects/useUploadImageFileQuery';
export default function ImageUploadFileForm({
@ -40,6 +40,8 @@ export default function ImageUploadFileForm({
setFiles((prevFiles) => [...prevFiles, ...newImages]);
}
event.target.value = '';
};
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
@ -120,6 +122,29 @@ export default function ImageUploadFileForm({
className={cn('flex items-center justify-between p-1')}
>
<span className="truncate">{file.webkitRelativePath || file.name}</span>
{isUploading ? (
<div className="p-2">
{isUploaded ? (
<CircleCheckBig
className="stroke-green-500"
size={20}
strokeWidth="2"
/>
) : isFailed ? (
<CircleX
className="stroke-red-500"
size={20}
strokeWidth="2"
/>
) : (
<CircleDashed
className="stroke-gray-500"
size={20}
strokeWidth="2"
/>
)}
</div>
) : (
<button
className={'cursor-pointer p-2'}
onClick={() => handleRemoveFile(index)}
@ -130,6 +155,7 @@ export default function ImageUploadFileForm({
strokeWidth="2"
/>
</button>
)}
</li>
))}
</ul>

28
frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx
View File

@ -2,7 +2,7 @@ import { useState } from 'react';
import { Button } from '../ui/button';
import { cn } from '@/lib/utils';
import useAuthStore from '@/stores/useAuthStore';
import { X } from 'lucide-react';
import { CircleCheckBig, CircleDashed, CircleX, X } from 'lucide-react';
import useUploadImageFolderQuery from '@/queries/projects/useUploadImageFolderQuery';
export default function ImageUploadFolderForm({ onClose, projectId }: { onClose: () => void; projectId: number }) {
@ -27,6 +27,8 @@ export default function ImageUploadFolderForm({ onClose, projectId }: { onClose:
if (newFiles) {
setFiles((prevFiles) => [...prevFiles, ...Array.from(newFiles)]);
}
event.target.value = '';
};
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
@ -105,6 +107,29 @@ export default function ImageUploadFolderForm({ onClose, projectId }: { onClose:
className={cn('flex items-center justify-between p-1')}
>
<span className="truncate">{file.webkitRelativePath || file.name}</span>
{isUploading ? (
<div className="p-2">
{isUploaded ? (
<CircleCheckBig
className="stroke-green-500"
size={20}
strokeWidth="2"
/>
) : isFailed ? (
<CircleX
className="stroke-red-500"
size={20}
strokeWidth="2"
/>
) : (
<CircleDashed
className="stroke-gray-500"
size={20}
strokeWidth="2"
/>
)}
</div>
) : (
<button
className={'cursor-pointer p-2'}
onClick={() => handleRemoveFile(index)}
@ -115,6 +140,7 @@ export default function ImageUploadFolderForm({ onClose, projectId }: { onClose:
strokeWidth="2"
/>
</button>
)}
</li>
))}
</ul>

28
frontend/src/components/ImageUploadZipModal/ImageUploadZipForm.tsx
View File

@ -2,7 +2,7 @@ import { useState } from 'react';
import { Button } from '../ui/button';
import { cn } from '@/lib/utils';
import useAuthStore from '@/stores/useAuthStore';
import { X } from 'lucide-react';
import { CircleCheckBig, CircleDashed, CircleX, X } from 'lucide-react';
import useUploadImageZipQuery from '@/queries/projects/useUploadImageZipQuery';
export default function ImageUploadZipForm({ onClose, projectId }: { onClose: () => void; projectId: number }) {
@ -27,6 +27,8 @@ export default function ImageUploadZipForm({ onClose, projectId }: { onClose: ()
if (newFiles) {
setFile(newFiles[0]);
}
event.target.value = '';
};
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
@ -103,6 +105,29 @@ export default function ImageUploadZipForm({ onClose, projectId }: { onClose: ()
{file && (
<div className={'flex items-center justify-between p-1'}>
<span className="truncate">{file.webkitRelativePath || file.name}</span>
{isUploading ? (
<div className="p-2">
{isUploaded ? (
<CircleCheckBig
className="stroke-green-500"
size={20}
strokeWidth="2"
/>
) : isFailed ? (
<CircleX
className="stroke-red-500"
size={20}
strokeWidth="2"
/>
) : (
<CircleDashed
className="stroke-gray-500"
size={20}
strokeWidth="2"
/>
)}
</div>
) : (
<button
className={'cursor-pointer p-2'}
onClick={() => handleRemoveFile()}
@ -113,6 +138,7 @@ export default function ImageUploadZipForm({ onClose, projectId }: { onClose: ()
strokeWidth="2"
/>
</button>
)}
</div>
)}
{isUploading ? (