Media Input

Component 1

About

Local media file picker that previews via an object URL; empty-state prompt, replace and clear, size validation. Nothing leaves the browser.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Media Input to your project and fits it to your theme.

Code

How Media Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import {
  MediaInput,
  MediaInputEmpty,
  MediaInputContent,
  MediaInputTrigger,
  MediaInputFile,
  MediaInputClear,
  useMediaInput,
} from "@/components/ui/media-input";

function MediaInputPreview() {
  const { value } = useMediaInput();
  if (!value) return null;

  return (
    <img
      src={value.url}
      alt={value.file.name}
      className="h-40 w-full rounded-md object-cover"
    />
  );
}

export default function MediaInputDemo() {
  return (
    <div className="w-full max-w-sm">
      <MediaInput accept="image/*" maxSize={5 * 1024 * 1024}>
        <MediaInputEmpty>
          <div className="grid gap-1">
            <p className="text-sm font-medium">
              Drop an image or click to browse
            </p>
            <p className="text-xs text-muted-foreground">PNG, JPG up to 5MB</p>
          </div>
          <MediaInputTrigger>Choose file</MediaInputTrigger>
        </MediaInputEmpty>
        <MediaInputContent>
          <MediaInputPreview />
          <div className="flex items-center justify-between gap-3">
            <MediaInputFile />
            <MediaInputClear />
          </div>
        </MediaInputContent>
      </MediaInput>
    </div>
  );
}