kycnotme/web/src/components/InputImageFile.astro

---
import { cn } from '../lib/cn'
import { ACCEPTED_IMAGE_TYPES } from '../lib/zodUtils'

import InputFile from './InputFile.astro'

import type { ComponentProps } from 'astro/types'

type Props = Omit<ComponentProps<typeof InputFile>, 'accept'> & {
  square?: boolean
  value?: string | null
}

const { class: className, square, value, ...inputFileProps } = Astro.props
---

<div class={cn('flex flex-wrap items-center justify-center gap-4', className)} data-preview-image>
  <InputFile
    accept={ACCEPTED_IMAGE_TYPES.join(',')}
    class="min-w-0 flex-1 basis-[calc(var(--spacing)*32)]"
    {...inputFileProps}
  />
  <img
    src={value}
    alt="Preview"
    class={cn(
      'block h-24 rounded object-cover',
      square && 'aspect-square',
      'no-js:hidden not-[[src]]:hidden [&[src=""]]:hidden',
      '[&:is(:has([data-remove-checkbox]:checked)_~_*)]:hidden'
    )}
  />
</div>

<script>
  ////////////////////////////////////////////////////////////
  // Optional script for image preview.                      //
  // Shows a preview of the selected image before upload.    //
  ////////////////////////////////////////////////////////////

  document.addEventListener('astro:page-load', () => {
    document.querySelectorAll('[data-preview-image]').forEach((wrapper) => {
      const input = wrapper.querySelector<HTMLInputElement>('input[type="file"]')
      if (!input) return

      const previewImageElements = wrapper.querySelectorAll<HTMLImageElement>('img')
      if (!previewImageElements.length) return

      input.addEventListener('change', () => {
        const file = input.files?.[0]
        if (!file) return

        const fileUrl = URL.createObjectURL(file)
        previewImageElements.forEach((previewImage) => {
          previewImage.src = fileUrl
        })
      })
    })
  })
</script>