FileUpload 文件上传

<script setup lang="ts">
  import { ref } from 'vue'
  import { FileUpload, Stack, Text } from '@hina-ui/vue'

  const file = ref<File | null>(null)
</script>

<template>
  <Stack gap="sm" align="stretch" class="w-96">
    <FileUpload v-model="file" aria-label="上传封面" />
    <Text tone="muted" size="sm">值：{{ file?.name ?? '空' }}</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { FileUpload, Stack, Text } from '@hina-ui/vue'

  const files = ref<File[]>([])
</script>

<template>
  <Stack gap="sm" align="stretch" class="w-96">
    <FileUpload v-model="files" multiple aria-label="上传附件" />
    <Text tone="muted" size="sm">已选 {{ files.length }} 个文件</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { FileUpload, Stack, Text, type FileUploadRejection } from '@hina-ui/vue'

  const files = ref<File[]>([])
  const notice = ref('')

  const reasons: Record<FileUploadRejection['reason'], string> = {
    type: '不是图片',
    size: '超过 2 MB',
    count: '超过 3 个',
  }

  function onReject(rejections: FileUploadRejection[]) {
    notice.value = rejections.map(r => `${r.file.name}：${reasons[r.reason]}`).join('；')
  }
</script>

<template>
  <Stack gap="sm" align="stretch" class="w-96">
    <FileUpload
      v-model="files"
      multiple
      accept="image/*"
      :max-size="2 * 1024 * 1024"
      :max-files="3"
      aria-label="上传图片"
      @reject="onReject"
    >
      最多 3 张图片，每张不超过 2 MB
    </FileUpload>
    <Text v-if="notice" tone="danger" size="sm">{{ notice }}</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { FileUpload } from '@hina-ui/vue'

  const file = ref<File | null>(null)
</script>

<template>
  <FileUpload v-model="file" variant="button" accept=".pdf" aria-label="上传合同" class="w-96" />
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { FileUpload, Stack, Text } from '@hina-ui/vue'

  const files = ref<File[]>([])
  const sent = ref<string[]>([])

  function send(next: File | File[] | null) {
    const picked = Array.isArray(next) ? next : next ? [next] : []
    sent.value.push(...picked.map(file => file.name))
    files.value = []
  }
</script>

<template>
  <Stack gap="sm" align="stretch" class="w-96">
    <FileUpload
      :model-value="files"
      :list="false"
      multiple
      accept="image/*"
      aria-label="上传图片"
      @update:model-value="send"
    >
      拖拽或者点击，选中即上传
    </FileUpload>
    <Text tone="muted" size="sm">已交给上传流程：{{ sent.length ? sent.join('、') : '无' }}</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ImagePlus } from '@lucide/vue'
  import { FileUpload, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack align="stretch" class="w-96">
    <FileUpload invalid aria-label="校验未通过" />
    <FileUpload disabled aria-label="已禁用" />
    <FileUpload loading aria-label="上传中">上传中</FileUpload>
    <FileUpload aria-label="上传图片" class="aspect-square w-40">
      <template #icon>
        <ImagePlus />
      </template>
      添加图片
    </FileUpload>
  </Stack>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import * as v from 'valibot'
  import { Button, FileUpload, Form, FormField, Text } from '@hina-ui/vue'

  const schema = v.object({
    cover: v.pipe(
      v.instance(File, '请选择封面图片'),
      v.check(file => file.size <= 2 * 1024 * 1024, '图片不能超过 2MB'),
    ),
  })

  const values = reactive({ cover: null as File | null })
  const saved = ref('')

  async function save(data: unknown) {
    await new Promise(resolve => setTimeout(resolve, 600))
    saved.value = (data as { cover: File }).cover.name
  }
</script>

<template>
  <Form v-slot="{ submitting }" :values="values" :rules="schema" class="w-80" @submit="save">
    <FormField name="cover" label="封面" description="图片，不超过 2MB" required>
      <FileUpload v-model="values.cover" accept="image/*" />
    </FormField>
    <Button type="submit" :loading="submitting" class="self-start">上传</Button>
    <Text v-if="saved" tone="muted" size="sm">已上传：{{ saved }}</Text>
  </Form>
</template>