ข้ามไปยังเนื้อหาหลัก

คำถามที่พบบ่อย

คำถามและคำตอบที่พบบ่อยเกี่ยวกับ Dropup

ทั่วไป​

Dropup คืออะไร?​

Dropup เป็นไลบรารี React แบบ headless ที่มีขนาดเล็กสำหรับอัปโหลดไฟล์ ให้ฟังก์ชันลากและวาง, การตรวจสอบไฟล์, การติดตามความคืบหน้าการอัปโหลด และรองรับคลาวด์สตอเรจ - ทั้งหมดในแพ็กเกจที่มีขนาดน้อยกว่า 10KB gzipped

ทำไมถึงเป็น "headless"?​

Headless หมายความว่า Dropup ไม่รวม UI components ใดๆ ให้ตรรกะและการจัดการ state ในขณะที่คุณสร้าง UI ตามที่ต้องการ ทำให้คุณควบคุมรูปลักษณ์ได้อย่างสมบูรณ์

ขนาด bundle เท่าไหร่?​

  • Core (@samithahansaka/dropup): < 10KB gzipped
  • พร้อมรองรับคลาวด์: +2KB ต่อ provider
  • พร้อมประมวลผลรูปภาพ: +5KB
  • พร้อม tus protocol: +3KB (ต้องการ tus-js-client peer)

รองรับ TypeScript ไหม?​

ได้! Dropup เขียนด้วย TypeScript และรวม type definitions ที่ครอบคลุม ไม่ต้องการแพ็กเกจ @types

ต้องการ React เวอร์ชันอะไร?​

React 16.8+ (ต้องรองรับ hooks)

การใช้งาน​

อัปโหลดไฟล์อย่างไร?​

const { files, actions } = useDropup({
  upload: { url: '/api/upload' },
});

// อัปโหลดไฟล์ทั้งหมด
actions.upload();

// อัปโหลดไฟล์ที่ระบุ
actions.upload(['file-id-1', 'file-id-2']);

จัดการ validation errors อย่างไร?​

useDropup({
  accept: 'image/*',
  maxSize: 5 * 1024 * 1024,

  onValidationError: (errors) => {
    errors.forEach(({ file, errors }) => {
      console.log(`${file.name}: ${errors.join(', ')}`);
    });
  },
});

สามารถใช้ตรรกะอัปโหลดแบบกำหนดเองได้ไหม?​

ได้! ส่งฟังก์ชันแทน config object:

useDropup({
  upload: async (file, options) => {
    const { signal, onProgress } = options;

    // ตรรกะอัปโหลดแบบกำหนดเองของคุณ
    const response = await customUpload(file.file, {
      signal,
      onProgress,
    });

    return { url: response.url };
  },
});

เพิ่มไฟล์แบบ programmatic อย่างไร?​

const { actions } = useDropup();

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

สามารถมี drop zones หลายอันได้ไหม?​

ได้! แต่ละการเรียก useDropup สร้าง instance อิสระ:

const images = useDropup({ accept: 'image/*' });
const documents = useDropup({ accept: '.pdf' });

// ใช้แยกกัน
<div {...images.getDropProps()}>...</div>
<div {...documents.getDropProps()}>...</div>

การอัปโหลด​

แสดงความคืบหน้าการอัปโหลดอย่างไร?​

const { files } = useDropup({ upload: { url: '/api/upload' } });

{files.map(file => (
  <div key={file.id}>
    {file.name}: {file.progress}%
  </div>
))}

ยกเลิกการอัปโหลดอย่างไร?​

const { actions } = useDropup();

// ยกเลิกไฟล์ที่ระบุ
actions.cancel('file-id');

// ยกเลิกการอัปโหลดทั้งหมด
actions.cancel();

ลองอัปโหลดที่ล้มเหลวใหม่อย่างไร?​

const { actions } = useDropup();

// ลองใหม่ไฟล์ที่ระบุ
actions.retry(['file-id']);

// ลองใหม่ทั้งหมดที่ล้มเหลว
actions.retry();

รองรับการอัปโหลดแบบ chunked ไหม?​

ได้! ใช้ createChunkedUploader:

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

useDropup({
  upload: createChunkedUploader({
    url: '/api/upload/chunk',
    chunkSize: 5 * 1024 * 1024, // 5MB
  }),
});

สามารถอัปโหลดไปยัง S3 โดยตรงได้ไหม?​

ได้! ใช้ cloud uploader:

import { createS3Uploader } from '@samithahansaka/dropup/cloud/s3';

