fix(FileUpload): use native img element for blob URLs preview

Resolves #5121, resolves #4824

Co-Authored-By: Sébastien Chopin <[email protected]>

Author: benjamincanac

playgrounds/nuxt/app/pages/components/file-upload.vue

@@ -91,7 +91,7 @@ async function onSubmit(event: FormSubmitEvent<schema>) {
     <USelect v-model="position" :items="positions" placeholder="Position" />
   </Navbar>
 
-  <Matrix v-slot="props" :attrs="attrs">
+  <Matrix v-slot="props" :attrs="attrs" container-class="w-80">
     <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
       <UFormField name="avatar" label="Avatar" description="JPG, GIF or PNG. 1MB Max." v-bind="props">
         <UFileUpload v-slot="{ open, removeFile }" v-model="state.avatar" accept="image/*">

src/runtime/components/Avatar.vue

@@ -11,7 +11,7 @@ export interface AvatarProps {
    * The element or component this component should render as.
    * @defaultValue 'span'
    */
-  as?: any
+  as?: any | { root?: any, img?: any }
   src?: string
   alt?: string
   /**
@@ -37,6 +37,7 @@ export interface AvatarSlots {
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import { Primitive, Slot } from 'reka-ui'
+import { defu } from 'defu'
 import { useAppConfig } from '#imports'
 import ImageComponent from '#build/ui-image-component'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
@@ -46,7 +47,15 @@ import UChip from './Chip.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<AvatarProps>(), { as: 'span' })
+const props = defineProps<AvatarProps>()
+
+const as = computed(() => {
+  if (typeof props.as === 'string' || typeof props.as?.render === 'function') {
+    return { root: props.as }
+  }
+
+  return defu(props.as, { root: 'span' })
+})
 
 const fallback = computed(() => props.text || (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2))
 
@@ -86,13 +95,13 @@ function onError() {
 <template>
   <component
     :is="props.chip ? UChip : Primitive"
-    :as="as"
+    :as="as.root"
     v-bind="props.chip ? (typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true }) : {}"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="props.style"
   >
     <component
-      :is="ImageComponent"
+      :is="as.img || ImageComponent"
       v-if="src && !error"
       :src="src"
       :alt="alt"

src/runtime/components/FileUpload.vue

@@ -273,7 +273,7 @@ defineExpose({
           <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="(file as File).name" :class="ui.file({ class: props.ui?.file })">
             <slot name="file" :file="file" :index="index">
               <slot name="file-leading" :file="file" :index="index">
-                <UAvatar :src="createObjectUrl(file)" :icon="fileIcon || appConfig.ui.icons.file" :size="props.size" :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })" />
+                <UAvatar :as="{ img: 'img' }" :src="createObjectUrl(file)" :icon="fileIcon || appConfig.ui.icons.file" :size="props.size" :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })" />
               </slot>
 
               <div :class="ui.fileWrapper({ class: props.ui?.fileWrapper })">

test/components/Avatar.spec.ts

@@ -16,6 +16,8 @@ describe('Avatar', () => {
     ['with chip', { props: { chip: { text: '1' } } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { src: 'https://github.com/benjamincanac.png', size } }]),
     ['with as', { props: { as: 'section' } }],
+    ['with as (object)', { props: { src: 'https://github.com/benjamincanac.png', as: { root: 'section', img: 'p' } } }],
+    ['with as (partial object)', { props: { src: 'https://github.com/benjamincanac.png', as: { img: 'p' } } }],
     ['with class', { props: { class: 'bg-default' } }],
     ['with ui', { props: { ui: { fallback: 'font-bold' } } }],
     // Slots

test/components/__snapshots__/Avatar-vue.spec.ts.snap

@@ -2,6 +2,14 @@
 
 exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="font-medium leading-none text-muted truncate">BC</span></span>"`;
 
+exports[`Avatar > renders with as (object) correctly 1`] = `
+"<section class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base">
+  <p src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></p>
+</section>"
+`;
+
+exports[`Avatar > renders with as (partial object) correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><p src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></p></span>"`;
+
 exports[`Avatar > renders with as correctly 1`] = `"<section class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="font-medium leading-none text-muted truncate">&nbsp;</span></section>"`;
 
 exports[`Avatar > renders with chip correctly 1`] = `"<span class="relative inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="font-medium leading-none text-muted truncate">&nbsp;</span><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute">1</span></span>"`;

test/components/__snapshots__/Avatar.spec.ts.snap

@@ -2,6 +2,14 @@
 
 exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="font-medium leading-none text-muted truncate">BC</span></span>"`;
 
+exports[`Avatar > renders with as (object) correctly 1`] = `
+"<section class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base">
+  <p src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></p>
+</section>"
+`;
+
+exports[`Avatar > renders with as (partial object) correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><p src="https://github.com/benjamincanac.png" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></p></span>"`;
+
 exports[`Avatar > renders with as correctly 1`] = `"<section class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="font-medium leading-none text-muted truncate">&nbsp;</span></section>"`;
 
 exports[`Avatar > renders with chip correctly 1`] = `"<span class="relative inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="font-medium leading-none text-muted truncate">&nbsp;</span><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute">1</span></span>"`;