Release 2025-05-19

web/src/components/InputImageFile.astro

@@ -1,54 +0,0 @@
----
-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
-}
-
-const { class: className, square, ...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-2xs" {...inputFileProps} />
-  <img
-    src="#"
-    alt="Preview"
-    class={cn(
-      'block w-26.5 rounded object-cover',
-      'no-js:hidden [&[src="#"]]:hidden',
-      square && 'aspect-square'
-    )}
-  />
-</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>