Fileupload — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download file-upload -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { FileUpload } from "@/components/ui/file-upload";

const args = {
  "multiple": false,
  "title": "Upload a document",
  "description": ".pdf or .png",
  "icon": "Ticket",
  "accept": "",
  "uploadButtonText": "",
  "resetText": "",
  "itemsName": "",
  "button": true,
  "bottom": "",
  "uploadSuccessMessage": "",
  "formatErrorMessage": "",
} satisfies Partial<
  InstanceType<typeof FileUpload> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <FileUpload v-bind="args" />
</template>

Props API

Prop	Type	Required
`uploadSuccessMessage`	`string`	No
`formatErrorMessage`	`string`	No
`uploadButtonText`	`string`	No
`resetText`	`string`	No
`itemsName`	`string`	No
`value`	`FileItem[]`	No
`onChange`	`(files: FileItem[]) => void`	No
`button`	`boolean`	No
`multiple`	`boolean`	No
`onUpdated`	`(files: FileItem[]) => void`	No
`title`	`string`	No
`description`	`string`	No
`icon`	`IconName`	No
`accept`	`string`	No
`inputId`	`string`	No
`postAction`	`string`	No

Examples

Default

<script setup lang="ts">
import { ref } from "vue";
import { FileUpload } from "@/components/ui/file-upload";
import { Button } from "@/components/ui/button";

const args = {
  "multiple": false,
  "title": "Add a file",
  "description": ".pdf only",
  "icon": "Ticket",
  "accept": "",
  "uploadButtonText": "",
  "resetText": "",
  "itemsName": "",
  "button": true,
  "bottom": "",
  "uploadSuccessMessage": "",
  "formatErrorMessage": "",
} satisfies Partial<
  InstanceType<typeof FileUpload> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const files = ref([]);
const upload = ref<InstanceType<typeof FileUpload> | null>(null);
const triggerUpload = () => {
  console.log(upload);
  if (upload.value && upload.value.setActive) {
    upload.value.setActive(true);
  }
};
</script>

<template>
  <div>
    <FileUpload v-bind="args" v-model="files" ref="upload">
      {{ args.bottom }}
    </FileUpload>
    <Button
      variant="tertiary"
      class="w-full mt-4"
      @click.prevent="triggerUpload"
      >Upload</Button
    >
  </div>
</template>

Multiple

<script setup lang="ts">
import { FileUpload } from "@/components/ui/file-upload";

const args = {
  "multiple": false,
  "title": "Add a file",
  "description": ".pdf only",
  "icon": "Ticket",
  "accept": "",
  "uploadButtonText": "",
  "resetText": "",
  "itemsName": "",
  "button": true,
  "bottom": "",
  "uploadSuccessMessage": "",
  "formatErrorMessage": "",
} satisfies Partial<
  InstanceType<typeof FileUpload> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <FileUpload multiple title="Upload a document" />
</template>

With File List

<script setup lang="ts">
import { FileUpload } from "@/components/ui/file-upload";
import { reactive } from "vue";

const args = reactive(
  {
    "multiple": false,
    "title": "Add a file",
    "description": ".pdf only",
    "icon": "Ticket",
    "accept": "",
    "uploadButtonText": "",
    "resetText": "",
    "itemsName": "",
    "button": true,
    "bottom": "",
    "uploadSuccessMessage": "",
    "formatErrorMessage": "",
    "files": [],
  } satisfies Partial<
    InstanceType<typeof FileUpload> extends { $props: infer Props } ? Props : {}
  > &
    Record<string, unknown>,
);
</script>

<template>
  <FileUpload v-model="args.files" multiple />
</template>

Accept Types

<script setup lang="ts">
import { FileUpload } from "@/components/ui/file-upload";

const args = {
  "multiple": false,
  "title": "Add a file",
  "description": ".pdf only",
  "icon": "Ticket",
  "accept": "",
  "uploadButtonText": "",
  "resetText": "",
  "itemsName": "",
  "button": true,
  "bottom": "",
  "uploadSuccessMessage": "",
  "formatErrorMessage": "",
} satisfies Partial<
  InstanceType<typeof FileUpload> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <FileUpload accept=".pdf,.png" title="Upload a document" />
</template>

No Button

<script setup lang="ts">
import { FileUpload } from "@/components/ui/file-upload";

const args = {
  "multiple": false,
  "title": "Add a file",
  "description": ".pdf only",
  "icon": "Ticket",
  "accept": "",
  "uploadButtonText": "",
  "resetText": "",
  "itemsName": "",
  "button": true,
  "bottom": "",
  "uploadSuccessMessage": "",
  "formatErrorMessage": "",
} satisfies Partial<
  InstanceType<typeof FileUpload> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <FileUpload :button="false" title="Upload a document" />
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Prop	Type	Default	Description
`accept`	`string`	`—`	Accepted formats separated by comma. If empty accept all file formats
`button`	`boolean`	`—`
`class`	`string`	`—`
`description`	`string`	`—`
`formatErrorMessage`	`string`	`—`
`icon`	`IconName`	`—`
`inputId`	`string`	`—`
`itemsName`	`string`	`—`
`modelValue`	`FileItem[]`	`—`
`multiple`	`boolean`	`—`
`onUpdated`	`() => void`	`—`
`postAction`	`string`	`—`
`resetText`	`string`	`—`
`title`	`string`	`—`
`uploadButtonText`	`string`	`—`
`uploadRef`	`string`	`—`
`uploadSuccessMessage`	`string`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.