file-upload

Implement client-side file upload UX with drag/drop and progress tracking.

Updated May 7, 2026

Search Tags:#tRPC #react-hook-form #file-upload #presigned-urls #dropzone #upload-progress

Ready to run

npx skills add https://github.com/johinsDev/loyalty-app --skill file-upload-johinsdev

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: file-upload
Source: https://github.com/johinsDev/loyalty-app/tree/main/.claude/skills/file-upload
Command: npx skills add https://github.com/johinsDev/loyalty-app --skill file-upload-johinsdev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the friction of adding reliable file uploads—drag/drop UI, upload progress, presigned upload flow, and seamless form submission—without duplicating logic across screens.

Core Features & Use Cases

Dropzone UI primitives: Provides composable, headless compound components in @loyalty/ui for a polished drag/drop experience and file-list rendering.
useFileUpload upload state machine: Manages queued → uploading → success/error states with XHR progress, abort/remove support, and presigned URL create/flow for upload and download URL resolution.
React Hook Form integration: Offers <RHFFileUpload> to bind uploaded file URLs into form fields via a Controller, keeping submit values consistent as string[].

Quick Start

Use <RHFFileUpload> in apps/web to bind an avatar upload field to React Hook Form, so the form submit receives uploaded file URLs automatically.

Frequently Asked Questions about file-upload

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement file upload with progress and drag and drop in React?▼

You implement file upload with progress using headless Dropzone UI primitives and a useFileUpload hook that tracks XHR progress and manages queued to success states.

How does presigned URL file upload work with tRPC?▼

Presigned URL file upload with tRPC works by using a hook to request a presigned URL from the server, uploading the file directly via XHR, and resolving the final download URL.

Can I bind file upload URLs to react-hook-form fields?▼

Yes, you can bind file upload URLs to react-hook-form using an RHFFileUpload bridge component and a Controller, which stores successful download URLs as string arrays in form state.

How do I abort an in-progress file upload in a web application?▼

You abort an in-progress file upload by utilizing the abort support built into the useFileUpload hook's upload state machine, which manages XHR requests and allows cancellation.

Does this file upload approach support multi-file uploads?▼

Yes, this file upload approach supports multi-file uploads by managing individual file states from queued to error while rendering file lists through composable compound components.