File Upload

import { FileUpload } from "@brika/clay";

import { FileUpload } from "@brika/clay/components/file-upload";

'use client';

import { Button } from '@brika/clay/components/button';
import {
  FileUpload,
  FileUploadItem,
  FileUploadItemContent,
  FileUploadItemName,
  FileUploadItemPreview,
  FileUploadItemRemove,
  FileUploadItemSize,
  FileUploadList,
  FileUploadTrigger,
} from '@brika/clay/components/file-upload';
import { FileText, ImageIcon, Upload } from 'lucide-react';
import { useState } from 'react';

interface PickedFile {
  readonly id: string;
  readonly name: string;
  readonly size: number;
}

function toPicked(file: File): PickedFile {
  return { id: `${file.name}-${file.size}`, name: file.name, size: file.size };
}

/** Pick files, then list each with its name, size, and a remove button. */
export default function FileUploadDefaultDemo() {
  const [files, setFiles] = useState<PickedFile[]>([
    { id: 'a', name: 'quarterly-report.pdf', size: 2_411_724 },
    { id: 'b', name: 'cover-photo.jpg', size: 845_120 },
  ]);

  const addFiles = (selected: File[]) => setFiles((prev) => [...prev, ...selected.map(toPicked)]);
  const removeFile = (id: string) => setFiles((prev) => prev.filter((f) => f.id !== id));

  return (
    <FileUpload className="w-full max-w-md" multiple onFilesSelected={addFiles}>
      <FileUploadTrigger asChild>
        <Button variant="outline">
          <Upload aria-hidden />
          Choose files
        </Button>
      </FileUploadTrigger>
      {files.length > 0 && (
        <FileUploadList>
          {files.map((file) => (
            <FileUploadItem key={file.id}>
              <FileUploadItemPreview>
                {file.name.endsWith('.jpg') ? <ImageIcon aria-hidden /> : <FileText aria-hidden />}
              </FileUploadItemPreview>
              <FileUploadItemContent>
                <FileUploadItemName>{file.name}</FileUploadItemName>
                <FileUploadItemSize bytes={file.size} />
              </FileUploadItemContent>
              <FileUploadItemRemove onClick={() => removeFile(file.id)} />
            </FileUploadItem>
          ))}
        </FileUploadList>
      )}
    </FileUpload>
  );
}

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "fileUpload": {
      "paddingX": "calc(var(--spacing) * 3)"
    }
  }
}