s3-upload-handlerlisted

# S3 Upload Handler Skill This skill provides methods to handle file uploads to AWS S3 using pre-built UI components, custom client-side logic, or server-side processing. ## Capabilities 1. **UI Component**: Ready-to-use `S3Uploader` for drag-and-drop or button uploads. 2. **Client SDK**: `ClientS3Uploader` class for custom upload interfaces. 3. **Server Utilities**: `uploadFromServer` for backend file processing and uploading. ## Usage Patterns ### 1. Standard UI Component (Recommended) Use the `S3Uploader` component for most user-facing upload needs. ```tsx import { S3Uploader } from "@/components/ui/s3-uploader/s3-uploader"; // Usage in a form or page <S3Uploader presignedRouteProvider="/api/app/your-upload-route" // API route to get signed URL variant="dropzone" // or "button" maxFiles={5} accept="image/*" // or specific extensions like ".pdf,.doc" onUpload={async (fileUrls) => { console.log("Files uploaded:", fileUrls); // Handle success (e.g., update form state) }} /> ``` ### 2. Custom Client-Side Upload Use `ClientS3Uploader` when you need full control over the UI (e.g., hidden inputs, custom buttons). ```tsx import { ClientS3Uploader } from "@/lib/s3/clientS3Uploader"; // Initialize const uploader = new ClientS3Uploader({ presignedRouteProvider: "/api/app/your-upload-route" }); // Upload a file const url = await uploader.uploadFile(fileObject); ``` ### 3. Server-Side Upload Use `uploadFromServer` in API routes or Server Actions