File drop zone

Stable

Lets users upload files by dragging them onto a target area or by browsing.

<script setup lang="ts">
import { HFileDropZone } from '@holistics/design-system'

</script>
<template>
  <HFileDropZone style="width: 400px" />
</template>

Examples

Multiple files

<script setup lang="ts">
import { HFileDropZone } from '@holistics/design-system'

const multiple = 5
const title = 'Upload files (Max 5 files)'

</script>
<template>
  <HFileDropZone
    style="width: 400px"
    :multiple
    :title
  />
</template>

Size limit

<script setup lang="ts">
import { HFileDropZone } from '@holistics/design-system'

const sizeLimit = 5 * 1024 * 1024 // 5MB
const title = 'Upload file (Max 5MB)'

</script>
<template>
  <HFileDropZone
    style="width: 400px"
    :size-limit
    :title
  />
</template>

Restricted file types

<script setup lang="ts">
import { HFileDropZone } from '@holistics/design-system'

const accept = 'image/png,image/jpeg'
const title = 'Upload images only'
const fileIcon = 'file-image'

</script>
<template>
  <HFileDropZone
    style="width: 400px"
    :accept
    :title
    :file-icon
  />
</template>

API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
fileIcon	"function" | "address-card" | "adls2" | "ai-chat-insights" | "ai-mascot-color" | "ai-mascot-disabled" | "ai-mascot-glasses-color" | "ai-mascot" | "ai-monitor-hai-sparkle" | ... 469 more ... = "file-doc"	Icon displayed in the drop zone area.
accept	string = "*"	A comma-separated list of one or more file types in MIME type format (e.g., 'image/*', '.pdf', or '*' for all types), describing which file types to allow. {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept}
sizeLimit	number = 0	Maximum file size (in bytes). Set to 0 for no limit.
title	string = "Select a file to upload"	Main headline or call‑to‑action shown in the drop zone.
subtitle	string = "or drag and drop here"	Secondary descriptive text shown below the title in the drop zone.
height	number = 384	Height (in px) of the drop zone when no file is dropped/selected.
multiple	number = 0	Maximum number of files allowed. Set to 0 for single file mode.

Events

Name	Parameters	Description
@files	[files: File[]]