เบา
แพ็กเกจหลักต่ำกว่า 10KB เมื่อบีบอัด รองรับ Tree-shakeable เพื่อขนาดที่เหมาะสม
TypeScript
เขียนด้วย TypeScript พร้อมนิยามประเภทที่ครอบคลุม
ไม่มี Dependencies
ไม่มี dependencies ในขณะรัน ต้องการเพียง React เป็น peer dependency
คุณสมบัติ
การออกแบบแบบ Headless
ไม่มีคอมโพเนนต์ UI ในตัว คุณมีการควบคุมเต็มรูปแบบเหนือรูปลักษณ์และความรู้สึก สร้างประสบการณ์การอัปโหลดที่คุณต้องการได้อย่างแม่นยำ
ลากและวาง
การเลือกไฟล์แบบลากและวางที่ใช้งานง่าย พร้อมฟีดแบ็กภาพสำหรับประเภทไฟล์ที่ถูกต้องและไม่ถูกต้องขณะลาก
ความคืบหน้าการอัปโหลด
ติดตามความคืบหน้าแบบเรียลไทม์สำหรับไฟล์แต่ละไฟล์และความคืบหน้าโดยรวม สร้างตัวบ่งชี้ความคืบหน้าที่สวยงาม
การตรวจสอบไฟล์
การตรวจสอบในตัวสำหรับประเภทไฟล์ ขนาด และมิติ เพิ่มกฎการตรวจสอบแบบกำหนดเองสำหรับความต้องการเฉพาะของคุณ
พื้นที่เก็บข้อมูลคลาวด์
อัปโหลดโดยตรงไปยัง S3, Google Cloud Storage, Azure Blob และอื่นๆ โดยใช้ URL ที่ลงนามล่วงหน้า ไม่ต้องใช้พร็อกซีเซิร์ฟเวอร์
การอัปโหลดแบบแบ่งส่วน
แบ่งไฟล์ขนาดใหญ่ออกเป็นส่วนๆ เพื่อการอัปโหลดที่เชื่อถือได้ รองรับการอัปโหลดที่สามารถดำเนินการต่อได้ด้วยโปรโตคอล tus
การประมวลผลภาพ
บีบอัด ปรับขนาด และครอปภาพก่อนอัปโหลด แก้ไขปัญหาการหมุน EXIF โดยอัตโนมัติ
React Native
ใช้งานได้ใน React Native ด้วย native adapter API เดียวกันสำหรับแอปพลิเคชันเว็บและมือถือ
รองรับ SSR
ทำงานได้อย่างราบรื่นกับ Next.js, Remix และเฟรมเวิร์ก SSR อื่นๆ ไม่มีปัญหา hydration
เริ่มต้นอย่างรวดเร็ว
1. ติดตั้ง
npm install @samithahansaka/dropup
2. ใช้งาน
import { useDropup } from '@samithahansaka/dropup';
function Uploader() {
const { files, actions, getDropProps, getInputProps } = useDropup({
accept: 'image/*',
upload: { url: '/api/upload' },
});
return (
<div {...getDropProps()}>
<input {...getInputProps()} />
<p>Drop files here</p>
{files.map(file => (
<div key={file.id}>
{file.name} - {file.progress}%
</div>
))}
<button onClick={() => actions.upload()}>Upload</button>
</div>
);
}