ការផ្ទៀងផ្ទាត់ឯកសារ

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 'ឯកសារព្រាងមិនត្រូវបានអនុញ្ញាតទេ';
      }
      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>
  );
}