រំលងទៅមាតិកាមេ

សំណួរដែលសួរញឹកញាប់

សំណួរ និងចម្លើយទូទៅអំពី Dropup។

ទូទៅ​

Dropup ជាអ្វី?​

Dropup គឺជាបណ្ណាល័យ React សម្រាប់ការផ្ទុកឯកសារឡើងដែលស្រាល និងគ្មានចំណុចប្រទាក់។ វាផ្តល់មុខងារអូសនិងទម្លាក់ ការផ្ទៀងផ្ទាត់ឯកសារ ការតាមដានវឌ្ឍនភាពការផ្ទុកឡើង និងការគាំទ្រសម្រាប់ការផ្ទុកលើពពក - ទាំងអស់នៅក្នុងកញ្ចប់ដែលមានទំហំតិចជាង 10KB ដែលបានបង្ហាប់។

ហេតុអ្វី "គ្មានចំណុចប្រទាក់"?​

គ្មានចំណុចប្រទាក់ មានន័យថា Dropup មិនមានសមាសភាគ UI ណាមួយទេ។ វាផ្តល់តក្កវិជ្ជា និងការគ្រប់គ្រងស្ថានភាព ខណៈពេលដែលអ្នកបង្កើត UI តាមរបៀបដែលអ្នកចង់បាន។ នេះផ្តល់ឱ្យអ្នកនូវការគ្រប់គ្រងពេញលេញលើរូបរាង និងអារម្មណ៍។

ទំហំ bundle គឺប៉ុន្មាន?​

  • ស្នូល (@samithahansaka/dropup): < 10KB ដែលបានបង្ហាប់
  • ជាមួយការគាំទ្រពពក: +2KB ក្នុងមួយអ្នកផ្តល់សេវា
  • ជាមួយការដំណើរការរូបភាព: +5KB
  • ជាមួយពិធីការ tus: +3KB (ត្រូវការ tus-js-client ជា peer)

វាគាំទ្រ TypeScript ទេ?​

បាទ/ចាស! Dropup ត្រូវបានសរសេរក្នុង TypeScript និងរួមបញ្ចូលនិយមន័យប្រភេទយ៉ាងទូលំទូលាយ។ មិនចាំបាច់កញ្ចប់ @types ទេ។

តម្រូវការ React version ណាមួយ?​

React 16.8+ (ត្រូវការការគាំទ្រ hooks)។

ការប្រើប្រាស់​

តើខ្ញុំផ្ទុកឯកសារឡើងយ៉ាងដូចម្តេច?​

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

// ផ្ទុកឡើងឯកសារទាំងអស់
actions.upload();

// ផ្ទុកឡើងឯកសារជាក់លាក់
actions.upload(['file-id-1', 'file-id-2']);

តើខ្ញុំដោះស្រាយកំហុសការផ្ទៀងផ្ទាត់យ៉ាងដូចម្តេច?​

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

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

តើខ្ញុំអាចប្រើតក្កវិជ្ជាផ្ទុកឡើងផ្ទាល់ខ្លួនបានទេ?​

បាទ/ចាស! បញ្ជូនមុខងារជំនួសវត្ថុកំណត់រចនាសម្ព័ន្ធ៖

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

    // តក្កវិជ្ជាផ្ទុកឡើងផ្ទាល់ខ្លួនរបស់អ្នក
    const response = await customUpload(file.file, {
      signal,
      onProgress,
    });

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

តើខ្ញុំបន្ថែមឯកសារដោយកម្មវិធីយ៉ាងដូចម្តេច?​

const { actions } = useDropup();

// ពី clipboard
document.addEventListener('paste', (e) => {
  const files = e.clipboardData?.files;
  if (files) {
    actions.addFiles(files);
  }
});

តើខ្ញុំអាចមានតំបន់ទម្លាក់ច្រើនបានទេ?​

បាទ/ចាស! ការហៅ useDropup នីមួយៗបង្កើត instance ឯករាជ្យ៖

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

// ប្រើដោយឡែកពីគ្នា
<div {...images.getDropProps()}>...</div>
<div {...documents.getDropProps()}>...</div>

ការផ្ទុកឡើង​

តើខ្ញុំបង្ហាញវឌ្ឍនភាពការផ្ទុកឡើងយ៉ាងដូចម្តេច?​

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

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

តើខ្ញុំបោះបង់ការផ្ទុកឡើងយ៉ាងដូចម្តេច?​

const { actions } = useDropup();

// បោះបង់ឯកសារជាក់លាក់
actions.cancel('file-id');

// បោះបង់ការផ្ទុកឡើងទាំងអស់
actions.cancel();

តើខ្ញុំព្យាយាមផ្ទុកឡើងឡើងវិញសម្រាប់ឯកសារដែលបរាជ័យយ៉ាងដូចម្តេច?​

const { actions } = useDropup();

// ព្យាយាមឡើងវិញឯកសារជាក់លាក់
actions.retry(['file-id']);

// ព្យាយាមឡើងវិញទាំងអស់ដែលបរាជ័យ
actions.retry();

