Image Picker

The ImagePicker component allows users to upload multiple images with preview, validation (max size & max files), and integration with form libraries like React Hook Form.
It also supports a view-only mode for displaying existing images.
When viewOnly is enabled, clicking on an image will open it inside a slider dialog for previewing.

import { ImagePicker } from "tawuniya/components";

👉 View in Storybook

---

Props

Prop	Type	Default	Description
maxSize	number	2	Maximum image size in MB.
maxFiles	number	7	Maximum number of images allowed.
id	string	"image-picker"	Unique identifier for the input.
error	string	—	Error message displayed below the uploader.
viewOnly	boolean	false	If true, disables upload/remove actions and only shows images.
className	string	—	Additional Tailwind classes for the wrapper.
value	FileData[]	—	Current list of uploaded files (controlled).
images	{ fileName: string; fileType: string; url: string }[]	—	Preloaded images (used in view-only mode).
onChange	(files: FileData[]) => void	—	Callback triggered when the file list changes.
form	{ controller: any; control: any; name: string }	—	React Hook Form integration using Controller.

Usage

With Controlled Form

import { useState } from "react";
import { ImagePicker } from "tawuniya/components";

export default function BasicExample() {
  const [images, setImages] = useState([]);

  return <ImagePicker value={images} onChange={setImages} />;
}

With Error State

<ImagePicker error="At least one image is required" />

Custom Limits (Max Size & Max Files)

<ImagePicker maxSize={5} maxFiles={10} />

View Only Mode

In this mode, users cannot add or remove images.
Clicking any image will open a slider dialog to navigate between all images.

<ImagePicker
  viewOnly
  images={[
    {
      fileName: "photo1.jpg",
      fileType: "image/jpeg",
      url: "/uploads/photo1.jpg",
    },
    {
      fileName: "photo2.png",
      fileType: "image/png",
      url: "/uploads/photo2.png",
    },
  ]}
/>

With React Hook Form

import { useForm, Controller } from "react-hook-form";
import { ImagePicker } from "tawuniya/components";

export default function FormExample() {
  const { control, handleSubmit } = useForm({
    defaultValues: { gallery: [] },
  });

  const onSubmit = (data: any) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <ImagePicker
        form={{ controller: Controller, control, name: "gallery" }}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Notes

• Works as a controlled component with value + onChange, or with React Hook Form via the form prop.
• Supports image types: PNG, JPEG, JPG, WEBP.
• Automatically displays thumbnails with a remove button (unless viewOnly is true).
• Includes built-in validation for file size and maximum count.
• Integrates with SlideGallery for previewing images in a modal.