shadimage
better-upload
uipaste-upload-areasource: ok · hit

Paste Upload Area

npx shadcn add "https://better-upload.com/r/paste-upload-area.json"
free

No selection tags yet — empty means no evidence, not lack of support.

Dependencies

Bundle weight · light
@better-upload/client

Files1 · source cached 10/15/2026, 6:15:18 AM

ui/paste-upload-area.tsx
import type { UploadHookControl } from '@better-upload/client';

type PasteUploadAreaProps = {
  children: React.ReactNode;
  control: UploadHookControl<true>;
  metadata?: Record<string, unknown>;
  uploadOverride?: (
    ...args: Parameters<UploadHookControl<true>['upload']>
  ) => void;

  // Add any additional props you need.
};

export function PasteUploadArea({
  children,
  control: { upload, isPending },
  metadata,
  uploadOverride,
}: PasteUploadAreaProps) {
  return (
    <div
      onPasteCapture={(e) => {
        const files = e.clipboardData.files;
        if (files.length > 0 && !isPending) {
          if (uploadOverride) {
            uploadOverride(files, { metadata });
          } else {
            upload(files, { metadata });
          }
        }
      }}
    >
      {children}
    </div>
  );
}

More from better-upload

Browse all components in this library →