feat(FileUpload): new component

docs/app/components/content/examples/file-upload/FileUploadDefaultSlotExample.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+
+const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2MB
+const MIN_DIMENSIONS = { width: 200, height: 200 }
+const MAX_DIMENSIONS = { width: 4096, height: 4096 }
+const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']
+
+const formatBytes = (bytes: number, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes'
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+}
+
+const schema = z.object({
+  avatar: z
+    .instanceof(File, {
+      message: 'Please select an image file.'
+    })
+    .refine(file => file.size <= MAX_FILE_SIZE, {
+      message: `The image is too large. Please choose an image smaller than ${formatBytes(MAX_FILE_SIZE)}.`
+    })
+    .refine(file => ACCEPTED_IMAGE_TYPES.includes(file.type), {
+      message: 'Please upload a valid image file (JPEG, PNG, or WebP).'
+    })
+    .refine(
+      file =>
+        new Promise((resolve) => {
+          const reader = new FileReader()
+          reader.onload = (e) => {
+            const img = new Image()
+            img.onload = () => {
+              const meetsDimensions
+                  = img.width >= MIN_DIMENSIONS.width
+                    && img.height >= MIN_DIMENSIONS.height
+                    && img.width <= MAX_DIMENSIONS.width
+                    && img.height <= MAX_DIMENSIONS.height
+              resolve(meetsDimensions)
+            }
+            img.src = e.target?.result as string
+          }
+          reader.readAsDataURL(file)
+        }),
+      {
+        message: `The image dimensions are invalid. Please upload an image between ${MIN_DIMENSIONS.width}x${MIN_DIMENSIONS.height} and ${MAX_DIMENSIONS.width}x${MAX_DIMENSIONS.height} pixels.`
+      }
+    )
+})
+
+type schema = z.output<typeof schema>
+
+const state = reactive<Partial<schema>>({
+  avatar: undefined
+})
+
+function createObjectUrl(file: File): string {
+  return URL.createObjectURL(file)
+}
+
+async function onSubmit(event: FormSubmitEvent<schema>) {
+  console.log(event.data)
+}
+</script>
+
+<template>
+  <UForm :schema="schema" :state="state" class="space-y-4 w-64" @submit="onSubmit">
+    <UFormField name="avatar" label="Avatar" description="JPG, GIF or PNG. 1MB Max.">
+      <UFileUpload v-slot="{ open, removeFile }" v-model="state.avatar" accept="image/*">
+        <div class="flex flex-wrap items-center gap-3">
+          <UAvatar size="lg" :src="state.avatar ? createObjectUrl(state.avatar) : undefined" icon="i-lucide-image" />
+
+          <UButton :label="state.avatar ? 'Change image' : 'Upload image'" color="neutral" variant="outline" @click="open()" />
+        </div>
+
+        <p v-if="state.avatar" class="text-xs text-muted mt-1.5">
+          {{ state.avatar.name }}
+
+          <UButton
+            label="Remove"
+            color="error"
+            variant="link"
+            size="xs"
+            class="p-0"
+            @click="removeFile()"
+          />
+        </p>
+      </UFileUpload>
+    </UFormField>
+
+    <UButton type="submit" label="Submit" color="neutral" />
+  </UForm>
+</template>

docs/app/components/content/examples/file-upload/FileUploadFilesBottomSlotExample.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const value = ref<File[]>([])
+</script>
+
+<template>
+  <UFileUpload
+    v-model="value"
+    icon="i-lucide-image"
+    label="Drop your images here"
+    description="SVG, PNG, JPG or GIF (max. 2MB)"
+    layout="list"
+    multiple
+    :interactive="false"
+    class="w-96 min-h-48"
+  >
+    <template #actions="{ open }">
+      <UButton
+        label="Select images"
+        icon="i-lucide-upload"
+        color="neutral"
+        variant="outline"
+        @click="open()"
+      />
+    </template>
+
+    <template #files-bottom="{ removeFile, files }">
+      <UButton
+        v-if="files?.length"
+        label="Remove all files"
+        color="neutral"
+        @click="removeFile()"
+      />
+    </template>
+  </UFileUpload>
+</template>

docs/app/components/content/examples/file-upload/FileUploadFilesTopSlotExample.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const value = ref<File[]>([])
+</script>
+
+<template>
+  <UFileUpload
+    v-model="value"
+    icon="i-lucide-image"
+    label="Drop your images here"
+    description="SVG, PNG, JPG or GIF (max. 2MB)"
+    layout="grid"
+    multiple
+    :interactive="false"
+    class="w-96 min-h-48"
+  >
+    <template #actions="{ open }">
+      <UButton
+        label="Select images"
+        icon="i-lucide-upload"
+        color="neutral"
+        variant="outline"
+        @click="open()"
+      />
+    </template>
+
+    <template #files-top="{ open, files }">
+      <div v-if="files?.length" class="mb-2 flex items-center justify-between">
+        <p class="font-bold">
+          Files ({{ files?.length }})
+        </p>
+
+        <UButton
+          icon="i-lucide-plus"
+          label="Add more"
+          color="neutral"
+          variant="outline"
+          class="-my-2"
+          @click="open()"
+        />
+      </div>
+    </template>
+  </UFileUpload>
+</template>

docs/app/components/content/examples/file-upload/FileUploadFormValidationExample.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+
+const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2MB
+const MIN_DIMENSIONS = { width: 200, height: 200 }
+const MAX_DIMENSIONS = { width: 4096, height: 4096 }
+const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']
+
+const formatBytes = (bytes: number, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes'
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+}
+
+const schema = z.object({
+  image: z
+    .instanceof(File, {
+      message: 'Please select an image file.'
+    })
+    .refine(file => file.size <= MAX_FILE_SIZE, {
+      message: `The image is too large. Please choose an image smaller than ${formatBytes(MAX_FILE_SIZE)}.`
+    })
+    .refine(file => ACCEPTED_IMAGE_TYPES.includes(file.type), {
+      message: 'Please upload a valid image file (JPEG, PNG, or WebP).'
+    })
+    .refine(
+      file =>
+        new Promise((resolve) => {
+          const reader = new FileReader()
+          reader.onload = (e) => {
+            const img = new Image()
+            img.onload = () => {
+              const meetsDimensions
+                = img.width >= MIN_DIMENSIONS.width
+                  && img.height >= MIN_DIMENSIONS.height
+                  && img.width <= MAX_DIMENSIONS.width
+                  && img.height <= MAX_DIMENSIONS.height
+              resolve(meetsDimensions)
+            }
+            img.src = e.target?.result as string
+          }
+          reader.readAsDataURL(file)
+        }),
+      {
+        message: `The image dimensions are invalid. Please upload an image between ${MIN_DIMENSIONS.width}x${MIN_DIMENSIONS.height} and ${MAX_DIMENSIONS.width}x${MAX_DIMENSIONS.height} pixels.`
+      }
+    )
+})
+
+type schema = z.output<typeof schema>
+
+const state = reactive<Partial<schema>>({
+  image: undefined
+})
+
+async function onSubmit(event: FormSubmitEvent<schema>) {
+  console.log(event.data)
+}
+</script>
+
+<template>
+  <UForm :schema="schema" :state="state" class="space-y-4 w-96" @submit="onSubmit">
+    <UFormField name="image" label="Image" description="JPG, GIF or PNG. 2MB Max.">
+      <UFileUpload v-model="state.image" accept="image/*" class="min-h-48" />
+    </UFormField>
+
+    <UButton type="submit" label="Submit" color="neutral" />
+  </UForm>
+</template>