image uploader

Forms 133

About

This is a reusable ImageUploadField React component built with Next.js and Tailwind CSS. It allows users to upload and preview an image with optional error display, loading skeleton, aspect ratio control, and size restriction. The component supports both file and URL inputs and provides clear UI feedback for upload state, errors, and removal actions. It’s designed to integrate cleanly with forms and supports customization via props like disabled, error, defaultImage, and maxSize.

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

"use client"

import {useState } from "react";
import { ImageUploadField } from "@/components/ui/image-uploader.tsx";

const DemoOne = () => {
const [image,setImage]=useState()

  return (
    <ImageUploadField 
        value={image}
        onChange={setImage}
      //  error
       className="w-48"
      />
  )
};
// form component
//  <FormField
//   control={form.control}
//   name="photo"
//   render={({ field }) => (
//   <FormItem>
//   <FormLabel>Profile Picture</FormLabel>
//   <FormControl>
//   <FormControl>
//   <ImageUploadField
//       {...field}
//       error={!!form.formState.errors.photo?.message}
//       className="w-48"
//       />
//   </FormControl>
//   </FormControl>
//   <FormMessage />
//   </FormItem>
//   )}
//   />
export { DemoOne };