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

නිතර අසන ප්‍රශ්න

Dropup පිළිබඳ පොදු ප්‍රශ්න සහ පිළිතුරු.

සාමාන්‍ය​

Dropup යනු කුමක්ද?​

Dropup යනු ගොනු uploads සඳහා සැහැල්ලු, headless React library එකකි. එය drag-and-drop ක්‍රියාකාරීත්වය, ගොනු වලංගුකරණය, upload progress tracking, සහ cloud storage සහාය ලබා දෙයි - සියල්ල 10KB gzipped වලට අඩු package එකක.

"headless" යනු කුමක්ද?​

Headless යනු Dropup හි කිසිදු UI component ඇතුළත් නොවන බවයි. එය logic සහ state management ලබා දෙන අතර, ඔබට අවශ්‍ය ආකාරයට UI ගොඩනඟන්න. මෙය ඔබට පෙනුම සහ හැඟීම පිළිබඳ සම්පූර්ණ පාලනයක් ලබා දෙයි.

Bundle size කොපමණද?​

  • Core (@samithahansaka/dropup): < 10KB gzipped
  • Cloud support සමඟ: provider එකකට +2KB
  • Image processing සමඟ: +5KB
  • tus protocol සමඟ: +3KB (tus-js-client peer අවශ්‍යයි)

TypeScript සහාය දක්වයිද?​

ඔව්! Dropup TypeScript වලින් ලියා ඇති අතර සවිස්තරාත්මක type definitions ඇතුළත් වේ. @types package අවශ්‍ය නැත.

කුමන React version අවශ්‍යද?​

React 16.8+ (hooks සහාය අවශ්‍යයි).

භාවිතය​

ගොනු upload කරන්නේ කෙසේද?​

const { files, actions } = useDropup({
  upload: { url: '/api/upload' },
});

// සියලුම ගොනු upload කරන්න
actions.upload();

// නිශ්චිත ගොනු upload කරන්න
actions.upload(['file-id-1', 'file-id-2']);

Validation errors හසුරුවන්නේ කෙසේද?​

useDropup({
  accept: 'image/*',
  maxSize: 5 * 1024 * 1024,

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

Custom upload logic භාවිතා කළ හැකිද?​

ඔව්! Config object වෙනුවට function එකක් pass කරන්න:

useDropup({
  upload: async (file, options) => {
    const { signal, onProgress } = options;

    // ඔබගේ custom upload logic
    const response = await customUpload(file.file, {
      signal,
      onProgress,
    });

    return { url: response.url };
  },
});

Programmatically ගොනු එකතු කරන්නේ කෙසේද?​

const { actions } = useDropup();

// Clipboard එකෙන්
document.addEventListener('paste', (e) => {
  const files = e.clipboardData?.files;
  if (files) {
    actions.addFiles(files);
  }
});

Drop zones කිහිපයක් තිබිය හැකිද?​

ඔව්! සෑම useDropup call එකක්ම ස්වාධීන instance එකක් නිර්මාණය කරයි:

const images = useDropup({ accept: 'image/*' });
const documents = useDropup({ accept: '.pdf' });

// වෙන වෙනම භාවිතා කරන්න
<div {...images.getDropProps()}>...</div>
<div {...documents.getDropProps()}>...</div>

Uploads​

Upload progress පෙන්වන්නේ කෙසේද?​

const { files } = useDropup({ upload: { url: '/api/upload' } });

{files.map(file => (
  <div key={file.id}>
    {file.name}: {file.progress}%
  </div>
))}

Upload එකක් cancel කරන්නේ කෙසේද?​

const { actions } = useDropup();

// නිශ්චිත ගොනුවක් cancel කරන්න
actions.cancel('file-id');

// සියලුම uploads cancel කරන්න
actions.cancel();

අසාර්ථක uploads retry කරන්නේ කෙසේද?​

const { actions } = useDropup();

// නිශ්චිත ගොනු retry කරන්න
actions.retry(['file-id']);

// අසාර්ථක සියල්ල retry කරන්න
actions.retry();

Chunked uploads සහාය දක්වයිද?​

ඔව්! createChunkedUploader භාවිතා කරන්න:

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

useDropup({
  upload: createChunkedUploader({
    url: '/api/upload/chunk',
    chunkSize: 5 * 1024 * 1024, // 5MB
  }),
});

S3 වෙත සෘජුව upload කළ හැකිද?​

ඔව්! Cloud uploader භාවිතා කරන්න:

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 }),
      });
      return res.json();
    },
  }),
});

