การตรวจสอบไฟล์

Dropup ให้การตรวจสอบไฟล์ที่ครอบคลุมเพื่อให้แน่ใจว่ายอมรับเฉพาะไฟล์ที่ถูกต้อง

ตัวเลือกการตรวจสอบ

Accept (ประเภทไฟล์)

ระบุประเภทไฟล์ที่ยอมรับ:

// ยอมรับเฉพาะรูปภาพ
useDropup({ accept: 'image/*' });

// ยอมรับประเภทเฉพาะ
useDropup({ accept: 'image/png, image/jpeg' });

// ยอมรับตามนามสกุล
useDropup({ accept: '.pdf, .doc, .docx' });

// หลายหมวดหมู่
useDropup({ accept: ['image/*', 'application/pdf', '.txt'] });

รูปแบบ Accept ที่พบบ่อย

รูปแบบ	คำอธิบาย
image/*	รูปภาพทั้งหมด
image/png, image/jpeg	เฉพาะ PNG และ JPEG
video/*	วิดีโอทั้งหมด
audio/*	ไฟล์เสียงทั้งหมด
application/pdf	เฉพาะไฟล์ PDF
.doc, .docx	เอกสาร Word
*/*	ไฟล์ทั้งหมด (ค่าเริ่มต้น)

ขีดจำกัดขนาดไฟล์

useDropup({
  maxSize: 10 * 1024 * 1024, // สูงสุด 10MB
  minSize: 1024,              // ต่ำสุด 1KB
});

ขีดจำกัดจำนวนไฟล์

useDropup({
  maxFiles: 5, // สูงสุด 5 ไฟล์
});

ขีดจำกัดมิติรูปภาพ

useDropup({
  accept: 'image/*',
  maxWidth: 4096,   // ความกว้างสูงสุดเป็นพิกเซล
  maxHeight: 4096,  // ความสูงสูงสุดเป็นพิกเซล
  minWidth: 100,    // ความกว้างต่ำสุดเป็นพิกเซล
  minHeight: 100,   // ความสูงต่ำสุดเป็นพิกเซล
});

กฎการตรวจสอบแบบกำหนดเอง

สร้างตรรกะการตรวจสอบแบบกำหนดเอง:

useDropup({
  customRules: [
    // กฎ 1: ตรวจสอบความยาวชื่อไฟล์
    (file) => {
      if (file.name.length > 100) {
        return 'ชื่อไฟล์ต้องน้อยกว่า 100 ตัวอักษร';
      }
      return true;
    },

    // กฎ 2: ตรวจสอบเนื้อหาเฉพาะ
    (file) => {
      if (file.name.includes('draft')) {
        return 'ไม่อนุญาตไฟล์ draft';
      }
      return true;
    },

    // กฎ 3: การตรวจสอบแบบ async
    async (file) => {
      const hash = await calculateHash(file);
      const exists = await checkDuplicate(hash);
      if (exists) {
        return 'ไฟล์นี้ถูกอัปโหลดไปแล้ว';
      }
      return true;
    },
  ],
});

ค่าที่ส่งคืนของกฎ

ค่าที่ส่งคืน	ความหมาย
true	ผ่านการตรวจสอบ
false	ไม่ผ่านการตรวจสอบ (ข้อผิดพลาดทั่วไป)
string	ไม่ผ่านการตรวจสอบพร้อมข้อความที่กำหนดเอง

การจัดการข้อผิดพลาดการตรวจสอบ

ใช้ callback onValidationError:

useDropup({
  accept: 'image/*',
  maxSize: 5 * 1024 * 1024,
  onValidationError: (errors) => {
    errors.forEach(({ file, errors: fileErrors }) => {
      console.log(`${file.name} ไม่ผ่านการตรวจสอบ:`);
      fileErrors.forEach(error => console.log(`  - ${error}`));
    });

    // แสดงข้อความที่เป็นมิตรกับผู้ใช้
    toast.error(`${errors.length} ไฟล์ไม่ผ่านการตรวจสอบ`);
  },
});

โครงสร้าง Validation Error

interface ValidationError {
  file: File;              // ไฟล์ที่ล้มเหลว
  errors: string[];        // อาร์เรย์ของข้อความผิดพลาด
}

กฎการตรวจสอบสำเร็จรูป

Dropup รวมกฎการตรวจสอบทั่วไป:

import { commonRules } from '@samithahansaka/dropup';

useDropup({
  customRules: [
    commonRules.noExecutables,     // บล็อก .exe, .bat, ฯลฯ
    commonRules.noHiddenFiles,     // บล็อกไฟล์ที่ขึ้นต้นด้วย .
    commonRules.maxFilenameLength(50),
    commonRules.allowedExtensions(['.jpg', '.png', '.pdf']),
  ],
});

การให้ feedback ขณะลาก

ให้ feedback ภาพขณะลาก:

function DropZone() {
  const { getDropProps, state } = useDropup({
    accept: 'image/*',
  });

  // state.isDragAccept - ไฟล์ตรงตามเกณฑ์ accept
  // state.isDragReject - ไฟล์ไม่ตรง

  return (
    <div
      {...getDropProps()}
      style={{
        borderColor: state.isDragAccept
          ? 'green'
          : state.isDragReject
          ? 'red'
          : 'gray',
      }}
    >
      {state.isDragReject && <p>ไม่ยอมรับประเภทไฟล์นี้!</p>}
    </div>
  );
}

ตัวอย่างการตรวจสอบแบบสมบูรณ์

import { useDropup, commonRules } from '@samithahansaka/dropup';

function SecureUploader() {
  const { files, state, getDropProps, getInputProps } = useDropup({
    // ประเภทไฟล์
    accept: ['image/jpeg', 'image/png', 'application/pdf'],

    // ขีดจำกัดขนาด
    maxSize: 10 * 1024 * 1024, // 10MB
    minSize: 100,              // 100 bytes (ป้องกันไฟล์ว่าง)

    // ขีดจำกัดจำนวน
    maxFiles: 10,

    // มิติรูปภาพ (สำหรับรูปภาพเท่านั้น)
    maxWidth: 8000,
    maxHeight: 8000,

    // กฎที่กำหนดเอง
    customRules: [
      commonRules.noExecutables,
      commonRules.maxFilenameLength(100),

      // กำหนดเอง: ไม่มีไฟล์ที่มีช่องว่าง
      (file) => {
        if (file.name.includes(' ')) {
          return 'ชื่อไฟล์ไม่สามารถมีช่องว่าง';
        }
        return true;
      },
    ],

    // การจัดการข้อผิดพลาด
    onValidationError: (errors) => {
      errors.forEach(({ file, errors }) => {
        alert(`${file.name}: ${errors.join(', ')}`);
      });
    },
  });

  return (
    <div
      {...getDropProps()}
      className={`dropzone ${
        state.isDragReject ? 'reject' : state.isDragAccept ? 'accept' : ''
      }`}
    >
      <input {...getInputProps()} />
      {state.isDragReject ? (
        <p>❌ บางไฟล์จะถูกปฏิเสธ</p>
      ) : (
        <p>📁 วางไฟล์ที่นี่ (เฉพาะ JPEG, PNG, PDF, สูงสุด 10MB)</p>
      )}
    </div>
  );
}