useDropup({
  upload: createS3Uploader({
    getPresignedUrl: async (file) => {
      const res = await fetch('/api/s3/presign', {
        method: 'POST',
        body: JSON.stringify({ filename: file.name }),
      });
      return res.json();
    },
  }),
});

การตรวจสอบ​

จำกัดประเภทไฟล์อย่างไร?​

// ตาม MIME type
useDropup({ accept: 'image/*' });

// ตามนามสกุล
useDropup({ accept: '.pdf, .doc' });

// หลายประเภท
useDropup({ accept: ['image/*', 'application/pdf'] });

กำหนดขีดจำกัดขนาดอย่างไร?​

useDropup({
  maxSize: 10 * 1024 * 1024, // สูงสุด 10MB
  minSize: 1024,             // ต่ำสุด 1KB
});

จำกัดจำนวนไฟล์อย่างไร?​

useDropup({
  maxFiles: 5,
});

สามารถเพิ่มการตรวจสอบแบบกำหนดเองได้ไหม?​

ได้! ใช้ customRules:

useDropup({
  customRules: [
    (file) => {
      if (file.name.includes('draft')) {
        return 'ไม่อนุญาตไฟล์ draft';
      }
      return true;
    },
  ],
});

พรีวิว​

แสดงพรีวิวรูปภาพอย่างไร?​

พรีวิวเปิดใช้งานโดยค่าเริ่มต้น:

const { files } = useDropup();

{files.map(file => (
  file.preview && <img src={file.preview} alt="" />
))}

ต้องล้าง preview URLs ไหม?​

ไม่! Dropup เพิกถอน Object URLs โดยอัตโนมัติเมื่อลบไฟล์หรือ component unmount

สามารถปิดพรีวิวได้ไหม?​

useDropup({ generatePreviews: false });

การแก้ปัญหา​

ไฟล์ไม่อัปโหลด​

  1. ตรวจสอบว่ากำหนดค่า upload แล้ว:

    useDropup({ upload: { url: '/api/upload' } });

  2. ตรวจสอบว่าเรียก actions.upload() (เว้นแต่ autoUpload: true)

  3. ตรวจสอบ browser console สำหรับ network errors

Preview URLs ไม่ทำงาน​

  1. ตรวจสอบว่าไฟล์เป็นรูปภาพ
  2. ตรวจสอบว่า generatePreviews ไม่ใช่ false
  3. ยืนยันว่า file object มี property preview ที่ถูกต้อง

ลากและวางไม่ทำงาน​

  1. ตรวจสอบว่า spread getDropProps() บน container element
  2. รวม hidden input: <input {...getInputProps()} />
  3. ตรวจสอบว่า disabled ไม่ใช่ true

TypeScript errors​

  1. อัปเดตเป็นเวอร์ชัน Dropup ล่าสุด
  2. ตรวจสอบว่า tsconfig.json มี moduleResolution ที่ถูกต้อง
  3. ตรวจสอบว่า @samithahansaka/dropup อยู่ใน dependencies ไม่ใช่ devDependencies

Memory leaks​

  1. ตรวจสอบว่า components ที่ใช้ useDropup unmount อย่างถูกต้อง
  2. เรียก actions.reset() ก่อน unmount ถ้าจำเป็น
  3. อย่าเก็บไฟล์ใน external state โดยไม่ cleanup

ความเข้ากันได้​

ใช้งานกับ Next.js ได้ไหม?​

ได้! ใช้ 'use client' directive:

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

ใช้งานกับ React Native ได้ไหม?​

ได้! ใช้ native adapter:

import { NativeAdapter } from '@samithahansaka/dropup/native';

useDropup({ adapter: NativeAdapter });

รองรับ SSR ไหม?​

ได้! Dropup ปลอดภัยสำหรับ SSR ใช้ browser APIs เฉพาะเมื่อพร้อมใช้งานเท่านั้น

รองรับเบราว์เซอร์อะไรบ้าง?​

เบราว์เซอร์สมัยใหม่ทั้งหมด:

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+

การมีส่วนร่วม​

มีส่วนร่วมอย่างไร?​

  1. Fork repository
  2. สร้าง feature branch
  3. ส่ง pull request

ดู CONTRIBUTING.md สำหรับรายละเอียด

รายงาน bugs อย่างไร?​

เปิด issue ที่ github.com/samithahansaka/dropup/issues

มี roadmap ไหม?​

ตรวจสอบ GitHub issues และ discussions สำหรับฟีเจอร์ที่วางแผนไว้