වලංගුකරණය​

ගොනු වර්ග සීමා කරන්නේ කෙසේද?​

// MIME type අනුව
useDropup({ accept: 'image/*' });

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

// බහු
useDropup({ accept: ['image/*', 'application/pdf'] });

Size limits සකසන්නේ කෙසේද?​

useDropup({
  maxSize: 10 * 1024 * 1024, // 10MB උපරිම
  minSize: 1024,             // 1KB අවම
});

ගොනු ගණන සීමා කරන්නේ කෙසේද?​

useDropup({
  maxFiles: 5,
});

Custom validation එකතු කළ හැකිද?​

ඔව්! customRules භාවිතා කරන්න:

useDropup({
  customRules: [
    (file) => {
      if (file.name.includes('draft')) {
        return 'Draft ගොනු අවසර නැත';
      }
      return true;
    },
  ],
});

Previews​

Image previews පෙන්වන්නේ කෙසේද?​

Previews පෙරනිමියෙන් සක්‍රියයි:

const { files } = useDropup();

{files.map(file => (
  file.preview && <img src={file.preview} alt="" />
))}

Preview URLs clean up කළ යුතුද?​

නැත! ගොනු ඉවත් කළ විට හෝ component unmount වන විට Dropup ස්වයංක්‍රීයව Object URLs revoke කරයි.

Previews disable කළ හැකිද?​

useDropup({ generatePreviews: false });

දෝශ නිරාකරණය​

ගොනු upload වෙන්නේ නැත​

  1. upload configure කර ඇත්දැයි පරීක්ෂා කරන්න:

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

  2. actions.upload() call කරන බවට වග බලා ගන්න (autoUpload: true නැතිනම්)

  3. Network errors සඳහා browser console පරීක්ෂා කරන්න

Preview URLs ක්‍රියා නොකරයි​

  1. ගොනුව image එකක් බවට වග බලා ගන්න
  2. generatePreviews false නොවන බවට පරීක්ෂා කරන්න
  3. File object හි valid preview property ඇති බවට verify කරන්න

Drag and drop ක්‍රියා නොකරයි​

  1. Container element එකක getDropProps() spread කර ඇති බවට වග බලා ගන්න
  2. Hidden input ඇතුළත් කරන්න: <input {...getInputProps()} />
  3. disabled true නොවන බවට පරීක්ෂා කරන්න

TypeScript errors​

  1. නවතම Dropup version එකට update කරන්න
  2. tsconfig.json හි නිසි moduleResolution ඇති බවට වග බලා ගන්න
  3. @samithahansaka/dropup devDependencies නොව dependencies හි ඇති බවට පරීක්ෂා කරන්න

Memory leaks​

  1. useDropup භාවිතා කරන components නිසියාකාරව unmount වන බවට වග බලා ගන්න
  2. අවශ්‍ය නම් unmount කිරීමට පෙර actions.reset() call කරන්න
  3. Cleanup නැතිව external state හි ගොනු store නොකරන්න

අනුකූලතාව​

Next.js සමඟ ක්‍රියා කරයිද?​

ඔව්! 'use client' directive භාවිතා කරන්න:

'use client';
import { useDropup } from '@samithahansaka/dropup';

React Native සමඟ ක්‍රියා කරයිද?​

ඔව්! Native adapter භාවිතා කරන්න:

import { NativeAdapter } from '@samithahansaka/dropup/native';

useDropup({ adapter: NativeAdapter });

SSR සහාය දක්වයිද?​

ඔව්! Dropup SSR-safe වේ. එය browser APIs ලබා ගත හැකි විට පමණක් භාවිතා කරයි.

Browser support?​

සියලුම නවීන browsers:

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+

දායක වීම​

දායක විය හැක්කේ කෙසේද?​

  1. Repository fork කරන්න
  2. Feature branch එකක් සාදන්න
  3. Pull request ඉදිරිපත් කරන්න

විස්තර සඳහා CONTRIBUTING.md බලන්න.

Bugs වාර්තා කරන්නේ කෙසේද?​

github.com/samithahansaka/dropup/issues හි issue එකක් විවෘත කරන්න.

Roadmap එකක් තිබේද?​

සැලසුම් කළ features සඳහා GitHub issues සහ discussions පරීක්ෂා කරන්න.