최근 오랜만에 프론트엔드 NextJS 작업 할 일이 많아졌는데 여전히 제대로된 레퍼런스 찾기가 쉽지않다.
드래그 & 드롭 파일 업로드
작업중인 대시보드에 그저 드래그&드롭 파일업로드를 넣고 싶었을뿐인데..
인터넷 서칭해서 대충 복붙하니 원하는데로 동작하지않고 불필요한 구현이 많아보인다..
그냥 새롭게 만들어보자.
원하는것
Just 드래그 & 드롭 또는 클릭해서 파일업로드!!
결과물
flowbite에서 적당한 컴포넌트를 가지고와서 작업.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
const DragAndDropFile = () => {
const onDrag: DragEventHandler<HTMLElement> = (e) => {
e.preventDefault();
e.stopPropagation();
};
const onDrop: DragEventHandler<HTMLElement> = (e) => {
e.preventDefault();
e.stopPropagation();
if (e.dataTransfer.files && e.dataTransfer.files[0]) {
handleFiles(e.dataTransfer.files);
}
};
const onChange = (event: any) => {
handleFiles(event.target.files);
};
const handleFiles = (files: FileList) => {
const file = files[0];
if (!file) return;
/**
* TODO 확장자 체크
* 파일업로드 등 구현
*/
};
return (
<div
className="flex items-center justify-center w-full"
onDragEnter={onDrag}
onDragLeave={onDrag}
onDragOver={onDrag}
onDrop={onDrop}
>
<label
htmlFor="dropzone-file"
className="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
>
<div className="flex flex-col items-center justify-center pt-5 pb-6">
<svg
className="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 20 16"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
/>
</svg>
<p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
<span className="font-semibold">Click to upload</span> or drag and
drop
</p>
<p className="text-xs text-gray-500 dark:text-gray-400">
Upload CSV file
</p>
</div>
<input
id="dropzone-file"
type="file"
className="hidden"
accept=".csv"
onChange={onChange}
/>
</label>
</div>
);
};