The Complete Production SOP: How to Deploy and Run react-dropzone Drag-and-Drop File Upload Architecture in Autonomous AI Agents

---
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
---

'use client';

import React, { useState, useEffect, useCallback } from 'react';
import { useDropzone, FileRejection, DropzoneOptions } from 'react-dropzone';
import { UploadCloud, X, FileCheck, AlertCircle } from 'lucide-react';

export interface UploadFile extends File {
  preview?: string;
  id: string;
}

interface FileUploadDropzoneProps {
  onFilesSelected?: (files: File[]) => void;
  maxSizeInBytes?: number;
  maxFiles?: number;
}

export const FileUploadDropzone: React.FC<FileUploadDropzoneProps> = ({
  onFilesSelected,
  maxSizeInBytes = 5 * 1024 * 1024, // 5MB
  maxFiles = 5,
}) => {
  const [files, setFiles] = useState<UploadFile[]>([]);
  const [rejections, setRejections] = useState<FileRejection[]>([]);

  const onDrop = useCallback(
    (accepted: File[], rejected: FileRejection[]) => {
      const mappedAccepted = accepted.map((file) =>
        Object.assign(file, {
          preview: file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined,
          id: crypto.randomUUID(),
        })
      );

      setFiles((prev) => [...prev, ...mappedAccepted].slice(0, maxFiles));
      setRejections(rejected);
      if (onFilesSelected) {
        onFilesSelected(accepted);
      }
    },
    [maxFiles, onFilesSelected]
  );

  useEffect(() => {
    // Cleanup object URLs to prevent browser memory leaks
    return () => {
      files.forEach((file) => {
        if (file.preview) {
          URL.revokeObjectURL(file.preview);
        }
      });
    };
  }, [files]);

  const removeFile = (id: string) => {
    setFiles((prev) => {
      const target = prev.find((f) => f.id === id);
      if (target?.preview) {
        URL.revokeObjectURL(target.preview);
      }
      return prev.filter((f) => f.id !== id);
    });
  };

  const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({
    onDrop,
    maxSize: maxSizeInBytes,
    maxFiles,
    accept: {
      'image/png': ['.png'],
      'image/jpeg': ['.jpg', '.jpeg'],
      'application/pdf': ['.pdf'],
    },
  });

  return (
    <div className="w-full max-w-xl mx-auto space-y-4">
      <div
        {...getRootProps()}
        className={`border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-colors ${
          isDragReject
            ? 'border-red-500 bg-red-50/50'
            : isDragActive
            ? 'border-blue-500 bg-blue-50/50'
            : 'border-slate-300 hover:border-slate-400 bg-slate-50'
        }`}
      >
        <input {...getInputProps()} />
        <UploadCloud className="mx-auto h-12 w-12 text-slate-400 mb-2" />
        <p className="text-sm text-slate-600 font-medium">
          {isDragActive
            ? 'Drop the files here...'
            : 'Drag & drop files here, or click to browse'}
        </p>
        <p className="text-xs text-slate-400 mt-1">
          PNG, JPG, or PDF up to 5MB (Max {maxFiles} files)
        </p>
      </div>

      {rejections.length > 0 && (
        <div className="rounded-lg bg-red-50 p-4 border border-red-200">
          <div className="flex items-center text-red-800 text-sm font-medium mb-1">
            <AlertCircle className="h-4 w-4 mr-2" />
            Upload Rejections
          </div>
          <ul className="text-xs text-red-600 list-disc list-inside space-y-1">
            {rejections.map(({ file, errors }) => (
              <li key={file.name}>
                {file.name}: {errors.map((e) => e.message).join(', ')}
              </li>
            ))}
          </ul>
        </div>
      )}

      {files.length > 0 && (
        <div className="grid grid-cols-2 gap-3">
          {files.map((file) => (
            <div
              key={file.id}
              className="relative flex items-center p-2 border rounded-lg bg-white shadow-sm"
            >
              {file.preview ? (
                <img
                  src={file.preview}
                  alt={file.name}
                  className="h-12 w-12 object-cover rounded mr-3"
                />
              ) : (
                <FileCheck className="h-12 w-12 text-slate-400 p-2 mr-3" />
              )}
              <div className="overflow-hidden flex-1">
                <p className="text-xs font-medium truncate">{file.name}</p>
                <p className="text-[10px] text-slate-400">
                  {(file.size / 1024).toFixed(1)} KB
                </p>
              </div>
              <button
                type="button"
                onClick={(e) => {
                  e.stopPropagation();
                  removeFile(file.id);
                }}
                aria-label="Remove file"
                className="absolute top-1 right-1 p-1 text-slate-400 hover:text-red-500 rounded-full"
              >
                <X className="h-4 w-4" />
              </button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

# In Claude Code CLI:
claude "create file dropzone react with image preview react-dropzone and validate file type react-dropzone for images and PDFs"

# Or in Cursor Composer / Codex Desktop:
# Submit prompt referencing the skill triggers explicitly.

import { render, screen, fireEvent } from '@testing-library/react';
import { FileUploadDropzone } from '../FileUploadDropzone';
import React from 'react';

describe('FileUploadDropzone SOP Conformance', () => {
  beforeAll(() => {
    global.URL.createObjectURL = jest.fn(() => 'blob:mock-url');
    global.URL.revokeObjectURL = jest.fn();
  });

  afterEach(() => {
    jest.clearAllMocks();
  });

  it('renders input with accessible dropzone semantics', () => {
    render(<FileUploadDropzone />);
    const input = screen.getByRole('presentation').querySelector('input');
    expect(input).toBeInTheDocument();
  });

  it('revokes object URLs on unmount', () => {
    const { unmount } = render(<FileUploadDropzone />);
    unmount();
    // Verifies cleanup lifecycle does not throw
    expect(true).toBe(true);
  });
});