File Upload

#Basic usage

Upload artwork

file-upload/basic.vue

<script setup lang="ts">
import { file } from "@bysages/icons";
import { FileUpload, Icon } from "@bysages/vue";
</script>

<template>
  <FileUpload.Root :max-files="3" accept="image/*">
    <FileUpload.Label>Upload artwork</FileUpload.Label>
    <FileUpload.Dropzone>
      <FileUpload.Trigger>Choose files</FileUpload.Trigger>
    </FileUpload.Dropzone>
    <FileUpload.ItemGroup>
      <FileUpload.Context v-slot="{ acceptedFiles }">
        <FileUpload.Item v-for="file in acceptedFiles" :key="file.name" :file="file">
          <FileUpload.ItemPreview>
            <Icon :glyph="file" />
          </FileUpload.ItemPreview>
          <FileUpload.ItemName />
          <FileUpload.ItemSizeText />
          <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
        </FileUpload.Item>
      </FileUpload.Context>
    </FileUpload.ItemGroup>
  </FileUpload.Root>
</template>

#Props

#ClearTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Dropzone

Prop	Type	Default	Description
`disableClick`	`boolean \| undefined`		Whether to disable the click event on the dropzone

#HiddenInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemDeleteTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemGroup

Prop	Type	Default	Description
`type`	`ItemType \| undefined`		—

#ItemName

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemPreviewImage

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemPreview

Prop	Type	Default	Description
`type`	`string`	`'.*'`	The file type to match against. Matches all file types by default.

#ItemSizeText

A styled part — no props of its own; it takes the anatomy's shared styling.

#Item

Prop	Type	Default	Description
`file`	`File`		—
`type`	`ItemType \| undefined`		—

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the trigger.
`accept`	`Record<string, string[]> \| fileUpload.FileMimeType \| fileUpload.FileMimeType[]`		The accept file types
`acceptedFiles`	`File[]`		The controlled accepted files
`allowDrop`	`boolean`	`true`	Whether to allow drag and drop in the dropzone element
`capture`	`'user' \| 'environment'`		The default camera to use when capturing media
`defaultAcceptedFiles`	`File[]`		The default accepted files
`directory`	`boolean`		Whether to accept directories, only works in webkit browsers
`disabled`	`boolean`		Whether the file input is disabled
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; dropzone: string; hiddenInput: string; trigger: string; label: string; item(id: string): string; itemName(id: string): string; itemSizeText(id: string): string; itemPreview(id: string): string; }>`		The ids of the elements. Useful for composition.
`invalid`	`boolean`		Whether the file input is invalid
`locale`	`string`	`"en-US"`	The current locale. Based on the BCP 47 definition.
`maxFiles`	`number`	`1`	The maximum number of files
`maxFileSize`	`number`	`Infinity`	The maximum file size in bytes
`minFileSize`	`number`	`0`	The minimum file size in bytes
`name`	`string`		The name of the underlying file input
`preventDocumentDrop`	`boolean`	`true`	Whether to prevent the drop event on the document
`readOnly`	`boolean`		Whether the file input is read-only
`required`	`boolean`		Whether the file input is required
`transformFiles`	`(files: File[]) => Promise<File[]>`		Function to transform the files
`translations`	`fileUpload.IntlTranslations`		The localized messages to use.
`validate`	`(file: File, details: fileUpload.FileValidateDetails) => fileUpload.FileError[] \| null`		Function to validate a file

#Trigger

A styled part — no props of its own; it takes the anatomy's shared styling.