From 90660c97c30ae5bb695466f1f96104cbd7b30c6d Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 21 Jul 2025 11:26:42 +0200
Subject: [PATCH] up

---
 .../app/pages/components/file-upload.vue      | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/playground/app/pages/components/file-upload.vue b/playground/app/pages/components/file-upload.vue
index 52f8712b..da081b73 100644
--- a/playground/app/pages/components/file-upload.vue
+++ b/playground/app/pages/components/file-upload.vue
@@ -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>