Image Uploader

Component 73

About

Image Uploader The ImageUploader is a highly interactive and accessible component for handling file uploads. It supports drag-and-drop, file selection through a dialog, and provides animated previews of the selected images. Built with framer-motion, it offers smooth animations for adding and removing files, enhancing the user experience. It's fully themeable using shadcn/ui CSS variables and includes validation for file types and size.

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

Code

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

Usage.tsx

import * as React from "react";
import { ImageUploader } from "@/components/ui/image-uploader"; // Adjust the import path

export default function ImageUploaderDemo() {
  // State to hold the files for the uploader
  const [files, setFiles] = React.useState<File[]>([]);

  return (
    <div className="w-full max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
      <div className="space-y-2 mb-6">
        <h1 className="text-2xl font-bold tracking-tight">Image Uploader</h1>
        <p className="text-muted-foreground">
          A component to upload and preview images with animations.
        </p>
      </div>

      <ImageUploader
        files={files}
        onChange={setFiles}
        maxFiles={5}
        maxSize={4} // in MB
        accept="image/jpeg, image/png, image/webp"
      />

      {/* Optional: Display file names to show state is managed correctly */}
      {files.length > 0 && (
        <div className="mt-6">
          <h2 className="text-lg font-semibold">Uploaded Files:</h2>
          <ul className="list-disc list-inside mt-2 text-sm text-muted-foreground">
            {files.map((file, index) => (
              <li key={index}>{file.name}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}