การจัดการไฟล์

Dropup ให้ประสบการณ์ที่ราบรื่นในการจัดการไฟล์ตั้งแต่ช่วงเวลาที่เลือกจนกระทั่งอัปโหลด

วิธีการเลือกไฟล์

ลากและวาง

ใช้ getDropProps() เพื่อเปิดใช้งานการลากและวางบน element ใดก็ได้:

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>

การเลือกแบบ Programmatic

เปิดกล่องโต้ตอบไฟล์แบบ programmatic:

const { openFileDialog } = useDropup();

<button onClick={openFileDialog}>
  เลือกไฟล์
</button>

การเพิ่มไฟล์แบบ Programmatic

เพิ่มไฟล์โดยตรง (มีประโยชน์สำหรับ paste events หรือการผสานรวม):

const { actions } = useDropup();

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

โครงสร้าง File Object

แต่ละไฟล์ในอาร์เรย์ files มีโครงสร้างดังนี้:

interface DropupFile {
  // การระบุตัวตน
  id: string;              // ตัวระบุเฉพาะ (สร้างอัตโนมัติ)
  file: File;              // File object ดั้งเดิมของเบราว์เซอร์

  // Metadata
  name: string;            // ชื่อไฟล์
  size: number;            // ขนาดเป็นไบต์
  type: string;            // MIME type (เช่น "image/png")

  // พรีวิว (สำหรับรูปภาพ)
  preview?: string;        // Object 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 → (retry) → uploading
                 ↘ paused → (resume) → uploading

ค่าสถานะ

สถานะ	คำอธิบาย
`idle`	เพิ่มไฟล์แล้วแต่ยังไม่อัปโหลด
`uploading`	กำลังอัปโหลด
`complete`	อัปโหลดสำเร็จ
`error`	อัปโหลดล้มเหลว
`paused`	หยุดการอัปโหลดชั่วคราว (สำหรับการอัปโหลดแบบ resumable)

การทำงานกับไฟล์

การเข้าถึงไฟล์

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 สามารถสร้าง preview URLs:

const { files } = useDropup({
  generatePreviews: true, // ค่าเริ่มต้น: true
});

// ใช้พรีวิวใน UI ของคุณ
{files.map(file => (
  file.preview && (
    <img
      src={file.preview}
      alt={file.name}
      style={{ maxWidth: 100, maxHeight: 100 }}
    />
  )
))}

การจัดการหน่วยความจำ

Preview URLs คือ Object URLs ที่ใช้หน่วยความจำ Dropup เพิกถอนโดยอัตโนมัติเมื่อลบไฟล์หรือ component 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>
))}