Command Palette

Search for a command to run...

UploadThing/UploadThing Paste

UploadThing Paste

A clipboard paste zone that accepts pasted images and files. Perfect for quick screenshot uploads.

Open in v0Open in
Click to focus, then paste

Overview

A paste zone that accepts files from the clipboard. Click to focus, then paste with Cmd+V (or Ctrl+V). Great for quick screenshot uploads.

Installation

npx shadcn@latest add @elements/uploadthing-paste

Usage

import { UploadThingPaste } from "@/components/elements/uploadthing/uploadthing-paste";

export function PasteUploader() {
  return (
    <UploadThingPaste
      onPaste={(files) => console.log("Pasted:", files)}
      accept={["image/*"]}
    >
      <p>Click and paste an image (Cmd+V)</p>
    </UploadThingPaste>
  );
}

Props

PropTypeDefaultDescription
onPaste(files: File[]) => void-Called when files are pasted
onUpload(files: File[]) => void-Called to trigger upload
acceptstring[]["image/*"]Accepted MIME types
disabledbooleanfalseDisable paste
childrenReactNode-Custom content
classNamestring-Additional CSS classes

Features

  • Focus indicator ring
  • Keyboard shortcut hint (Cmd+V / Ctrl+V)
  • Custom content via children
  • MIME type filtering
  • Disabled state support