File Upload

"use client";

import { FileUpload, Box, Text } from "astralis-ui";
import { useState } from "react";

export function FileUploadDemo() {
  const [rejected, setRejected] = useState<string | null>(null);

  return (
    <Box w="full" maxW="md">
      <FileUpload
        multiple
        maxFiles={3}
        maxSize={5 * 1024 * 1024}
        onReject={(rejections) =>
          setRejected(rejections.map((r) => `${r.file.name} (${r.reason})`).join(", "))
        }
      >
        <FileUpload.Dropzone />
        <FileUpload.ItemGroup />
      </FileUpload>
      {rejected && (
        <Text size="xs" color="muted" mt="2">
          Rejected: {rejected}. Max 3 files, 5 MB each.
        </Text>
      )}
    </Box>
  );
}

import { FileUpload, Button, HStack } from "astralis-ui";
import { Paperclip } from "lucide-react";

export function FileUploadTrigger() {
  return (
    <FileUpload multiple>
      <HStack gap="3" alignItems="start">
        <FileUpload.Trigger>
          <Button variant="outline" colorScheme="gray" size="sm" leftIcon={<Paperclip size={14} />}>
            Attach files
          </Button>
        </FileUpload.Trigger>
      </HStack>
      <FileUpload.ItemGroup />
    </FileUpload>
  );
}