Examples/UploadThing Integration

UploadThing Integration

Right-click on images to upload them directly to UploadThing. Perfect for capturing and sharing screenshots, diagrams, and UI elements.

Try It

Right-click on any image below to see the upload option:

Sample Gradient 1
Sample Gradient 2
Sample image

Note: Actual uploads require UploadThing configuration. This demo shows the menu integration.

Features

  • Image Detection - Automatically detects img, picture, canvas, and background images
  • Server-Side Upload - Secure uploads through your Next.js API route
  • Client-Side Option - Direct uploads with localStorage API key for quick setup
  • Screenshot Integration - Upload captured screenshots directly (coming soon)

Setup

1. Install the Package

Terminal
npm install @ewjdev/anyclick-uploadthing uploadthing

2. Create the API Route (Recommended)

app/api/uploadthing/route.ts
import { createUploadThingServerAdapter } from "@ewjdev/anyclick-uploadthing/server";


const adapter = createUploadThingServerAdapter({
  token: process.env.UPLOADTHING_TOKEN!,
});


export async function POST(request: Request) {
  const formData = await request.formData();
  const file = formData.get("file") as File;


  if (!file) {
    return Response.json(
      { error: "No file provided" },
      { status: 400 }
    );
  }


  const result = await adapter.uploadFile(file);


  if (!result.success) {
    return Response.json(
      { error: result.error },
      { status: 500 }
    );
  }


  return Response.json({
    url: result.url,
    key: result.key,
    name: result.name,
  });
}

3. Add Upload Menu Item

app/layout.tsx
import {
  AnyclickProvider,
  createUploadThingMenuItem,
} from "@ewjdev/anyclick-react";


const menuItems = [
  { label: "Report Bug", type: "bug", showComment: true },
  createUploadThingMenuItem({
    endpoint: "/api/uploadthing",
    onUploadComplete: (result) => {
      if (result.url) {
        navigator.clipboard.writeText(result.url);
        console.log("Uploaded:", result.url);
      }
    },
  }),
];


export default function Layout({ children }) {
  return (
    <AnyclickProvider adapter={adapter} menuItems={menuItems}>
      {children}
    </AnyclickProvider>
  );
}

Client-Side Upload (Quick Setup)

For development or simple use cases, you can use direct client-side uploads. Note: This exposes your API key to the browser.

your-component.tsx
import { createUploadThingAdapter } from "@ewjdev/anyclick-uploadthing";


// Create adapter with API key (for dev/testing only)
const adapter = createUploadThingAdapter({
  apiKey: "your-uploadthing-api-key",
  persistApiKey: true, // Store in localStorage
});


// Upload an image
const imageElement = document.querySelector("img");
const result = await adapter.uploadFromElement(imageElement);


if (result.success) {
  console.log("Uploaded to:", result.url);
}

Image Detection

The adapter automatically detects various image types:

detection-example.tsx
import { detectImageElement } from "@ewjdev/anyclick-react";


// Detects: img, picture, canvas, svg, background-image
const result = detectImageElement(element);


if (result.isImage) {
  console.log("Image type:", result.type);
  console.log("Source:", result.src);
}

Supported Image Types

  • img - Standard image elements
  • picture - Responsive image elements
  • canvas - Canvas elements (converted to PNG)
  • svg - SVG graphics
  • background - CSS background images

Environment Variables

Terminal
# Get your token from https://uploadthing.com/dashboard
UPLOADTHING_TOKEN=your-token-here

Next Steps

Explore more integrations and features:

t3.chat IntegrationGitHub IntegrationUploadThing Docs