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

up

Browse Source
This commit is contained in:
Benjamin Canac
2025-07-21 14:27:28 +02:00
parent 891d66cdb1
commit 0da34cd8e5
2 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -64,6 +64,10 @@ const state = reactive<Partial<schema>>({
const upload = useUpload('/api/blob', { method: 'PUT' })
function createObjectUrl(file: File): string {
return URL.createObjectURL(file)
}
async function onSubmit(event: FormSubmitEvent<schema>) {
const res = await upload(event.data.avatar)
@@ -79,9 +83,9 @@ async function onSubmit(event: FormSubmitEvent<schema>) {
<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." :size="size">
<UFileUpload v-slot="{ open, reset, urls }" v-model="state.avatar" accept="image/*">
<UFileUpload v-slot="{ open, reset }" 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" />
<UAvatar size="lg" :src="state.avatar ? createObjectUrl(state.avatar) : undefined" icon="i-lucide-image" />
<UButton :label="state.avatar ? 'Change image' : 'Upload image'" color="neutral" @click="open()" />
</div>
@@ -107,11 +111,8 @@ async function onSubmit(event: FormSubmitEvent<schema>) {
<UFileUpload
label="Drop your image here"
description="SVG, PNG, JPG or GIF (max. 2MB)"
multiple
class="w-full"
:size="size"
/>
<UFileUpload multiple />
</div>
</template>