arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
Benjamin Canac
2025-07-21 11:26:42 +02:00
parent 20a1240015
commit 90660c97c3
1 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
playground/app/pages/components/file-upload.vue
View File

@@ -5,6 +5,8 @@ import theme from '#build/ui/file-upload'
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
const size = ref<keyof typeof theme.variants.size>('md')
const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2MB
const MIN_DIMENSIONS = { width: 200, height: 200 }
const MAX_DIMENSIONS = { width: 4096, height: 4096 }
@@ -70,9 +72,13 @@ async function onSubmit(event: FormSubmitEvent<schema>) {
</script>
<template>
<div class="flex flex-col items-center gap-8">
<UForm :schema="schema" :state="state" class="space-y-4 w-80" @submit="onSubmit">
<UFormField name="avatar" label="Avatar" description="JPG, GIF or PNG. 1MB Max.">
<div class="flex flex-col items-center justify-center gap-8">
<div class="flex flex-wrap items-center gap-3">
<USelect v-model="size" :items="sizes" />
</div>
<UForm :schema="schema" :state="state" class="space-y-4 w-80 flex flex-col items-center" @submit="onSubmit">
<UFormField name="avatar" label="Avatar" description="JPG, GIF or PNG. 1MB Max." :size="size">
<UFileUpload v-slot="{ open, reset, urls }" v-model="state.avatar" accept="image/*">
<div class="flex flex-wrap items-center gap-3">
<UAvatar size="lg" :src="urls?.[0]" icon="i-lucide-image" />
@@ -98,15 +104,11 @@ async function onSubmit(event: FormSubmitEvent<schema>) {
<UButton label="Submit" type="submit" />
</UForm>
<div class="flex items-center overflow-x-auto gap-4">
<UFileUpload
v-for="size in sizes"
:key="size"
:size="size"
label="Drop your image here"
description="SVG, PNG, JPG or GIF (max. 2MB)"
multiple
/>
</div>
<UFileUpload
label="Drop your image here"
description="SVG, PNG, JPG or GIF (max. 2MB)"
multiple
:size="size"
/>
</div>
</template>