# File Upload Patterns

> File upload interfaces, progress indication, file type validation, and multi-file upload.

- Skill: `dragoon0x/file-upload-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/file-upload-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/file-upload-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/file-upload-patterns

---


# File Upload Patterns

## Upload Patterns

### Single File
- Button: "Choose File" or styled dropzone.
- Show filename + size after selection.
- Progress bar during upload.
- Success: checkmark + filename. Error: red text + retry.

### Multi-File
- Drag and drop zone with file list below.
- Individual progress bars per file.
- Allow removing files before/during upload.
- Show total progress: "3 of 7 files uploaded."

### Image Upload
- Preview thumbnail after selection.
- Crop/resize tool for profile photos.
- Max size warning before upload starts.
- Format validation: show accepted formats.

## Validation
- Check file type on selection (before upload).
- Check file size on selection (before upload).
- Show accepted formats near the upload control.
- Server-side validation as backup (never trust client only).