v2.13.0

FileUpload

A file upload input component.
GitHub
Demo
Nuxt UI

Usage

Use the v-model directive to control the value of the FileUpload.

<script setup lang="ts">
const value = ref(null)
</script>

<template>
  <B24FileUpload v-model="value" class="w-96 min-h-48" />
</template>

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

const value = ref(null)
</script>

<template>
  <B24FileUpload v-model="value" class="w-96 min-h-48" />
</template>

Multiple

Use the multiple prop to allow multiple files to be selected.

<template>
  <B24FileUpload multiple class="w-96 min-h-48" />
</template>

Dropzone

Use the dropzone prop to enable/disable the droppable area. Defaults to true.

<template>
  <B24FileUpload :dropzone="false" class="w-96 min-h-48" />
</template>

Interactive

Use the interactive prop to enable/disable the clickable area. Defaults to true.

This can be useful when adding a Button component in the #actions slot.
<template>
  <B24FileUpload :interactive="false" class="w-96 min-h-48" />
</template>

Accept

Use the accept prop to specify the allowed file types for the input. Provide a comma-separated list of MIME types or file extensions (e.g. image/png,application/pdf,.jpg). Defaults to * (all file types).

<template>
  <B24FileUpload accept="image/*" class="w-96 min-h-48" />
</template>

Label

Use the label prop to set the label of the FileUpload.

Drop your image here
<template>
  <B24FileUpload label="Drop your image here" class="w-96 min-h-48" />
</template>

Description

Use the description prop to set the description of the FileUpload.

Drop your image here
SVG, PNG, JPG or GIF (max. 2MB)
<template>
  <B24FileUpload
    label="Drop your image here"
    description="SVG, PNG, JPG or GIF (max. 2MB)"
    class="w-96 min-h-48"
  />
</template>

Icon

Use the icon prop to set the Icon of the FileUpload.

Drop your image here
SVG, PNG, JPG or GIF (max. 2MB)
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24FileUpload
    :icon="RocketIcon"
    label="Drop your image here"
    description="SVG, PNG, JPG or GIF (max. 2MB)"
    class="w-96 min-h-48"
  />
</template>

Color

Use the color prop to change the color of the FileUpload.

Drop your image here
SVG, PNG, JPG or GIF (max. 2MB)
<template>
  <B24FileUpload
    color="air-primary-alert"
    highlight
    label="Drop your image here"
    description="SVG, PNG, JPG or GIF (max. 2MB)"
    class="w-96 min-h-48"
  />
</template>
The highlight prop is used here to show the focus state. It's used internally when a validation error occurs.

Variant

Use the variant prop to change the variant of the FileUpload.

<template>
  <B24FileUpload variant="button" />
</template>

Size

Use the size prop to change the size of the FileUpload.

Drop your image here
SVG, PNG, JPG or GIF (max. 2MB)
<template>
  <B24FileUpload
    size="lg"
    variant="area"
    label="Drop your image here"
    description="SVG, PNG, JPG or GIF (max. 2MB)"
  />
</template>

Layout

Use the layout prop to change how the files are displayed in the FileUpload. Defaults to grid.

This prop only works when variant is area.
Drop your images here
SVG, PNG, JPG or GIF (max. 2MB)
<template>
  <B24FileUpload
    layout="list"
    multiple
    label="Drop your images here"
    description="SVG, PNG, JPG or GIF (max. 2MB)"
    class="w-96"
    :b24ui="{
      base: 'min-h-48'
    }"
  />
</template>

Position

Use the position prop to change the position of the files in the FileUpload. Defaults to outside.

This prop only works when variant is area and when layout is list.
Drop your images here
SVG, PNG, JPG or GIF (max. 2MB)
<template>
  <B24FileUpload
    position="inside"
    layout="list"
    multiple
    label="Drop your images here"
    description="SVG, PNG, JPG or GIF (max. 2MB)"
    class="w-96"
    :b24ui="{
      base: 'min-h-48'
    }"
  />
</template>

Examples

With Form validation

You can use the FileUpload within a Form and FormField components to handle validation and error handling.