វាគាំទ្រការផ្ទុកឡើងជាបំណែកទេ?​

បាទ/ចាស! ប្រើ createChunkedUploader៖

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

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

តើខ្ញុំអាចផ្ទុកឡើងទៅ S3 ដោយផ្ទាល់បានទេ?​

បាទ/ចាស! ប្រើ 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
useDropup({ accept: 'image/*' });

// តាមផ្នែកបន្ថែម
useDropup({ accept: '.pdf, .doc' });

// ច្រើន
useDropup({ accept: ['image/*', 'application/pdf'] });

តើខ្ញុំកំណត់ដែនកំណត់ទំហំយ៉ាងដូចម្តេច?​

useDropup({
  maxSize: 10 * 1024 * 1024, // អតិបរមា 10MB
  minSize: 1024,             // អប្បបរមា 1KB
});

តើខ្ញុំកំណត់ចំនួនឯកសារយ៉ាងដូចម្តេច?​

useDropup({
  maxFiles: 5,
});

តើខ្ញុំអាចបន្ថែមការផ្ទៀងផ្ទាត់ផ្ទាល់ខ្លួនបានទេ?​

បាទ/ចាស! ប្រើ customRules៖

useDropup({
  customRules: [
    (file) => {
      if (file.name.includes('draft')) {
        return 'ឯកសារព្រាង មិនត្រូវបានអនុញ្ញាតទេ';
      }
      return true;
    },
  ],
});

ការមើលមុន​

តើខ្ញុំបង្ហាញការមើលមុនរូបភាពយ៉ាងដូចម្តេច?​

ការមើលមុនត្រូវបានបើកដោយលំនាំដើម៖

const { files } = useDropup();

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

តើខ្ញុំត្រូវសម្អាត preview URLs ទេ?​

ទេ! Dropup ដកហូត Object URLs ដោយស្វ័យប្រវត្តិនៅពេលឯកសារត្រូវបានលុប ឬ component unmount។

តើខ្ញុំអាចបិទការមើលមុនបានទេ?​

useDropup({ generatePreviews: false });

ការដោះស្រាយបញ្ហា​

ឯកសារមិនផ្ទុកឡើង​

  1. ពិនិត្យថា upload ត្រូវបានកំណត់រចនាសម្ព័ន្ធ៖

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

  2. ប្រាកដថាអ្នកហៅ actions.upload() (លុះត្រាតែ autoUpload: true)

  3. ពិនិត្យ browser console សម្រាប់កំហុសបណ្តាញ

Preview URLs មិនដំណើរការ​

  1. ប្រាកដថាឯកសារគឺជារូបភាព
  2. ពិនិត្យថា generatePreviews មិនមែន false
  3. ផ្ទៀងផ្ទាត់ថាវត្ថុឯកសារមាន property preview ត្រឹមត្រូវ

អូស និងទម្លាក់មិនដំណើរការ​

  1. ប្រាកដថាអ្នក spread getDropProps() លើធាតុ container
  2. រួមបញ្ចូល input លាក់៖ <input {...getInputProps()} />
  3. ពិនិត្យថា disabled មិនមែន true

កំហុស TypeScript​

  1. ធ្វើបច្ចុប្បន្នភាពទៅ Dropup version ចុងក្រោយ
  2. ប្រាកដថា tsconfig.json មាន moduleResolution ត្រឹមត្រូវ
  3. ពិនិត្យថា @samithahansaka/dropup នៅក្នុង dependencies មិនមែន devDependencies

ការលេចធ្លាយអង្គចងចាំ​

  1. ប្រាកដថា components ដែលប្រើ useDropup unmount យ៉ាងត្រឹមត្រូវ
  2. ហៅ actions.reset() មុនពេល unmount ប្រសិនបើចាំបាច់
  3. កុំផ្ទុកឯកសារក្នុង external state ដោយមិនមានការសម្អាត

ភាពឆបគ្នា​

វាដំណើរការជាមួយ Next.js ទេ?​

បាទ/ចាស! ប្រើ directive 'use client'៖

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

វាដំណើរការជាមួយ React Native ទេ?​

បាទ/ចាស! ប្រើ native adapter៖

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

useDropup({ adapter: NativeAdapter });

វាគាំទ្រ SSR ទេ?​

បាទ/ចាស! Dropup មានសុវត្ថិភាព SSR។ វាប្រើ browser APIs តែពេលដែលមាន។

ការគាំទ្រ Browser?​

Browser ទំនើបទាំងអស់៖

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

ការរួមចំណែក​

តើខ្ញុំអាចរួមចំណែកយ៉ាងដូចម្តេច?​

  1. Fork repository
  2. បង្កើត feature branch
  3. បញ្ជូន pull request

មើល CONTRIBUTING.md សម្រាប់ព័ត៌មានលម្អិត។

តើខ្ញុំរាយការណ៍ bugs យ៉ាងដូចម្តេច?​

បើក issue នៅ github.com/samithahansaka/dropup/issues។

មាន roadmap ទេ?​

ពិនិត្យ GitHub issues និង discussions សម្រាប់មុខងារដែលបានគ្រោង។