skills.rest
johinsDev
johinsDevCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/johinsDev/loyalty-app --skill file-upload-johinsdev
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
johinsDevjohinsDev

storage

Create presigned upload and download URLs for provider-agnostic file storage.

Community
Advanced
Bbeierle12Bbeierle12
8

form-react

Build React forms with React Hook Form and Zod validation.

Community
Intermediate
salmanrranasalmanrrana
7

TanStack Forms

Integrate TanStack Forms with React for form construction, validation, and submission.

Community
Advanced
PlazaCCPlazaCC
2

non-json-content-types

Enable tRPC mutations to accept FormData and binary streams via octetInputParser and splitLink.

Official
Advanced