Multi Image Input Demo

Tính năng

• ✓ Hiển thị nhiều ảnh dạng grid responsive
• ✓ Kéo thả để sắp xếp lại thứ tự (dùng @dnd-kit)
• ✓ Xóa ảnh với logic tùy chỉnh qua props
• ✓ Hiển thị số thứ tự ảnh
• ✓ Giới hạn số lượng ảnh tối đa
• ✓ Trạng thái error và disabled
• ✓ Empty state khi chưa có ảnh
• ✓ Controlled component pattern

Cách sử dụng

import { FormFieldMultiImageInput, ImageItem } from "@/components/ui/form-fields";

<FormField
  control={form.control}
  name="images"
  render={({ field, fieldState }) => (
    <FormFieldMultiImageInput
      label="Ảnh sản phẩm"
      required
      description="Kéo thả để sắp xếp"
      errorMessage={fieldState.error?.message}
      value={field.value}
      onChange={field.onChange}
      onRemove={(image, index) => {
        // Custom removal logic
        const newImages = field.value.filter((_, i) => i !== index);
        field.onChange(newImages);
      }}
      maxImages={10}
      error={!!fieldState.error}
    />
  )}
/>

Current Value

[]