ການອ້າງອີງຕົວເລືອກ

ຕົວເລືອກການຕັ້ງຄ່າທັງໝົດສຳລັບ hook useDropup.

ຕົວເລືອກການກວດສອບ

accept

ປະເພດໄຟລ໌ທີ່ຍອມຮັບ.

// ປະເພດ MIME ດຽວ
useDropup({ accept: 'image/png' });

// ຫຼາຍປະເພດ MIME
useDropup({ accept: 'image/png, image/jpeg, image/gif' });

// ແບບ Wildcard
useDropup({ accept: 'image/*' });

// ຕາມນາມສະກຸນ
useDropup({ accept: '.pdf, .doc, .docx' });

// ຮູບແບບອາເຣ
useDropup({ accept: ['image/*', 'application/pdf', '.txt'] });

ປະເພດ	ຄ່າເລີ່ມຕົ້ນ
string | string[]	undefined (ໄຟລ໌ທັງໝົດ)

maxSize

ຂະໜາດໄຟລ໌ສູງສຸດເປັນ bytes.

useDropup({ maxSize: 10 * 1024 * 1024 }); // 10MB

ປະເພດ	ຄ່າເລີ່ມຕົ້ນ
number	undefined (ບໍ່ມີຂີດຈຳກັດ)

minSize

ຂະໜາດໄຟລ໌ຕ່ຳສຸດເປັນ bytes.

useDropup({ minSize: 1024 }); // ຕ່ຳສຸດ 1KB

ປະເພດ	ຄ່າເລີ່ມຕົ້ນ
number	undefined (ບໍ່ມີຂີດຈຳກັດ)

maxFiles

ຈຳນວນໄຟລ໌ສູງສຸດທີ່ອະນຸຍາດ.

useDropup({ maxFiles: 5 });

ປະເພດ	ຄ່າເລີ່ມຕົ້ນ
number	undefined (ບໍ່ມີຂີດຈຳກັດ)

maxWidth / maxHeight

ຂະໜາດຮູບພາບສູງສຸດເປັນ pixels.

useDropup({
  accept: 'image/*',
  maxWidth: 4096,
  maxHeight: 4096,
});

ປະເພດ	ຄ່າເລີ່ມຕົ້ນ
number	undefined (ບໍ່ມີຂີດຈຳກັດ)

minWidth / minHeight

ຂະໜາດຮູບພາບຕ່ຳສຸດເປັນ pixels.

useDropup({
  accept: 'image/*',
  minWidth: 100,
  minHeight: 100,
});

ປະເພດ	ຄ່າເລີ່ມຕົ້ນ
number	undefined (ບໍ່ມີຂີດຈຳກັດ)

customRules

ຟັງຊັນການກວດສອບແບບກຳນົດເອງ.

useDropup({
  customRules: [
    // ການກວດສອບແບບ sync
    (file) => {
      if (file.name.includes('draft')) {
        return 'ບໍ່ອະນຸຍາດໄຟລ໌ຮ່າງ';
      }
      return true;
    },
    // ການກວດສອບແບບ async
    async (file) => {
      const exists = await checkServerDuplicate(file);
      return exists ? 'ໄຟລ໌ມີຢູ່ແລ້ວ' : true;
    },
  ],
});

ປະເພດ	ຄ່າເລີ່ມຕົ້ນ
ValidationRule[]	[]

ປະເພດ ValidationRule:

type ValidationRule = (file: File) => boolean | string | Promise<boolean | string>;

ຕົວເລືອກພຶດຕິກຳ

multiple

ອະນຸຍາດການເລືອກຫຼາຍໄຟລ໌.

useDropup({ multiple: true });  // ຫຼາຍໄຟລ໌
useDropup({ multiple: false }); // ໄຟລ໌ດຽວເທົ່ານັ້ນ

ປະເພດ	ຄ່າເລີ່ມຕົ້ນ
boolean	true

disabled

ປິດການໃຊ້ງານ dropzone.

useDropup({ disabled: true });

ປະເພດ	ຄ່າເລີ່ມຕົ້ນ
boolean	false

autoUpload

ເລີ່ມການອັບໂຫຼດອັດຕະໂນມັດເມື່ອໄຟລ໌ຖືກເພີ່ມ.

useDropup({
  upload: { url: '/api/upload' },
  autoUpload: true,
});

ປະເພດ	ຄ່າເລີ່ມຕົ້ນ
boolean	false

generatePreviews

ສ້າງ URL ຕົວຢ່າງສຳລັບໄຟລ໌ຮູບພາບ.

useDropup({ generatePreviews: true });

// ເຂົ້າເຖິງຕົວຢ່າງ
files[0].preview // "blob:http://..."

ປະເພດ	ຄ່າເລີ່ມຕົ້ນ
boolean	true

ການຕັ້ງຄ່າການອັບໂຫຼດ

upload

ຕັ້ງຄ່າຈຸດໝາຍປາຍທາງ ແລະພຶດຕິກຳການອັບໂຫຼດ.

ການຕັ້ງຄ່າແບບ URL

useDropup({
  upload: {
    url: '/api/upload',
    method: 'POST',
    headers: {
      'Authorization': 'Bearer token',
    },
    fieldName: 'file',
    withCredentials: true,
    timeout: 30000,
  },
});

ຄຸນສົມບັດ UploadConfig:

ຄຸນສົມບັດ	ປະເພດ	ຄ່າເລີ່ມຕົ້ນ	ຄຳອະທິບາຍ
url	string	ຕ້ອງການ	URL ຈຸດໝາຍປາຍທາງການອັບໂຫຼດ
method	string	'POST'	ວິທີ HTTP
headers	Record<string, string>	{}	Request headers
fieldName	string	'file'	ຊື່ຟີລ form ສຳລັບໄຟລ໌
withCredentials	boolean	false	ລວມ credentials/cookies
timeout	number	0	Request timeout (ms)
data	Record<string, unknown>	{}	ຂໍ້ມູນ form ເພີ່ມເຕີມ