JPG, GIF or PNG. 2MB Max.

<script setup lang="ts">
import * as z from 'zod'
import type { FormSubmitEvent } from '@bitrix24/b24ui-nuxt'

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

    <B24Button type="submit" label="Submit" />
  </B24Form>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import * as z from 'zod'
import type { FormSubmitEvent } from '@bitrix24/b24ui-nuxt'

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

    <B24Button type="submit" label="Submit" />
  </B24Form>
</template>

With default slot

You can use the default slot to make your own FileUpload component.

If you need the file picking without the component around it, the useFileUpload composable is what FileUpload itself is built on: const { open, isDragging, inputRef, dropzoneRef } = useFileUpload({ accept: 'image/*', multiple: true, onUpdate: files => {} }). Call open() to raise the file dialog, bind dropzoneRef to the element that accepts drops, and read isDragging for the hover state. The markup is yours — the composable renders nothing.
inputRef is only needed if you also want a real <input type="file"> in the DOM, for native form submission or validation. It expects a component, not an element: it is read as inputRef.value.$el, and FileUpload binds it to a VisuallyHidden as="input". Bound to a plain <input> it silently does nothing — $el is undefined, so dropped files are never synced onto the input. Leave it unbound if you do not need one.
accept reaches the dialog verbatim, but the drop zone only gets the MIME half of it — a drag exposes a type, not a filename. An accept written purely as extensions ('.pdf,.docx') therefore leaves the drop zone accepting anything, so validate by name in onUpdate when extensions are the contract.

JPG, GIF or PNG. 1MB Max.

<script setup lang="ts">
import type { FormSubmitEvent } from '@bitrix24/b24ui-nuxt'
import * as z from 'zod'
import ImageIcon from '@bitrix24/b24icons-vue/outline/ImageIcon'

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

          <B24Button
            :label="state.avatar ? 'Change image' : 'Upload image'"
            color="air-selection"
            @click="open()"
          />
        </div>

        <p v-if="state.avatar" class="text-(length:--ui-font-size-xs) text-description mt-1.5">
          {{ state.avatar.name }}

          <B24Button
            label="Remove"
            color="air-primary-alert"
            size="xs"
            class="p-0"
            @click="removeFile()"
          />
        </p>
      </B24FileUpload>
    </B24FormField>

    <B24Button type="submit" label="Submit" />
  </B24Form>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import type { FormSubmitEvent } from '@bitrix24/b24ui-nuxt'
import * as z from 'zod'
import ImageIcon from '@bitrix24/b24icons-vue/outline/ImageIcon'

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

          <B24Button
            :label="state.avatar ? 'Change image' : 'Upload image'"
            color="air-selection"
            @click="open()"
          />
        </div>

        <p v-if="state.avatar" class="text-(length:--ui-font-size-xs) text-description mt-1.5">
          {{ state.avatar.name }}

          <B24Button
            label="Remove"
            color="air-primary-alert"
            size="xs"
            class="p-0"
            @click="removeFile()"
          />
        </p>
      </B24FileUpload>
    </B24FormField>

    <B24Button type="submit" label="Submit" />
  </B24Form>
</template>

With files-bottom slot

You can use the files-bottom slot to add a Button under the files list to remove all files for example.

Drop your images here
SVG, PNG, JPG or GIF (max. 2MB)
<script setup lang="ts">
import ImageIcon from '@bitrix24/b24icons-vue/outline/ImageIcon'
import UploadIcon from '@bitrix24/b24icons-vue/outline/UploadIcon'

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

<template>
  <B24FileUpload
    v-model="value"
    :icon="ImageIcon"
    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 }">
      <B24Button label="Select images" :icon="UploadIcon" color="air-selection" @click="open()" />
    </template>

    <template #files-bottom="{ removeFile, files }">
      <B24Button
        v-if="files?.length"
        label="Remove all files"
        color="air-primary-alert"
        @click="removeFile()"
      />
    </template>
  </B24FileUpload>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ImageIcon from '@bitrix24/b24icons-vue/outline/ImageIcon'
