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

ការចាប់ផ្តើមជាមួយ Dropup

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

ហេតុអ្វីជ្រើសរើស Dropup?​

  • 🪶 ស្រាលទម្ងន់ - ស្នូលមានតែ ~10KB ដែលបានបង្ហាប់
  • 🎨 គ្មានចំណុចប្រទាក់ - ការគ្រប់គ្រងពេញលេញលើ UI របស់អ្នកជាមួយ API ដែលផ្អែកលើ hooks
  • 📁 អូស និងទម្លាក់ - ការគាំទ្រអូសនិងទម្លាក់ដែលបានបង្កើតទុក
  • 📊 ការតាមដានវឌ្ឍនភាព - វឌ្ឍនភាពការផ្ទុកឡើងតាមពេលវេលាជាក់ស្តែងសម្រាប់ឯកសារនីមួយៗ
  • 🔄 ការផ្ទុកឡើងជាបំណែក - បំបែកឯកសារធំៗសម្រាប់ការផ្ទុកឡើងប្រកបដោយភាពជឿជាក់
  • ☁️ រួចរាល់សម្រាប់ពពក - កម្មវិធីជំនួយដែលបានបង្កើតទុកសម្រាប់ S3, GCS និង Azure
  • 🖼️ ការដំណើរការរូបភាព - ការបង្ហាប់និងការបង្កើតការមើលមុនដែលបានបង្កើតទុក
  • 📱 ឆ្លងវេទិកា - ដំណើរការជាមួយ React DOM និង React Native
  • 🔒 TypeScript - ការគាំទ្រ TypeScript ពេញលេញ

ការដំឡើង​

ដំឡើង Dropup ដោយប្រើកម្មវិធីគ្រប់គ្រងកញ្ចប់ដែលអ្នកពេញចិត្ត៖

npm install @samithahansaka/dropup

ភាពអាស្រ័យកម្រិតដូចគ្នា​

Dropup ត្រូវការ React 16.8 ឬខ្ពស់ជាងនេះ (សម្រាប់ការគាំទ្រ hooks)៖

npm install react

ការចាប់ផ្តើមរហ័ស​

នេះគឺជាឧទាហរណ៍សាមញ្ញដើម្បីជួយអ្នកចាប់ផ្តើម៖

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

function FileUploader() {
  const {
    files,
    state,
    actions,
    getDropProps,
    getInputProps
  } = useDropup({
    accept: 'image/*',
    maxSize: 10 * 1024 * 1024, // 10MB
    multiple: true,
  });

  return (
    <div>
      {/* តំបន់ទម្លាក់ */}
      <div
        {...getDropProps()}
        style={{
          border: state.isDragging ? '2px dashed blue' : '2px dashed gray',
          padding: 40,
          textAlign: 'center',
          cursor: 'pointer',
        }}
      >
        <input {...getInputProps()} />
        <p>អូស និងទម្លាក់ឯកសារនៅទីនេះ ឬចុចដើម្បីជ្រើសរើស</p>
      </div>

      {/* បញ្ជីឯកសារ */}
      <ul>
        {files.map((file) => (
          <li key={file.id}>
            {file.name} - {file.status}
            {file.status === 'uploading' && ` (${file.progress}%)`}
            <button onClick={() => actions.remove(file.id)}>លុប</button>
          </li>
        ))}
      </ul>

      {/* ប៊ូតុងផ្ទុកឡើង */}
      {files.length > 0 && (
        <button onClick={() => actions.upload()}>
          ផ្ទុកឡើងទាំងអស់
        </button>
      )}
    </div>
  );
}

គំនិតស្នូល​

1. Hook useDropup​

Hook useDropup គឺជាចំណុចចូលសំខាន់។ វាត្រឡប់អ្វីគ្រប់យ៉ាងដែលអ្នកត្រូវការដើម្បីបង្កើត UI ការផ្ទុកឯកសារឡើងរបស់អ្នក៖

const {
  files,           // អារេនៃឯកសារជាមួយស្ថានភាព, វឌ្ឍនភាព, ល។
  state,           // ស្ថានភាពទូទៅ (isDragging, isUploading, progress)
  actions,         // វិធីសាស្រ្តសម្រាប់ផ្ទុកឡើង, លុប, បោះបង់, កំណត់ឡើងវិញ
  getDropProps,    // Props សម្រាប់ធាតុតំបន់ទម្លាក់របស់អ្នក
  getInputProps,   // Props សម្រាប់ input ឯកសារលាក់
} = useDropup(options);

2. វត្ថុឯកសារ​

ឯកសារនីមួយៗក្នុងអារេ files មាន៖

{
  id: string;          // អត្តសញ្ញាណតែមួយគត់
  file: File;          // វត្ថុ File ដើម
  name: string;        // ឈ្មោះឯកសារ
  size: number;        // ទំហំឯកសារជាបៃ
  type: string;        // ប្រភេទ MIME
  preview?: string;    // URL មើលមុន (សម្រាប់រូបភាព)
  status: 'idle' | 'uploading' | 'complete' | 'error';
  progress: number;    // វឌ្ឍនភាពការផ្ទុកឡើង (0-100)
  error?: Error;       // វត្ថុកំហុសប្រសិនបើការផ្ទុកឡើងបរាជ័យ
  uploadedUrl?: string; // URL បន្ទាប់ពីការផ្ទុកឡើងជោគជ័យ
}

3. សកម្មភាព​

វត្ថុ actions ផ្តល់វិធីសាស្រ្តដើម្បីគ្រប់គ្រងការផ្ទុកឡើង៖

actions.upload(fileIds?)    // ចាប់ផ្តើមផ្ទុកឡើង (ទាំងអស់ ឬឯកសារជាក់លាក់)
actions.cancel(fileId?)     // បោះបង់ការផ្ទុកឡើង
actions.remove(fileId)      // លុបឯកសារចេញពីបញ្ជី
actions.reset()             // សម្អាតឯកសារទាំងអស់
actions.retry(fileIds?)     // ព្យាយាមផ្ទុកឡើងឡើងវិញសម្រាប់ឯកសារដែលបរាជ័យ

ការកំណត់រចនាសម្ព័ន្ធការផ្ទុកឡើង​

ដើម្បីបើកការផ្ទុកឡើងពិតប្រាកដ សូមផ្តល់ការកំណត់រចនាសម្ព័ន្ធការផ្ទុកឡើង៖

const { files } = useDropup({
  upload: {
    url: '/api/upload',
    method: 'POST',
    headers: {
      'Authorization': 'Bearer token',
    },
  },
  autoUpload: true, // ផ្ទុកឡើងដោយស្វ័យប្រវត្តិនៅពេលបន្ថែមឯកសារ
});

ជំហានបន្ទាប់​