드래그&드롭 파일 드롭존 업로더

제작 과정

한 줄 요약

드래그&드롭과 클릭 선택을 모두 받고, 이미지는 썸네일로 미리보며 업로드 진행률을 보여주는 파일 업로더입니다.

이럴 때 필요해요

파일 업로드는 거의 모든 앱에 들어가지만, 기본 input[type=file]만 두면 투박하고 피드백이 부족합니다. 끌어다 놓을 수 있는 영역, 놓는 순간의 시각적 강조, 추가된 파일의 미리보기와 진행 상태가 있어야 사용자가 "제대로 올라가고 있다"고 느낍니다.

어떻게 동작하나

onDragOver에서 기본 동작을 막고 강조 상태를 켜고, onDrop에서 dataTransfer.files를 수집합니다.
이미지 파일은 URL.createObjectURL로 썸네일을 만들고, 제거 시 revokeObjectURL로 정리합니다.
파일마다 진행률을 시뮬레이션해 진행 바를 채우고, 완료되면 색을 바꿉니다.

놓치기 쉬운 것

onDragOver에서 preventDefault()를 하지 않으면 브라우저가 파일을 새 탭으로 열어버립니다.
ObjectURL은 메모리를 잡으므로 제거언마운트 시 꼭 revoke해야 합니다.
드롭 영역은 키보드(Enter)로도 파일창을 열 수 있어야 접근성이 확보됩니다.

이런 곳에 써요

이미지문서 업로드 폼, 프로필 사진 변경
첨부파일 입력, 가져오기(import) 화면

import type { Metadata } from "next"; import { FileDropzone } from "./-components/FileDropzone"; export const metadata: Metadata = { title: "파일 드롭존 업로더 (데모)", description: "드래그&드롭 + 클릭으로 파일을 받는 업로더. dragover 강조 · 이미지 썸네일 미리보기 · 업로드 진행률 시뮬 · 개별 삭제. 접근성 대응.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-violet-50/40"> <FileDropzone /> </main> ); }