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

ເລີ່ມຕົ້ນກັບ Dropup

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

ເປັນຫຍັງຕ້ອງ Dropup?​

  • 🪶 ນ້ຳໜັກເບົາ - ແກນຫຼັກມີພຽງ ~10KB ເມື່ອບີບອັດ
  • 🎨 ບໍ່ມີສ່ວນຕິດຕໍ່ຜູ້ໃຊ້ - ຄວບຄຸມ UI ຢ່າງເຕັມທີ່ດ້ວຍ API ທີ່ອີງໃສ່ hooks
  • 📁 ລາກ ແລະວາງ - ຮອງຮັບການລາກ ແລະວາງໃນຕົວ
  • 📊 ຕິດຕາມຄວາມຄືບໜ້າ - ຄວາມຄືບໜ້າການອັບໂຫຼດແບບເວລາຈິງສຳລັບແຕ່ລະໄຟລ໌
  • 🔄 ການອັບໂຫຼດແບບແບ່ງສ່ວນ - ແບ່ງໄຟລ໌ຂະໜາດໃຫຍ່ເພື່ອການອັບໂຫຼດທີ່ເຊື່ອຖືໄດ້
  • ☁️ ພ້ອມສຳລັບຄລາວ - ຕົວຊ່ວຍສຳເລັດຮູບສຳລັບ S3, GCS, ແລະ Azure
  • 🖼️ ການປຸງແຕ່ງຮູບພາບ - ການບີບອັດ ແລະການສ້າງຕົວຢ່າງໃນຕົວ
  • 📱 ຂ້າມແພລດຟອມ - ເຮັດວຽກກັບ React DOM ແລະ React Native
  • 🔒 TypeScript - ຮອງຮັບ TypeScript ຢ່າງເຕັມທີ່

ການຕິດຕັ້ງ​

ຕິດຕັ້ງ Dropup ໂດຍໃຊ້ຕົວຈັດການແພັກເກດທີ່ທ່ານຕ້ອງການ:

npm install @samithahansaka/dropup

ການອີງອາໄສແບບ Peer​

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;        // ຂະໜາດໄຟລ໌ເປັນ bytes
  type: string;        // ປະເພດ MIME
  preview?: string;    // URL ຕົວຢ່າງ (ສຳລັບຮູບພາບ)
  status: 'idle' | 'uploading' | 'complete' | 'error';
  progress: number;    // ຄວາມຄືບໜ້າການອັບໂຫຼດ (0-100)
  error?: Error;       // ອອບເຈັກ Error ຖ້າການອັບໂຫຼດລົ້ມເຫຼວ
  uploadedUrl?: string; // URL ຫຼັງຈາກອັບໂຫຼດສຳເລັດ
}

3. Actions​

ອອບເຈັກ 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, // ອັບໂຫຼດອັດຕະໂນມັດເມື່ອໄຟລ໌ຖືກເພີ່ມ
});

ຂັ້ນຕອນຕໍ່ໄປ​