uploadthing-elements
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseUploadThing Elements
UploadThing Elements
7 file upload components. Requires (auto-installed as dependency).
@uploadthing/react共7款文件上传组件，需要依赖（会作为依赖自动安装）。
@uploadthing/reactInstall Pattern
安装方式
bash
npx shadcn@latest add @elements/uploadthing-{name}bash
npx shadcn@latest add @elements/uploadthing-{name}Components
组件列表
| Component | Install | Description |
|---|---|---|
| Button | | Simple upload button |
| Dropzone | | Drag-and-drop zone with progress |
| Avatar | | Avatar upload with crop |
| File Card | | File display card |
| Image Grid | | Image gallery from uploads |
| Paste | | Paste-to-upload area |
| Progress | | Upload progress indicator |
| 组件 | 安装命令 | 描述 |
|---|---|---|
| Button | | 简易上传按钮 |
| Dropzone | | 带进度的拖拽上传区 |
| Avatar | | 带裁剪功能的头像上传组件 |
| File Card | | 文件展示卡片 |
| Image Grid | | 上传文件生成的图片画廊 |
| Paste | | 粘贴上传区域 |
| Progress | | 上传进度指示器 |
Quick Patterns
快速安装示例
bash
undefinedbash
undefinedBasic upload
基础上传功能
npx shadcn@latest add @elements/uploadthing-button @elements/uploadthing-progress
npx shadcn@latest add @elements/uploadthing-button @elements/uploadthing-progress
Full file management
完整文件管理功能
npx shadcn@latest add @elements/uploadthing-dropzone @elements/uploadthing-file-card @elements/uploadthing-image-grid
npx shadcn@latest add @elements/uploadthing-dropzone @elements/uploadthing-file-card @elements/uploadthing-image-grid
Avatar upload
头像上传功能
npx shadcn@latest add @elements/uploadthing-avatar
undefinednpx shadcn@latest add @elements/uploadthing-avatar
undefinedSetup
配置要求
Requires UploadThing API key and file router. See https://docs.uploadthing.com/getting-started
需要UploadThing API密钥和文件路由，参考：https://docs.uploadthing.com/getting-started