ການກວດສອບໄຟລ໌

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,   // ຄວາມກວ້າງສູງສຸດເປັນ pixels
  maxHeight: 4096,  // ຄວາມສູງສູງສຸດເປັນ pixels
  minWidth: 100,    // ຄວາມກວ້າງຕ່ຳສຸດເປັນ pixels
  minHeight: 100,   // ຄວາມສູງຕ່ຳສຸດເປັນ pixels
});

ກົດລະບຽບການກວດສອບແບບກຳນົດເອງ

ສ້າງຕາລະກະການກວດສອບແບບກຳນົດເອງ:

useDropup({
  customRules: [
    // ກົດລະບຽບ 1: ກວດສອບຄວາມຍາວຊື່ໄຟລ໌
    (file) => {
      if (file.name.length > 100) {
        return 'ຊື່ໄຟລ໌ຕ້ອງມີຕ່ຳກວ່າ 100 ຕົວອັກສອນ';
      }
      return true;
    },

    // ກົດລະບຽບ 2: ກວດສອບເນື້ອຫາສະເພາະ
    (file) => {
      if (file.name.includes('draft')) {
        return 'ບໍ່ອະນຸຍາດໄຟລ໌ຮ່າງ';
      }
      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} ໄຟລ໌ການກວດສອບລົ້ມເຫຼວ`);
  },
});

ໂຄງສ້າງຂໍ້ຜິດພາດການກວດສອບ

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']),
  ],
});

ຄຳຕິຊົມການກວດສອບໃນລະຫວ່າງການລາກ

ໃຫ້ຄຳຕິຊົມທາງສາຍຕາໃນລະຫວ່າງການລາກ:

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>
  );
}