File Upload experimental

<script lang="ts">
  import * as FileUpload from '@odbd/svelte/file-upload'
</script>

<FileUpload.Root maxFiles={5} accept="image/*">
  <FileUpload.Label>이미지 업로드</FileUpload.Label>

  <FileUpload.Dropzone>
    파일을 여기에 끌어다 놓으세요
    <FileUpload.Trigger>파일 선택</FileUpload.Trigger>
  </FileUpload.Dropzone>

  <FileUpload.Context>
    {#snippet render(api)}
      {#if api().acceptedFiles.length > 0}
        <FileUpload.ItemGroup>
          {#each api().acceptedFiles as file (file.name)}
            <FileUpload.Item {file}>
              <FileUpload.ItemPreview type="image/*">
                <FileUpload.ItemPreviewImage />
              </FileUpload.ItemPreview>
              <FileUpload.ItemName />
              <FileUpload.ItemSizeText />
              <FileUpload.ItemDeleteTrigger aria-label="삭제">×</FileUpload.ItemDeleteTrigger>
            </FileUpload.Item>
          {/each}
        </FileUpload.ItemGroup>
        <FileUpload.ClearTrigger>모두 지우기</FileUpload.ClearTrigger>
      {/if}
      <!-- 거부된 파일도 보여준다 — 조용히 삼키면 아무 일도 없는 것처럼 보인다 -->
      {#if api().rejectedFiles.length > 0}
        <p class="file-upload-rejected" role="alert">
          {api()
            .rejectedFiles.map((rejection) => rejection.file.name)
            .join(', ')} — 이미지 파일만 올릴 수 있어요.
        </p>
      {/if}
    {/snippet}
  </FileUpload.Context>

  <FileUpload.HiddenInput />
</FileUpload.Root>

<style>
  .file-upload-rejected {
    margin: 0;
    color: var(--odbd-color-danger);
    font-size: var(--odbd-font-size-sm);
  }
</style>