페이지로 파일 드래그하기

데스크톱에서 파일 가져오기

파일 드롭 허용하기

dropzone.addEventListener("dragover", (e) => e.preventDefault());

dataTransfer.files

dropzone.addEventListener("drop", (e) => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  console.log(files.length, "file(s) dropped");
});

파일 순회하기

const files = [...e.dataTransfer.files];
files.forEach((file) => {
  console.log(file.name, file.size, file.type);
});

파일 메타데이터

console.log(file.name);          // "photo.png"
console.log(file.type);          // "image/png"
console.log(file.size);          // 20481

형식으로 필터링하기

const images = files.filter((f) => f.type.startsWith("image/"));
if (images.length === 0) console.log("No images dropped");

파일 내용 읽기

const reader = new FileReader();
reader.onload = () => console.log(reader.result);
reader.readAsText(file);

드롭된 이미지 미리 보기

const url = URL.createObjectURL(file);
img.src = url;
img.onload = () => URL.revokeObjectURL(url);

items와 files 비교

for (const item of e.dataTransfer.items) {
  if (item.kind === "file") {
    const file = item.getAsFile();
    console.log(file.name);
  }
}

드롭된 파일 업로드하기

const form = new FormData();
files.forEach((f) => form.append("files", f));
fetch("/upload", { method: "POST", body: form });

실수로 이동하는 것 방지하기

window.addEventListener("dragover", (e) => e.preventDefault());
window.addEventListener("drop", (e) => e.preventDefault());

빠른 확인

복습: 파일 드래그하기