---
name: "react-dropzone-file-uploads"
description: "Build accessible drag-and-drop file upload zones with MIME type filtering and size checks."
metadata:
  author: "React Dropzone"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "create file dropzone react"
  - "validate file type react-dropzone"
  - "image preview react-dropzone"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# react-dropzone Drag-and-Drop File Upload Architecture

Configures react-dropzone: useDropzone hook, configuring accept MIME types (image/*, application/pdf), maxFiles, maxSize constraints, drag rejection states, file preview object URLs, and cleaning memory leaks.

## When to Invoke
Invoke this skill whenever you need to:
- create file dropzone react
- validate file type react-dropzone
- image preview react-dropzone

## Execution SOP & Rules
1. Initialize hook: const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop, accept, maxSize }).
2. Handle onDrop(acceptedFiles, fileRejections) and display user-friendly rejection reason toasts.
3. Revoke object URLs in useEffect cleanup: URL.revokeObjectURL(file.preview).
4. Spread root and input props: <div {...getRootProps()}><input {...getInputProps()} />...</div>.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.