tabler/shared/ui/Dropzone.astro

---
// Port of shared/includes/ui/dropzone.html.
// The Dropzone init <script> renders directly here (no more page-scripts registry),
// wrapping the instance in window.tabler_dropzone.
// Liquid action="{{ page | relative }}/" resolves to "./" for root-level pages.
interface Props {
  id?: string
  multiple?: boolean
  custom?: boolean
  text?: string
  description?: string
}

const { id, multiple, custom, text = 'Text', description = 'Description' } = Astro.props

const dropzoneId = `dropzone-${id}`
const dropzoneSelector = `#dropzone-${id}`
---

<form class="dropzone" id={dropzoneId} action="./" autocomplete="off" novalidate>
  <div class="fallback">
    {/* emit a bare boolean attribute (empty string) to match Liquid's {% if %}multiple */}
    <input name="file" type="file" multiple={multiple ? '' : undefined} />
  </div>
  {
    custom && (
      <div class="dz-message">
        <h3 class="dropzone-msg-title">{text}</h3>
        <span class="dropzone-msg-desc">{description}</span>
      </div>
    )
  }
</form>
<!-- BEGIN DROPZONE -->
<script define:vars={{ dropzoneId, dropzoneSelector }}>
  window.tabler_dropzone ??= {}

  function initDropzone() {
    window.tabler_dropzone[dropzoneId] = new Dropzone(dropzoneSelector)
  }

  document.readyState !== 'loading' ? initDropzone() : document.addEventListener('DOMContentLoaded', initDropzone, { once: true })
</script>
<!-- END DROPZONE -->