ຂ້າມໄປຫາເນື້ອຫາຫຼັກ

ວິທີການເຮັດວຽກຂອງ Dropup

Dropup ຖືກສ້າງຂຶ້ນບົນແນວຄວາມຄິດຂອງ UI ແບບບໍ່ມີສ່ວນຕິດຕໍ່ຜູ້ໃຊ້ - ມັນຈັດການກັບຕາລະກະການອັບໂຫຼດໄຟລ໌ທີ່ຊັບຊ້ອນທັງໝົດໃນຂະນະທີ່ໃຫ້ການຄວບຄຸມການນຳສະເໜີທາງສາຍຕາຢ່າງສົມບູນ.

ສະຖາປັດຕະຍະກຳ​

┌─────────────────────────────────────────────────────────────┐
│                     ອົງປະກອບ React ຂອງທ່ານ                   │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │ ພື້ນທີ່ວາງ   │  │ ລາຍການໄຟລ໌ │  │ ປຸ່ມອັບໂຫຼດ          │  │
│  │ (UI ຂອງທ່ານ) │  │ (UI ຂອງທ່ານ) │  │ (UI ຂອງທ່ານ)         │  │
│  └──────┬──────┘  └──────┬──────┘  └──────────┬──────────┘  │
│         │                │                     │             │
│         ▼                ▼                     ▼             │
│  ┌─────────────────────────────────────────────────────────┐│
│  │                    Hook useDropup                       ││
│  │  ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌─────────┐  ││
│  │  │ ເຄື່ອງຈັກ  │ │  ຕົວຈັດການ │ │ ເຄື່ອງຈັກ  │ │ ອະແດັບເຕີ│  ││
│  │  │ ກວດສອບ    │ │  ສະຖານະ   │ │  ອັບໂຫຼດ  │ │ ແພລດຟອມ │  ││
│  │  └───────────┘ └───────────┘ └───────────┘ └─────────┘  ││
│  └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘

ອົງປະກອບຫຼັກ​

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. ອະແດັບເຕີແພລດຟອມ​

Dropup ເຮັດວຽກຂ້າມແພລດຟອມ:

  • ເວັບ - ໃຊ້ API ບຣາວເຊີດັ້ງເດີມ
  • React Native - ໃຊ້ການຈັດການໄຟລ໌ native
  • SSR - ປອດໄພສຳລັບການ render ຝັ່ງເຊີບເວີ

ການໄຫຼຂອງຂໍ້ມູນ​

ການກະທຳຂອງຜູ້ໃຊ້ → ການກວດສອບ → ອັບເດດສະຖານະ → ອັບໂຫຼດ → 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 }),
});