import UploadIcon from '@bitrix24/b24icons-vue/outline/UploadIcon'

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

<template>
  <B24FileUpload
    v-model="value"
    :icon="ImageIcon"
    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 }">
      <B24Button label="Select images" :icon="UploadIcon" color="air-selection" @click="open()" />
    </template>

    <template #files-bottom="{ removeFile, files }">
      <B24Button
        v-if="files?.length"
        label="Remove all files"
        color="air-primary-alert"
        @click="removeFile()"
      />
    </template>
  </B24FileUpload>
</template>
The interactive prop is set to false in this example to prevent the default clickable area.

With files-top slot

You can use the files-top slot to add a Button above the files list to add new files for example.

Drop your images here
SVG, PNG, JPG or GIF (max. 2MB)
<script setup lang="ts">
import ImageIcon from '@bitrix24/b24icons-vue/outline/ImageIcon'
import UploadIcon from '@bitrix24/b24icons-vue/outline/UploadIcon'

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

<template>
  <B24FileUpload
    v-model="value"
    :icon="ImageIcon"
    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 }">
      <B24Button label="Select images" :icon="UploadIcon" color="air-selection" @click="open()" />
    </template>

    <template #files-top="{ open, files }">
      <div v-if="files?.length" class="mb-2 flex items-center justify-between">
        <p class="font-(--ui-font-weight-bold)">Files ({{ files?.length }})</p>

        <B24Button label="Add more" color="air-selection" class="-my-2" @click="open()" />
      </div>
    </template>
  </B24FileUpload>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ImageIcon from '@bitrix24/b24icons-vue/outline/ImageIcon'
import UploadIcon from '@bitrix24/b24icons-vue/outline/UploadIcon'

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

<template>
  <B24FileUpload
    v-model="value"
    :icon="ImageIcon"
    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 }">
      <B24Button label="Select images" :icon="UploadIcon" color="air-selection" @click="open()" />
    </template>

    <template #files-top="{ open, files }">
      <div v-if="files?.length" class="mb-2 flex items-center justify-between">
        <p class="font-(--ui-font-weight-bold)">Files ({{ files?.length }})</p>

        <B24Button label="Add more" color="air-selection" class="-my-2" @click="open()" />
      </div>
    </template>
  </B24FileUpload>
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

id string
name string
iconicons.uploadIconComponent

The icon to display. Set to false to hide the icon.

label string
description string
color'air-tertiary'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary"
variant'area' "button" | "area"

The button variant is only available when multiple is false.

size'md' "xs" | "sm" | "md" | "lg"
layout'grid' "list" | "grid"

The layout of how files are displayed. Only works when variant is area.

position'outside' "inside" | "outside"

The position of the files. Only works when variant is area and when layout is list.

highlightboolean

Highlight the ring color like a focus state.

accept'*' string

Specifies the allowed file types for the input. Provide a comma-separated list of MIME types or file extensions (e.g., "image/png,application/pdf,.jpg").

multiplefalse M
resetfalseboolean

Reset the file input when the dialog is opened.

dropzonetrueboolean

Create a zone that allows the user to drop files onto it.

interactivetrueboolean

Make the dropzone interactive when the user is clicking on it.

requiredboolean
disabledboolean
fileIconicons.fileIconComponent

The icon to display for the file.

fileImagetrueboolean

Preview the file (currently only <img> is rendered) When set false, only fileIcon is displayed

fileDeletetrueboolean | Omit<ButtonProps, LinkPropsKeys>

Configure the delete button for the file. When layout is grid, the default is { color: 'air-secondary-no-accent', size: 'xs' } When layout is list, the default is { color: 'air-tertiary-no-accent' }

fileDeleteIconicons.closeIconComponent

The icon displayed to delete a file.

previewtrueboolean

Show the file preview/list after upload.

modelValue null | M extends true ? File[] : File
b24ui { root?: SlotClass; base?: SlotClass; wrapper?: SlotClass; icon?: SlotClass; avatar?: SlotClass; label?: SlotClass; description?: SlotClass; actions?: SlotClass; files?: SlotClass; file?: SlotClass; fileLeadingAvatar?: SlotClass; fileWrapper?: SlotClass; fileName?: SlotClass; fileSize?: SlotClass; fileTrailingButton?: SlotClass; }
This component also supports all native <input> HTML attributes.

