ส่วนติดต่อผู้ใช้อัปโหลดไฟล์แบบลากและวาง

ยินดีต้อนรับ

ภาพรวมเหตุการณ์การลาก

การป้องกันพฤติกรรมเริ่มต้น

const handleDragOver = (e) => {
  e.preventDefault();
};
const handleDrop = (e) => {
  e.preventDefault();
  const files = Array.from(e.dataTransfer.files);
  // process files
};

สถานะใช้งานทางภาพ

const [isDragging, setIsDragging] = useState(false);

<div
  className={isDragging ? 'zone active' : 'zone'}
  onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
  onDragLeave={() => setIsDragging(false)}
  onDrop={handleDrop}
>

การอ่านไฟล์ที่วาง

const handleDrop = (e) => {
  e.preventDefault();
  setIsDragging(false);
  const files = Array.from(e.dataTransfer.files);
  setSelectedFiles(files);
};

การผสานการเลือกไฟล์ด้วยการคลิก

const inputRef = useRef();

<div onClick={() => inputRef.current.click()} ...>
  Drop files here or click to browse
</div>
<input
  ref={inputRef}
  type="file"
  multiple
  hidden
  onChange={(e) => setSelectedFiles(Array.from(e.target.files))}
/>

การแสดงตัวอย่างไฟล์

การนำไฟล์ออกก่อนอัปโหลด

const removeFile = (index) =>
  setSelectedFiles(files => files.filter((_, i) => i !== index));

dragenter เทียบกับ dragover

ไลบรารีจากผู้พัฒนาภายนอก

import { useDropzone } from 'react-dropzone';
const { getRootProps, getInputProps, isDragActive } = useDropzone({
  onDrop: acceptedFiles => setFiles(acceptedFiles),
  accept: { 'image/*': [] },
});

ตรวจสอบอย่างรวดเร็ว

สรุปทบทวน

บทเรียนถัดไป