Fileupload

Installation

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

pnpm exec frontfriend download file-upload -f react --primitive base

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

Usage

import { FileItem, FileUpload } from "@/components/ui/file-upload";
import * as React from "react";
export default function FileUploadExample() {
  const [files, setFiles] = React.useState<FileItem[]>([]);
  return (
    <FileUpload
      title="Upload a document" description=".pdf or .png" button
      value={files}
      onChange={setFiles}
    />
  );
}

Props API

Examples

Default

import { FileItem, FileUpload } from "@/components/ui/file-upload";
import * as React from "react";
export default function FileUploadExample() {
  const [files, setFiles] = React.useState<FileItem[]>([]);
  return (
    <FileUpload
      title="Upload a document" description=".pdf or .png" button
      value={files}
      onChange={setFiles}
    />
  );
}

Multiple

import { FileItem, FileUpload } from "@/components/ui/file-upload";
import * as React from "react";
export default function FileUploadExample() {
  const [files, setFiles] = React.useState<FileItem[]>([]);
  return (
    <FileUpload
      multiple
      title="Upload documents"
      description="Add one or more files"
      value={files}
      onChange={setFiles}
    />
  );
}

With File List

import { FileItem, FileUpload } from "@/components/ui/file-upload";
import * as React from "react";
export default function FileUploadExample() {
  const [files, setFiles] = React.useState<FileItem[]>([
    { name: "report.pdf", size: 1240000, success: true },
    { name: "invoice.pdf", size: 320000, success: true },
  ]);
  return (
    <FileUpload
      multiple
      title="Upload documents"
      description=".pdf only"
      accept="pdf"
      value={files}
      onChange={setFiles}
    />
  );
}

Accept Types

import { FileItem, FileUpload } from "@/components/ui/file-upload";
import * as React from "react";
export default function FileUploadExample() {
  const [files, setFiles] = React.useState<FileItem[]>([]);
  return (
    <FileUpload
      title="Upload an image"
      description="jpg, png or pdf"
      accept="jpg,png,pdf"
      value={files}
      onChange={setFiles}
    />
  );
}

No Button

import { FileItem, FileUpload } from "@/components/ui/file-upload";
import * as React from "react";
export default function FileUploadExample() {
  const [files, setFiles] = React.useState<FileItem[]>([]);
  return (
    <FileUpload
      button={false}
      title="Drag & drop a file"
      description="or click to browse"
      value={files}
      onChange={setFiles}
    />
  );
}

API reference

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

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