FileUpload

<script setup lang="ts">
import { ref } from 'vue'
import type { FileUploadItem } from 'pohon-ui'

const files = ref<Array<FileUploadItem>>([
  {
    name: 'nuxt.png',
    size: 1000,
    type: 'image/png',
    avatar: {
      src: 'https://github.com/nuxt.png',
      alt: 'Nuxt'
    }
  }
])
</script>

<template>
  <PFileUpload
    v-model="files"
    layout="list"
    label="Drop your images here"
    description="SVG, PNG, JPG or GIF"
    accept="image/*"
    multiple
    class="min-h-48 w-96"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { FileUploadItem } from 'pohon-ui'

interface UploadFileItem extends FileUploadItem {
  progress: number
  preview: string
}

const uploadingAvatar = {
  icon: 'i-lucide-loader-circle',
  ui: { icon: 'animate-spin' }
}
const files = ref<Array<UploadFileItem>>([
  {
    name: 'nuxt.png',
    size: 1000,
    type: 'image/png',
    progress: 0,
    preview: 'https://github.com/nuxt.png',
    avatar: uploadingAvatar
  }
])
const objectUrls = new Set<string>()

function onUpdateFiles(value: Array<File | UploadFileItem> | null | undefined) {
  files.value = (value || []).map((file) => {
    if (!(file instanceof File)) {
      return file
    }

    const preview = URL.createObjectURL(file)
    objectUrls.add(preview)

    return {
      name: file.name,
      size: file.size,
      type: file.type,
      progress: 0,
      preview,
      avatar: uploadingAvatar
    }
  })

  for (const url of objectUrls) {
    if (files.value.some((file) => file.preview === url)) {
      continue
    }
    URL.revokeObjectURL(url)
    objectUrls.delete(url)
  }
}

useIntervalFn(() => {
  for (const file of files.value) {
    if (file.progress === 100) {
      continue
    }

    file.progress = Math.min(file.progress + 2, 100)
    if (file.progress === 100) {
      file.avatar = { src: file.preview, alt: file.name }
    }
  }
}, 100)

onScopeDispose(() => {
  for (const url of objectUrls) {
    URL.revokeObjectURL(url)
  }
})
</script>

<template>
  <PFileUpload
    :model-value="files"
    layout="list"
    label="Drop your images here"
    description="SVG, PNG, JPG or GIF"
    accept="image/*"
    multiple
    class="min-h-48 w-96"
    @update:model-value="onUpdateFiles"
  >
    <template #file-trailing="{ file, index, removeFile }">
      <div class="ms-auto flex gap-2 items-center">
        <PProgress
          v-if="'progress' in file && file.progress < 100"
          :model-value="file.progress"
          size="xs"
          class="w-20"
        />
        <PIcon
          v-else-if="'progress' in file && file.progress === 100"
          name="i-lucide-circle-check"
          class="color-success size-5"
        />
        <PButton
          color="neutral"
          variant="link"
          icon="i-lucide-x"
          :aria-label="`Remove ${file.name}`"
          @click.stop.prevent="removeFile(index)"
        />
      </div>
    </template>
  </PFileUpload>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import type { FormSubmitEvent } from 'pohon-ui'
import * as z from 'zod'

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']

function 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 / 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>
  <PForm :schema="schema" :state="state" class="w-96 space-y-4" @submit="onSubmit">
    <PFormField name="image" label="Image" description="JPG, GIF or PNG. 2MB Max.">
      <PFileUpload v-model="state.image" accept="image/*" class="min-h-48" />
    </PFormField>

    <PButton type="submit" label="Submit" color="neutral" />
  </PForm>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<Array<File>>([])

const toast = useToast()

function onReject(files: Array<File>) {
  toast.add({
    title: 'Only images are allowed',
    description: files.map((file) => file.name).join(', '),
    color: 'error'
  })
}
</script>

<template>
  <PFileUpload
    v-model="value"
    accept="image/*"
    icon="i-lucide-image"
    label="Drop your images here"
    description="SVG, PNG, JPG or GIF"
    multiple
    class="min-h-48 w-96"
    @reject="onReject"
  />
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import type { FormSubmitEvent } from 'pohon-ui'
import * as z from 'zod'

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']

function 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 / 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>
  <PForm :schema="schema" :state="state" class="w-64 space-y-4" @submit="onSubmit">
    <PFormField name="avatar" label="Avatar" description="JPG, GIF or PNG. 1MB Max.">
      <PFileUpload v-slot="{ open, removeFile }" v-model="state.avatar" accept="image/*">
        <div class="flex flex-wrap gap-3 items-center">
          <PAvatar
            size="lg"
            :src="state.avatar ? createObjectUrl(state.avatar) : undefined"
            icon="i-lucide-image"
          />

          <PButton
            :label="state.avatar ? 'Change image' : 'Upload image'"
            color="neutral"
            variant="outline"
            @click="open()"
          />
        </div>

        <p v-if="state.avatar" class="text-xs color-text-muted mt-1.5">
          {{ state.avatar.name }}

          <PButton
            label="Remove"
            color="error"
            variant="link"
            size="xs"
            class="p-0"
            @click="removeFile()"
          />
        </p>
      </PFileUpload>
    </PFormField>

    <PButton type="submit" label="Submit" color="neutral" />
  </PForm>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<Array<File>>([])
</script>

<template>
  <PFileUpload
    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="min-h-48 w-96"
  >
    <template #actions="{ open }">
      <PButton
        label="Select images"
        icon="i-lucide-upload"
        color="neutral"
        variant="outline"
        @click="open()"
      />
    </template>

    <template #files-bottom="{ removeFile, files }">
      <PButton
        v-if="files?.length"
        label="Remove all files"
        color="neutral"
        @click="removeFile()"
      />
    </template>
  </PFileUpload>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<Array<File>>([])
</script>

<template>
  <PFileUpload
    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="min-h-48 w-96"
  >
    <template #actions="{ open }">
      <PButton
        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>

        <PButton
          icon="i-lucide-plus"
          label="Add more"
          color="neutral"
          variant="outline"
          class="-my-2"
          @click="open()"
        />
      </div>
    </template>
  </PFileUpload>
</template>