File Drop Zone

Stable

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

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

Examples

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" | "cancel" | "copy" | "cut" | "error" | "pause" | "play" | "add-block" | "add-circle" | "add-filter" | "add-tag" | "add" | "address-card" | "adhoc-query" | "ai/file" | ... 448 more ... = "file/document"	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.

Events

Name	Parameters	Description
@file	[file: File | undefined]