Slots

Slot Type
default{ open: (localOptions?: Partial<UseFileDialogOptions> | undefined) => void; removeFile: (index?: number | undefined) => void; b24ui: object; }
leading{ b24ui: object; }
label{}
description{}
actions{ files: FileUploadFiles<M> | undefined; open: (localOptions?: Partial<UseFileDialogOptions> | undefined) => void; removeFile: (index?: number | undefined) => void; }
files{ files: FileUploadFiles<M>; removeFile: (index?: number | undefined) => void; }
files-top{ files: FileUploadFiles<M>; open: (localOptions?: Partial<UseFileDialogOptions> | undefined) => void; removeFile: (index?: number | undefined) => void; }
files-bottom{ files: FileUploadFiles<M>; open: (localOptions?: Partial<UseFileDialogOptions> | undefined) => void; removeFile: (index?: number | undefined) => void; }
file{ file: File; index: number; removeFile: (index?: number | undefined) => void; }
file-leading{ file: File; index: number; b24ui: object; }
file-name{ file: File; index: number; }
file-size{ file: File; index: number; }
file-trailing{ file: File; index: number; b24ui: object; }

Emits

Event Type
change[event: Event]
update:modelValue[value: (M extends true ? File[] : File) | null | undefined]

Expose

When accessing the component via a template ref, you can use the following:

NameType
inputRefRef<HTMLInputElement | null>
dropzoneRefRef<HTMLDivElement | null>

Theme

