ප්‍රධාන අන්තර්ගතයට පනින්න

Options Reference

useDropup hook සඳහා සියලුම configuration options.

වලංගුකරණ Options​

accept​

පිළිගන්නා ගොනු වර්ග.

// තනි MIME type
useDropup({ accept: 'image/png' });

// බහු MIME types
useDropup({ accept: 'image/png, image/jpeg, image/gif' });

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

// Extension අනුව
useDropup({ accept: '.pdf, .doc, .docx' });

// Array format
useDropup({ accept: ['image/*', 'application/pdf', '.txt'] });
Typeපෙරනිමි
string | string[]undefined (සියලුම ගොනු)

maxSize​

Bytes වලින් උපරිම ගොනු ප්‍රමාණය.

useDropup({ maxSize: 10 * 1024 * 1024 }); // 10MB
Typeපෙරනිමි
numberundefined (සීමාවක් නැත)

minSize​

Bytes වලින් අවම ගොනු ප්‍රමාණය.

useDropup({ minSize: 1024 }); // 1KB අවම
Typeපෙරනිමි
numberundefined (සීමාවක් නැත)

maxFiles​

අවසර ඇති උපරිම ගොනු ගණන.

useDropup({ maxFiles: 5 });
Typeපෙරනිමි
numberundefined (සීමාවක් නැත)

maxWidth / maxHeight​

Pixels වලින් උපරිම image dimensions.

useDropup({
  accept: 'image/*',
  maxWidth: 4096,
  maxHeight: 4096,
});
Typeපෙරනිමි
numberundefined (සීමාවක් නැත)

minWidth / minHeight​

Pixels වලින් අවම image dimensions.

useDropup({
  accept: 'image/*',
  minWidth: 100,
  minHeight: 100,
});
Typeපෙරනිමි
numberundefined (සීමාවක් නැත)

customRules​

Custom validation functions.

useDropup({
  customRules: [
    // Sync validation
    (file) => {
      if (file.name.includes('draft')) {
        return 'Draft ගොනු අවසර නැත';
      }
      return true;
    },
    // Async validation
    async (file) => {
      const exists = await checkServerDuplicate(file);
      return exists ? 'ගොනුව දැනටමත් පවතී' : true;
    },
  ],
});
Typeපෙරනිමි
ValidationRule[][]

ValidationRule type:

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

හැසිරීම් Options​

multiple​

බහු ගොනු තේරීම අවසර දෙන්න.

useDropup({ multiple: true });  // බහු ගොනු
useDropup({ multiple: false }); // එක ගොනුවක් පමණි
Typeපෙරනිමි
booleantrue

disabled​

Dropzone අක්‍රීය කරන්න.

useDropup({ disabled: true });
Typeපෙරනිමි
booleanfalse

autoUpload​

ගොනු එකතු කළ විට ස්වයංක්‍රීයව upload ආරම්භ කරන්න.

useDropup({
  upload: { url: '/api/upload' },
  autoUpload: true,
});
Typeපෙරනිමි
booleanfalse

generatePreviews​

Image ගොනු සඳහා preview URLs සාදන්න.

useDropup({ generatePreviews: true });

// Preview ප්‍රවේශය
files[0].preview // "blob:http://..."
Typeපෙරනිමි
booleantrue

Upload Configuration​

upload​

Upload destination සහ behavior configure කරන්න.

URL-based Configuration​

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

UploadConfig properties:

PropertyTypeපෙරනිමිවිස්තරය
urlstringඅවශ්‍යයිUpload endpoint URL
methodstring'POST'HTTP method
headersRecord<string, string>{}Request headers
fieldNamestring'file'File සඳහා form field name
withCredentialsbooleanfalseCookies ඇතුළත් කරන්න
timeoutnumber0Request timeout (ms)
dataRecord<string, unknown>{}අතිරේක form data

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:

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 Options​

onFilesAdded​

ගොනු එකතු වූ විට (validation පසුව) call වේ.

useDropup({
  onFilesAdded: (files) => {
    console.log('එකතු විය:', files.map(f => f.name));
  },
});
Type
(files: DropupFile[]) => void

onFileRemoved​

ගොනුවක් ඉවත් කළ විට call වේ.

useDropup({
  onFileRemoved: (file) => {
    console.log('ඉවත් විය:', file.name);
  },
});
Type
(file: DropupFile) => void

onValidationError​

ගොනු validation අසාර්ථක වූ විට call වේ.

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

onUploadStart​

ගොනුවක් upload ආරම්භ වූ විට call වේ.

useDropup({
  onUploadStart: (file) => {
    console.log('Upload ආරම්භයි:', file.name);
  },
});
Type
(file: DropupFile) => void

onUploadProgress​

Upload progress අතරතුර call වේ.

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

onUploadComplete​

ගොනු upload සම්පූර්ණ වූ විට call වේ.

useDropup({
  onUploadComplete: (file, response) => {
    console.log('Upload විය:', file.uploadedUrl);
    console.log('Server response:', response);
  },
});
Type
(file: DropupFile, response: unknown) => void

onUploadError​

ගොනු upload අසාර්ථක වූ විට call වේ.

useDropup({
  onUploadError: (file, error) => {
    console.error(`අසාර්ථකයි: ${file.name}`, error.message);
  },
});
Type
(file: DropupFile, error: DropupError) => void

onAllComplete​

සියලුම ගොනු upload අවසන් වූ විට call වේ.

useDropup({
  onAllComplete: (files) => {
    const successful = files.filter(f => f.status === 'complete');
    console.log(`${successful.length}/${files.length} සාර්ථකව upload විය`);
  },
});
Type
(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
  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} upload විය!`);
  },
  onUploadError: (file, error) => {
    toast.error(`${file.name} අසාර්ථකයි: ${error.message}`);
  },
  onAllComplete: (files) => {
    const count = files.filter(f => f.status === 'complete').length;
    toast.success(`සියල්ල අවසන්! ගොනු ${count}ක් upload විය.`);
  },
});