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

របៀបដែល Dropup ដំណើរការ

Dropup ត្រូវបានបង្កើតឡើងជុំវិញគំនិតនៃ UI គ្មានចំណុចប្រទាក់ - វាដោះស្រាយតក្កវិជ្ជាផ្ទុកឯកសារឡើងស្មុគស្មាញទាំងអស់ ខណៈពេលដែលផ្តល់ឱ្យអ្នកនូវការគ្រប់គ្រងពេញលេញលើការបង្ហាញរូបភាព។

ស្ថាបត្យកម្ម​

┌─────────────────────────────────────────────────────────────┐
│                     React Component របស់អ្នក                  │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │ តំបន់ទម្លាក់  │  │ បញ្ជីឯកសារ  │  │ ប៊ូតុងផ្ទុកឡើង       │  │
│  │ (UI របស់អ្នក)  │  │ (UI របស់អ្នក) │  │ (UI របស់អ្នក)          │  │
│  └──────┬──────┘  └──────┬──────┘  └──────────┬──────────┘  │
│         │                │                     │             │
│         ▼                ▼                     ▼             │
│  ┌─────────────────────────────────────────────────────────┐│
│  │                    useDropup Hook                        ││
│  │  ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌─────────┐  ││
│  │  │ម៉ាស៊ីន     │ │អ្នកគ្រប់គ្រង │ │ម៉ាស៊ីន     │ │ Adapter │  ││
│  │  │ផ្ទៀងផ្ទាត់  │ │ស្ថានភាព   │ │ផ្ទុកឡើង   │ │វេទិកា   │  ││
│  │  └───────────┘ └───────────┘ └───────────┘ └─────────┘  ││
│  └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘

សមាសភាគសំខាន់ៗ​

1. អ្នកគ្រប់គ្រងស្ថានភាព​

Dropup ប្រើ useReducer របស់ React សម្រាប់ការគ្រប់គ្រងស្ថានភាពដែលអាចទស្សន៍ទាយបាន៖

  • តាមដានឯកសារទាំងអស់ និងស្ថានភាពរបស់ពួកគេ
  • គ្រប់គ្រងស្ថានភាពអូស
  • ដោះស្រាយវឌ្ឍនភាពការផ្ទុកឡើង
  • ផ្តល់តម្លៃដែលបានគណនា

2. ម៉ាស៊ីនផ្ទៀងផ្ទាត់​

មុនពេលឯកសារត្រូវបានបន្ថែម ពួកគេឆ្លងកាត់ការផ្ទៀងផ្ទាត់៖

const { files } = useDropup({
  accept: 'image/*',           // ការផ្ទៀងផ្ទាត់ប្រភេទឯកសារ
  maxSize: 5 * 1024 * 1024,    // ទំហំឯកសារអតិបរមា
  minSize: 1024,               // ទំហំឯកសារអប្បបរមា
  maxFiles: 10,                // ចំនួនឯកសារអតិបរមា
  maxWidth: 4096,              // ទទឹងរូបភាពអតិបរមា
  maxHeight: 4096,             // កម្ពស់រូបភាពអតិបរមា
  customRules: [               // ការផ្ទៀងផ្ទាត់ផ្ទាល់ខ្លួន
    (file) => file.name.length < 100 || 'ឈ្មោះឯកសារវែងពេក'
  ],
});

3. ម៉ាស៊ីនផ្ទុកឡើង​

ម៉ាស៊ីនផ្ទុកឡើងដោះស្រាយ៖

  • ការផ្ទុកឡើងធម្មតា (សំណើមួយក្នុងមួយឯកសារ)
  • ការផ្ទុកឡើងជាបំណែក (បំបែកឯកសារធំ)
  • តក្កវិជ្ជាព្យាយាមឡើងវិញជាមួយ exponential backoff
  • ការគ្រប់គ្រងការផ្ទុកឡើងដំណាលគ្នា
  • ការតាមដានវឌ្ឍនភាព

4. Adapter វេទិកា​

Dropup ដំណើរការឆ្លងកាត់វេទិកា៖

  • Web - ប្រើ browser APIs ដើម
  • React Native - ប្រើការដោះស្រាយឯកសារ native
  • SSR - មានសុវត្ថិភាពសម្រាប់ server-side rendering

លំហូរទិន្នន័យ​

សកម្មភាពអ្នកប្រើ → ការផ្ទៀងផ្ទាត់ → ធ្វើបច្ចុប្បន្នភាពស្ថានភាព → ផ្ទុកឡើង → Callbacks
     │              │            │           │          │
     ▼              ▼            ▼           ▼          ▼
  ជ្រើសរើស/     ទទួលយក/បដិសេធ   files[]    XHR/Fetch   onComplete
  ទម្លាក់ឯកសារ                 បានធ្វើបច្ចុប្បន្នភាព  វឌ្ឍនភាព    onError

គោលការណ៍រចនា​

1. គ្មានចំណុចប្រទាក់ជាមុន​

គ្មានសមាសភាគ UI ដែលបានបង្កើតទុក - អ្នកបង្កើតអ្វីដែលអ្នកត្រូវការ៖

// អ្នកគ្រប់គ្រង UI ទាំងមូល
<div {...getDropProps()}>
  <YourCustomDropZone />
  <input {...getInputProps()} />
</div>

2. សុវត្ថិភាពប្រភេទ​

ការគាំទ្រ TypeScript ពេញលេញជាមួយប្រភេទទូលំទូលាយ៖

import type { DropupFile, UseDropupOptions } from '@samithahansaka/dropup';

const options: UseDropupOptions = {
  accept: 'image/*',
  onUploadComplete: (file: DropupFile) => {
    console.log(file.uploadedUrl);
  },
};

3. Tree Shakeable​

នាំចូលតែអ្វីដែលអ្នកត្រូវការ៖

// ស្នូលតែប៉ុណ្ណោះ (~10KB)
import { useDropup } from '@samithahansaka/dropup';

// បន្ថែមការគាំទ្រពពកនៅពេលចាំបាច់
import { createS3Uploader } from '@samithahansaka/dropup/cloud/s3';

// បន្ថែមការដំណើរការរូបភាពនៅពេលចាំបាច់
import { compressImage } from '@samithahansaka/dropup/image';

4. ការពង្រឹងបន្តិចម្តងៗ​

ចាប់ផ្តើមសាមញ្ញ បន្ថែមមុខងារតាមតម្រូវការ៖

// ការប្រើប្រាស់មូលដ្ឋាន
const { files } = useDropup();

// បន្ថែមការផ្ទៀងផ្ទាត់
const { files } = useDropup({ maxSize: 10_000_000 });

// បន្ថែមការផ្ទុកឡើងស្វ័យប្រវត្តិ
const { files } = useDropup({
  maxSize: 10_000_000,
  upload: { url: '/api/upload' },
  autoUpload: true,
});

// បន្ថែមការផ្ទុកលើពពក
const { files } = useDropup({
  upload: createS3Uploader({ getPresignedUrl }),
});