FileUploadButton

import { useState } from 'react';
import { FileUploadButton } from '@arbol-ai/ui';

const ButtonsExample = () => {
  const [chosen, setChosen] = useState<string[]>([]);
  const choose = (files: File[]) => {
    setChosen(files.map((file) => file.name));
  };
  return (
    <div className="grid gap-3">
      <div className="flex flex-wrap gap-2">
        <FileUploadButton
          acceptedFileTypes={['application/pdf', 'image/*']}
          allowsMultiple
          onSelect={choose}
        />
        <FileUploadButton acceptedFileTypes={['image/*']} defaultCamera="environment" onSelect={choose} />
      </div>
      <p className="text-muted-foreground text-sm">
        {chosen.length > 0 ? chosen.join(', ') : 'No file chosen yet.'}
      </p>
    </div>
  );
};

<ButtonsExample />

import { useState } from 'react';
import { DropZone, UploadProgress } from '@arbol-ai/ui';

const UploadExample = () => {
  const [names, setNames] = useState<string[]>(['authorization.pdf']);
  return (
    <div className="grid max-w-md gap-4">
      <DropZone
        acceptedFileTypes={['application/pdf', 'image/*']}
        allowsMultiple
        description="PDF or images, up to 10 MB."
        onSelect={(files) => {
          setNames([...names, ...files.map((file) => file.name)]);
        }}
      />
      {names.map((name) => (
        <UploadProgress key={name} name={name} value={0.6} />
      ))}
      <UploadProgress errorMessage="The file is larger than 10 MB." name="clinical-history.pdf" />
    </div>
  );
};

<UploadExample />