Custom Uploader

useDropup({
  upload: async (file, options) => {
    const formData = new FormData();
    formData.append('file', file.file);

    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData,
      signal: options.signal,
    });

    const data = await response.json();
    return { url: data.url };
  },
});

ປະເພດ CustomUploader:

type CustomUploader = (
  file: DropupFile,
  options: UploadOptions
) => Promise<UploadResult>;

interface UploadOptions {
  signal: AbortSignal;
  onProgress: (progress: number) => void;
}

interface UploadResult {
  url?: string;
  response?: unknown;
}

Cloud Uploaders

import { createS3Uploader } from '@samithahansaka/dropup/cloud/s3';

useDropup({
  upload: createS3Uploader({
    getPresignedUrl: async (file) => {
      const res = await fetch('/api/s3-presign', {
        method: 'POST',
        body: JSON.stringify({ filename: file.name, type: file.type }),
      });
      return res.json();
    },
  }),
});

ຕົວເລືອກ Callback

onFilesAdded

ຖືກເອີ້ນເມື່ອໄຟລ໌ຖືກເພີ່ມ (ຫຼັງການກວດສອບ).

useDropup({
  onFilesAdded: (files) => {
    console.log('ເພີ່ມແລ້ວ:', files.map(f => f.name));
  },
});

ປະເພດ
(files: DropupFile[]) => void

onFileRemoved

ຖືກເອີ້ນເມື່ອໄຟລ໌ຖືກລຶບ.

useDropup({
  onFileRemoved: (file) => {
    console.log('ລຶບແລ້ວ:', file.name);
  },
});

ປະເພດ
(file: DropupFile) => void

onValidationError

ຖືກເອີ້ນເມື່ອໄຟລ໌ການກວດສອບລົ້ມເຫຼວ.

useDropup({
  accept: 'image/*',
  onValidationError: (errors) => {
    errors.forEach(({ file, errors }) => {
      console.log(`${file.name}: ${errors.join(', ')}`);
    });
  },
});

ປະເພດ
(errors: ValidationError[]) => void

onUploadStart

ຖືກເອີ້ນເມື່ອໄຟລ໌ເລີ່ມການອັບໂຫຼດ.

useDropup({
  onUploadStart: (file) => {
    console.log('ເລີ່ມການອັບໂຫຼດ:', file.name);
  },
});

ປະເພດ
(file: DropupFile) => void

onUploadProgress

ຖືກເອີ້ນໃນລະຫວ່າງຄວາມຄືບໜ້າການອັບໂຫຼດ.

useDropup({
  onUploadProgress: (file, progress) => {
    console.log(`${file.name}: ${progress}%`);
  },
});

ປະເພດ
(file: DropupFile, progress: number) => void

onUploadComplete

ຖືກເອີ້ນເມື່ອການອັບໂຫຼດໄຟລ໌ສຳເລັດ.

useDropup({
  onUploadComplete: (file, response) => {
    console.log('ອັບໂຫຼດແລ້ວ:', file.uploadedUrl);
    console.log('ການຕອບກັບຈາກເຊີບເວີ:', response);
  },
});

ປະເພດ
(file: DropupFile, response: unknown) => void

onUploadError

ຖືກເອີ້ນເມື່ອການອັບໂຫຼດໄຟລ໌ລົ້ມເຫຼວ.

useDropup({
  onUploadError: (file, error) => {
    console.error(`ລົ້ມເຫຼວ: ${file.name}`, error.message);
  },
});

ປະເພດ
(file: DropupFile, error: DropupError) => void

onAllComplete

ຖືກເອີ້ນເມື່ອໄຟລ໌ທັງໝົດອັບໂຫຼດສຳເລັດ.

useDropup({
  onAllComplete: (files) => {
    const successful = files.filter(f => f.status === 'complete');
    console.log(`${successful.length}/${files.length} ອັບໂຫຼດສຳເລັດ`);
  },
});

ປະເພດ
(files: DropupFile[]) => void

ຕົວຢ່າງສົມບູນ

const { files, actions, state, getDropProps, getInputProps } = useDropup({
  // ການກວດສອບ
  accept: ['image/*', 'application/pdf'],
  maxSize: 10 * 1024 * 1024,
  maxFiles: 5,

  // ພຶດຕິກຳ
  multiple: true,
  autoUpload: false,
  generatePreviews: true,

  // ການອັບໂຫຼດ
  upload: {
    url: '/api/upload',
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${token}`,
    },
  },

  // Callbacks
  onFilesAdded: (files) => {
    toast.info(`ເພີ່ມ ${files.length} ໄຟລ໌ແລ້ວ`);
  },
  onValidationError: (errors) => {
    toast.error(`${errors.length} ໄຟລ໌ຖືກປະຕິເສດ`);
  },
  onUploadProgress: (file, progress) => {
    console.log(`${file.name}: ${progress}%`);
  },
  onUploadComplete: (file) => {
    toast.success(`${file.name} ອັບໂຫຼດສຳເລັດ!`);
  },
  onUploadError: (file, error) => {
    toast.error(`${file.name} ລົ້ມເຫຼວ: ${error.message}`);
  },
  onAllComplete: (files) => {
    const count = files.filter(f => f.status === 'complete').length;
    toast.success(`ສຳເລັດທັງໝົດ! ${count} ໄຟລ໌ຖືກອັບໂຫຼດ.`);
  },
});