ການຈັດການໄຟລ໌

Dropup ໃຫ້ປະສົບການທີ່ລຽບງ່າຍສຳລັບການຈັດການໄຟລ໌ຕັ້ງແຕ່ຕອນທີ່ພວກມັນຖືກເລືອກຈົນເຖິງເມື່ອພວກມັນຖືກອັບໂຫຼດ.

ວິທີການເລືອກໄຟລ໌

ການລາກ ແລະວາງ

ໃຊ້ getDropProps() ເພື່ອເປີດໃຊ້ງານການລາກ ແລະວາງໃສ່ອົງປະກອບໃດກໍໄດ້:

function DropZone() {
  const { getDropProps, getInputProps, state } = useDropup();

  return (
    <div
      {...getDropProps()}
      style={{
        border: state.isDragging ? '2px dashed blue' : '2px dashed gray',
        backgroundColor: state.isDragging ? '#f0f8ff' : 'transparent',
      }}
    >
      <input {...getInputProps()} />
      <p>ວາງໄຟລ໌ທີ່ນີ້</p>
    </div>
  );
}

ຄລິກເພື່ອເລືອກ

ພື້ນທີ່ວາງຍັງຄລິກໄດ້ໂດຍຄ່າເລີ່ມຕົ້ນ:

<div {...getDropProps()}>
  <input {...getInputProps()} />
  <p>ຄລິກ ຫຼືລາກໄຟລ໌ມາທີ່ນີ້</p>
</div>

ການເລືອກດ້ວຍໂປຣແກຣມ

ເປີດ dialog ເລືອກໄຟລ໌ດ້ວຍໂປຣແກຣມ:

const { openFileDialog } = useDropup();

<button onClick={openFileDialog}>
  ເລືອກໄຟລ໌
</button>

ການເພີ່ມໄຟລ໌ດ້ວຍໂປຣແກຣມ

ເພີ່ມໄຟລ໌ໂດຍກົງ (ເປັນປະໂຫຍດສຳລັບ event paste ຫຼືການເຊື່ອມຕໍ່):

const { actions } = useDropup();

// ຈາກ clipboard
document.addEventListener('paste', (e) => {
  const files = e.clipboardData?.files;
  if (files?.length) {
    actions.addFiles(files);
  }
});

ໂຄງສ້າງອອບເຈັກໄຟລ໌

ແຕ່ລະໄຟລ໌ໃນອາເຣ files ມີໂຄງສ້າງນີ້:

interface DropupFile {
  // ການລະບຸຕົວຕົນ
  id: string;              // ຕົວລະບຸທີ່ບໍ່ຊ້ຳກັນ (ສ້າງອັດຕະໂນມັດ)
  file: File;              // ອອບເຈັກ File ດັ້ງເດີມຂອງບຣາວເຊີ

  // ຂໍ້ມູນ metadata
  name: string;            // ຊື່ໄຟລ໌
  size: number;            // ຂະໜາດເປັນ bytes
  type: string;            // ປະເພດ MIME (ເຊັ່ນ "image/png")

  // ຕົວຢ່າງ (ສຳລັບຮູບພາບ)
  preview?: string;        // URL ອອບເຈັກສຳລັບຕົວຢ່າງ

  // ສະຖານະການອັບໂຫຼດ
  status: FileStatus;      // 'idle' | 'uploading' | 'complete' | 'error' | 'paused'
  progress: number;        // 0-100

  // ຜົນໄດ້ຮັບ
  uploadedUrl?: string;    // URL ຫຼັງຈາກອັບໂຫຼດສຳເລັດ
  response?: unknown;      // ການຕອບກັບຈາກເຊີບເວີ
  error?: DropupError;     // ລາຍລະອຽດຂໍ້ຜິດພາດຖ້າລົ້ມເຫຼວ

  // ຂໍ້ມູນທີ່ກຳນົດເອງ
  meta?: Record<string, unknown>;
}

ວົງຈອນຊີວິດສະຖານະໄຟລ໌

idle → uploading → complete
                 ↘ error → (ລອງໃໝ່) → uploading
                 ↘ paused → (ສືບຕໍ່) → uploading

ຄ່າສະຖານະ

ສະຖານະ	ຄຳອະທິບາຍ
`idle`	ເພີ່ມໄຟລ໌ແລ້ວແຕ່ຍັງບໍ່ໄດ້ອັບໂຫຼດ
`uploading`	ກຳລັງອັບໂຫຼດ
`complete`	ອັບໂຫຼດສຳເລັດ
`error`	ອັບໂຫຼດລົ້ມເຫຼວ
`paused`	ຢຸດການອັບໂຫຼດຊົ່ວຄາວ (ສຳລັບການອັບໂຫຼດທີ່ສາມາດສືບຕໍ່ໄດ້)

ການເຮັດວຽກກັບໄຟລ໌

ການເຂົ້າເຖິງໄຟລ໌

const { files } = useDropup();

// ໄຟລ໌ທັງໝົດ
console.log(files);

// ກັ່ນຕອງຕາມສະຖານະ
const uploading = files.filter(f => f.status === 'uploading');
const completed = files.filter(f => f.status === 'complete');
const failed = files.filter(f => f.status === 'error');

ການລຶບໄຟລ໌

const { files, actions } = useDropup();

// ລຶບໄຟລ໌ດຽວ
actions.remove(files[0].id);

// ລຶບໄຟລ໌ທັງໝົດ
actions.reset();

ການອັບເດດ metadata ໄຟລ໌

const { actions } = useDropup();

// ເພີ່ມ metadata ທີ່ກຳນົດເອງ
actions.updateFileMeta(fileId, {
  customField: 'value',
  category: 'documents',
});

ການສະແດງຕົວຢ່າງໄຟລ໌

ສຳລັບໄຟລ໌ຮູບພາບ, Dropup ສາມາດສ້າງ URL ຕົວຢ່າງ:

const { files } = useDropup({
  generatePreviews: true, // ຄ່າເລີ່ມຕົ້ນ: true
});

// ໃຊ້ຕົວຢ່າງໃນ UI ຂອງທ່ານ
{files.map(file => (
  file.preview && (
    <img
      src={file.preview}
      alt={file.name}
      style={{ maxWidth: 100, maxHeight: 100 }}
    />
  )
))}

ການຈັດການໜ່ວຍຄວາມຈຳ

URL ຕົວຢ່າງແມ່ນ Object URLs ທີ່ໃຊ້ໜ່ວຍຄວາມຈຳ. Dropup ຖອນພວກມັນໂດຍອັດຕະໂນມັດເມື່ອໄຟລ໌ຖືກລຶບ ຫຼືອົງປະກອບຖືກ unmount.

ການຈັດຮູບແບບຂະໜາດໄຟລ໌

ຕົວຊ່ວຍສຳລັບການສະແດງຂະໜາດໄຟລ໌:

function formatFileSize(bytes: number): string {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// ການນຳໃຊ້
{files.map(file => (
  <span>{formatFileSize(file.size)}</span>
))}