10KB
轻量级
核心包压缩后小于 10KB。支持摇树优化以获得最佳体积。
TS
TypeScript
使用 TypeScript 编写，具有完整的类型定义。
0
零依赖
无运行时依赖。仅需要 React 作为对等依赖。
特性
🎨
无头设计
没有内置的 UI 组件。您可以完全控制外观和感觉。构建您想要的上传体验。
📂
拖放上传
直观的拖放文件选择，在拖动时为有效和无效的文件类型提供视觉反馈。
📊
上传进度
实时跟踪单个文件和总体上传进度。构建精美的进度指示器。
✅
文件验证
内置文件类型、大小和尺寸验证。为您的特定需求添加自定义验证规则。
☁️
云存储
使用预签名 URL 直接上传到 S3、Google Cloud Storage、Azure Blob 等。无需服务器代理。
🔄
分块上传
将大文件分割成块以实现可靠的上传。使用 tus 协议支持可恢复上传。
🖼️
图像处理
上传前压缩、调整大小和裁剪图像。自动修复 EXIF 方向问题。
📱
React Native
使用原生适配器在 React Native 中运行。Web 和移动应用的 API 相同。
🌐
SSR 安全
与 Next.js、Remix 和其他 SSR 框架无缝协作。无水合问题。
快速入门
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>
);
}