Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/info-mdshakeeb/image-uploader"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 };