https://github.com/bitrix24/b24ui/tree/main/src/theme/file-upload.ts
export default {
  slots: {
    root: 'relative flex flex-col',
    base: 'w-full flex-1 bg-(--b24ui-background)/90 border-(--b24ui-border-color) border-(length:--b24ui-border-width) text-(--b24ui-color) flex flex-col gap-2 items-stretch justify-center rounded-(--ui-border-radius-md) focus-visible:outline-2 transition-[background]',
    wrapper: 'flex flex-col items-center justify-center text-center',
    icon: 'shrink-0',
    avatar: 'shrink-0',
    label: 'mt-2 text-(--b24ui-color) font-(--ui-font-weight-medium)',
    description: 'mt-1 text-description',
    actions: 'mt-4 flex flex-wrap gap-1.5 shrink-0',
    files: '',
    file: 'relative',
    fileLeadingAvatar: 'shrink-0',
    fileWrapper: 'flex flex-col min-w-0',
    fileName: 'text-(--b24ui-color) truncate',
    fileSize: 'text-description truncate',
    fileTrailingButton: ''
  },
  variants: {
    color: {
      'air-primary': {
        root: 'light style-filled-inverted'
      },
      'air-primary-success': {
        root: 'light style-filled-success-inverted'
      },
      'air-primary-alert': {
        root: 'light style-filled-alert-inverted'
      },
      'air-primary-copilot': {
        root: 'light style-filled-copilot-inverted'
      },
      'air-primary-warning': {
        root: 'light style-filled-warning-inverted'
      },
      'air-secondary': {
        root: 'style-outline'
      },
      'air-secondary-alert': {
        root: 'light style-tinted-alert'
      },
      'air-secondary-accent': {
        root: 'light style-tinted'
      },
      'air-secondary-accent-1': {
        root: 'style-outline-accent-1'
      },
      'air-secondary-accent-2': {
        root: 'style-outline-accent-2'
      },
      'air-tertiary': {
        root: 'style-outline-no-accent'
      }
    },
    variant: {
      area: {
        wrapper: 'px-4 py-3',
        base: 'p-4'
      },
      button: {}
    },
    size: {
      xs: {
        base: 'text-(length:--ui-font-size-xs)',
        icon: 'size-4',
        file: 'text-(length:--ui-font-size-xs) px-2 py-1 gap-1',
        fileWrapper: 'flex-row gap-1'
      },
      sm: {
        base: 'text-(length:--ui-font-size-xs)',
        icon: 'size-4',
        file: 'text-(length:--ui-font-size-xs) px-2.5 py-1.5 gap-1.5',
        fileWrapper: 'flex-row gap-1'
      },
      md: {
        base: 'text-(length:--ui-font-size-sm)',
        icon: 'size-5',
        file: 'text-(length:--ui-font-size-xs) px-2.5 py-1.5 gap-1.5'
      },
      lg: {
        base: 'ext-(length:--ui-font-size-sm)',
        icon: 'size-5',
        file: 'ext-(length:--ui-font-size-sm) px-3 py-2 gap-2',
        fileSize: 'ext-(length:--ui-font-size-xs)'
      }
    },
    layout: {
      list: {
        root: 'gap-2 items-start',
        files: 'flex flex-col w-full gap-2',
        file: 'min-w-0 w-full rounded-(--ui-border-radius-md) flex items-center border border-(--b24ui-border-color)',
        fileTrailingButton: 'ms-auto'
      },
      grid: {
        fileWrapper: 'hidden',
        fileLeadingAvatar: 'size-full rounded-lg',
        fileTrailingButton: 'absolute -top-1.5 -end-1.5 rounded-(--ui-border-radius-pill) border edge-light:[--ui-btn-background:var(--ui-color-base-white-fixed)] edge-dark:[--ui-btn-background:var(--ui-color-base-white-fixed)] edge-dark:hover:bg-(--ui-color-base-white-fixed)/90 edge-dark:[--ui-btn-color:var(--ui-color-g-content-grey-1)] dark:[--ui-btn-background:var(--ui-color-g-content-grey-1)] dark:hover:bg-(--ui-color-g-content-grey-1)/90 dark:[--ui-btn-color:var(--ui-color-g-content-grey-4)]'
      }
    },
    position: {
      inside: '',
      outside: ''
    },
    dropzone: {
      true: 'border-dashed data-[dragging=true]:bg-(--ui-color-accent-soft-grey-1)/90'
    },
    interactive: {
      true: ''
    },
    highlight: {
      true: ''
    },
    multiple: {
      true: ''
    },
    disabled: {
      true: 'cursor-not-allowed opacity-75'
    }
  },
  compoundVariants: [
    {
      class: 'focus-visible:outline-(--ui-color-design-outline-focused-stroke)'
    },
    {
      highlight: true,
      class: 'border-inverted'
    },
    {
      size: 'xs',
      layout: 'list',
      class: {
        fileTrailingButton: '-me-1'
      }
    },
    {
      size: 'sm',
      layout: 'list',
      class: {
        fileTrailingButton: '-me-1.5'
      }
    },
    {
      size: 'md',
      layout: 'list',
      class: {
        fileTrailingButton: '-me-1.5'
      }
    },
    {
      size: 'lg',
      layout: 'list',
      class: {
        fileTrailingButton: '-me-2'
      }
    },
    {
      variant: 'button',
      size: 'xs',
      class: {
        base: 'p-1'
      }
    },
    {
      variant: 'button',
      size: 'sm',
      class: {
        base: 'p-1.5'
      }
    },
    {
      variant: 'button',
      size: 'md',
      class: {
        base: 'p-1.5'
      }
    },
    {
      variant: 'button',
      size: 'lg',
      class: {
        base: 'p-2'
      }
    },
    {
      layout: 'grid',
      multiple: true,
      class: {
        files: 'grid grid-cols-2 md:grid-cols-3 gap-4 w-full',
        file: 'p-0 aspect-square'
      }
    },
    {
      layout: 'grid',
      multiple: false,
      class: {
        file: 'absolute inset-0 p-0'
      }
    },
    {
      interactive: true,
      disabled: false,
      class: 'hover:bg-elevated/25'
    }
  ],
  defaultVariants: {
    color: 'air-tertiary',
    variant: 'area',
    size: 'md'
  }
}

ColorPicker

A color picker component.

Form

A form component designed for validation and handling submissions.