File Upload

<script setup lang="ts">import type { AdminFileUploadListItem } from '@/components/admin/file-upload'import { IconRefresh } from '@tabler/icons-vue'import { ref } from 'vue'import { cn } from '@/lib/utils'import {  AdminFileUpload,  AdminFileUploadClear,  AdminFileUploadDropzone,  AdminFileUploadItem,  AdminFileUploadItemDelete,  AdminFileUploadItemMetadata,  AdminFileUploadItemPreview,  AdminFileUploadItemProgress,  AdminFileUploadList,  AdminFileUploadTrigger} from '@/components/admin/file-upload'import { AdminNotification, errorNotification } from '@/components/admin/notification'​const items = ref<AdminFileUploadListItem[]>([])​const MAX_FILES = 5const MAX_SIZE = 5 * 1024 * 1024​function validate(file: File, ctx: { total: number }): true | string {  if (ctx.total >= MAX_FILES) {    return `最多 ${MAX_FILES} 個檔案`  }  if (file.size > MAX_SIZE) {    return `檔案超過大小上限（5 MB）`  }  return true}​function onFileReject({ reason, file }: { reason: string; file?: File }) {  errorNotification('檔案無法加入', file ? `${file.name}：${reason}` : reason)}​async function handleUpload({ id }: { id: string; file: File }) {  const findIndex = () => items.value.findIndex((it) => it.id === id)  const patch = (p: Partial<AdminFileUploadListItem>) => {    const i = findIndex()    if (i === -1) {      return    }    const copy = [...items.value]    copy[i] = { ...copy[i]!, ...p }    items.value = copy  }​  const willFail = Math.random() < 0.4  const failAt = 50​  patch({ status: 'uploading', progress: 0, errorMessage: undefined })​  for (let p = 25; p <= 100; p += 25) {    await new Promise((r) => setTimeout(r, 180))    if (willFail && p >= failAt) {      patch({ status: 'failed', errorMessage: '網路錯誤，請重試' })      return    }    patch({ progress: p })  }  patch({ status: 'success', progress: 100 })}​function retry(item: AdminFileUploadListItem) {  if (item.source instanceof File) {    handleUpload({ id: item.id, file: item.source })  }}</script>​<template>  <admin-notification />  <admin-file-upload    v-model="items"    class="w-full max-w-lg"    :on-file-validate="validate"    @file-reject="onFileReject"    @upload="handleUpload"  >    <admin-file-upload-dropzone>      <p class="typo-title-small text-text-90">拖曳檔案到此或選取檔案</p>      <admin-file-upload-trigger        :class="          cn(`            rounded-lg border border-primary-50 px-3 py-2 typo-caption-small text-primary-50            hover:bg-primary-10          `)        "      >        選擇檔案      </admin-file-upload-trigger>    </admin-file-upload-dropzone>    <admin-file-upload-clear class="self-start" label="清除全部" />    <admin-file-upload-list v-if="items.length">      <admin-file-upload-item v-for="it in items" :key="it.id" :item-id="it.id">        <admin-file-upload-item-preview />        <div class="flex min-w-0 flex-1 flex-col gap-2">          <admin-file-upload-item-metadata>            <p              v-if="it.status === 'failed' && it.errorMessage"              class="typo-caption-small text-error-50"            >              {{ it.errorMessage }}            </p>          </admin-file-upload-item-metadata>          <admin-file-upload-item-progress            :labels="{ uploading: '上傳中', success: '上傳成功', failed: '上傳失敗' }"          />        </div>        <button          v-if="it.status === 'failed'"          aria-label="重試上傳"          type="button"          :class="            cn(`              flex size-9 shrink-0 items-center justify-center rounded-lg text-text-50              hover:bg-bg-70 hover:text-text-90            `)          "          @click="retry(it)"        >          <icon-refresh class="size-5" />        </button>        <admin-file-upload-item-delete label="移除檔案" />      </admin-file-upload-item>    </admin-file-upload-list>  </admin-file-upload></template>

<script setup lang="ts">import type { AdminFileUploadListItem } from '@/components/admin/file-upload'import { ref } from 'vue'import { cn } from '@/lib/utils'import {  AdminFileUpload,  AdminFileUploadClear,  AdminFileUploadItem,  AdminFileUploadItemDelete,  AdminFileUploadItemMetadata,  AdminFileUploadItemPreview,  AdminFileUploadList,  AdminFileUploadTrigger} from '@/components/admin/file-upload'​const items = ref<AdminFileUploadListItem[]>([])</script>​<template>  <admin-file-upload v-model="items" class="w-full max-w-lg" :multiple="false">    <div class="flex flex-wrap items-center gap-2">      <admin-file-upload-trigger        :class="          cn(`            rounded-lg bg-primary-50 px-3 py-2 typo-caption-small text-text-10            hover:opacity-90          `)        "      >        從電腦上傳      </admin-file-upload-trigger>      <span class="typo-caption-small text-text-50">（此 demo 不含 Dropzone，僅 Trigger）</span>    </div>    <admin-file-upload-clear v-if="items.length" class="self-start" label="清除全部" />    <admin-file-upload-list v-if="items.length" class="mt-2">      <admin-file-upload-item v-for="it in items" :key="it.id" :item-id="it.id">        <admin-file-upload-item-preview />        <admin-file-upload-item-metadata />        <admin-file-upload-item-delete label="移除檔案" />      </admin-file-upload-item>    </admin-file-upload-list>  </admin-file-upload></template>

<script setup lang="ts">import type { AdminFileUploadListItem } from '@/components/admin/file-upload'import { ref } from 'vue'import { cn } from '@/lib/utils'import {  AdminFileUpload,  AdminFileUploadClear,  AdminFileUploadItem,  AdminFileUploadItemDelete,  AdminFileUploadItemMetadata,  AdminFileUploadItemPreview,  AdminFileUploadList} from '@/components/admin/file-upload'​const items = ref<AdminFileUploadListItem[]>([])​function addRemoteImage() {  items.value = [    ...items.value,    {      id:        globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(16).slice(2)}`,      source: 'https://picsum.photos/id/237/200/200',      status: 'success',      progress: 100    }  ]}</script>​<template>  <admin-file-upload v-model="items" class="w-full max-w-lg">    <p class="typo-caption-small text-text-50">      模擬「素材庫」或其它來源：由外層按鈕直接寫入 URL 項目（不經檔案選擇器）。    </p>    <button      type="button"      :class="        cn(`          rounded-lg border border-primary-50 px-3 py-2 typo-caption-small text-primary-50          hover:bg-primary-10        `)      "      @click="addRemoteImage"    >      新增一筆圖片 URL    </button>    <admin-file-upload-clear class="self-start" label="清除全部" />    <admin-file-upload-list v-if="items.length" class="mt-2">      <admin-file-upload-item v-for="it in items" :key="it.id" :item-id="it.id">        <admin-file-upload-item-preview />        <admin-file-upload-item-metadata>          <p class="typo-caption-small text-text-50">此列為 slot：可放影片時長、上傳日期等</p>        </admin-file-upload-item-metadata>        <admin-file-upload-item-delete label="移除檔案" />      </admin-file-upload-item>    </admin-file-upload-list>  </admin-file-upload></template>