File drop zone

'use client';

import { FileButton, FileDropZone, Text } from '@snapshot-ui/react';
import { useState, type ReactElement } from 'react';

const TEN_MB = 10 * 1024 * 1024;

/** Each type by its MIME type and its extensions, since systems disagree on types; HEIC for a phone's photos. */
const TYPES = [
  'application/pdf',
  '.pdf',
  'image/jpeg',
  '.jpg',
  '.jpeg',
  'image/png',
  '.png',
  'image/heic',
  '.heic',
];

export default function FileDropZoneReceipt(): ReactElement {
  const [added, setAdded] = useState<string | null>(null);
  const take = (accepted: File[]): void => {
    if (accepted[0] !== undefined) setAdded(accepted[0].name);
  };
  return (
    <div className="stack" style={{ width: '100%', maxWidth: '28rem' }}>
      <FileDropZone
        label="Receipt"
        description="PDF, JPG, PNG or HEIC, up to 10 MB"
        acceptedFileTypes={TYPES}
        maxFileSize={TEN_MB}
        onFiles={take}
      />
      {/* On a phone only, beside the zone rather than on its button, which would then take photos only: a desktop
          browser ignores capture and opens the file picker. */}
      <span className="touch-only">
        <FileButton
          variant="secondary"
          capture="environment"
          acceptedFileTypes={['image/*', '.heic']}
          maxFileSize={TEN_MB}
          onFiles={take}
        >
          Take a photo
        </FileButton>
      </span>
      {added === null ? null : (
        <Text size="small" tone="muted" className="receipt-added">
          Added {added}
        </Text>
      )}
    </div>
  );
}

'use client';

import { FileDropZone, type FileRejection, type FileRejectionReason } from '@snapshot-ui/react';
import { useState, type ReactElement } from 'react';

const TEN_MB = 10 * 1024 * 1024;

/** Each reason in GOV.UK's words for a file upload's errors. */
const WORDS: Record<FileRejectionReason, string> = {
  type: 'must be a PDF, JPG or PNG',
  size: 'must be smaller than 10 MB',
  empty: 'is empty',
  count: 'was one too many: add up to 5 files at a time',
};

export default function FileDropZoneErrors(): ReactElement {
  const [refused, setRefused] = useState<FileRejection[]>([]);
  return (
    <div style={{ width: '100%', maxWidth: '32rem' }}>
      <FileDropZone
        label="Statements"
        description="PDF, JPG or PNG, up to 10 MB each, 5 at a time"
        acceptedFileTypes={['application/pdf', '.pdf', 'image/jpeg', '.jpg', '.jpeg', 'image/png', '.png']}
        maxFileSize={TEN_MB}
        allowsMultiple
        maxFiles={5}
        errorMessage={refused.map(({ file, reason }, index) => (
          <span key={`${file.name}-${String(index)}`} style={{ display: 'block' }}>
            {`The selected file ${file.name} ${WORDS[reason]}`}
          </span>
        ))}
        onFiles={(_accepted, rejected) => {
          setRefused(rejected);
        }}
      />
    </div>
  );
}

'use client';

import { FileButton, PageDropZone, PageHeader, Switch, Text, type FileRejection } from '@snapshot-ui/react';
import { useState, type ReactElement } from 'react';

const TYPES = ['application/pdf', '.pdf', 'image/*', '.heic'];

export default function FileDropZonePage(): ReactElement {
  const [isOn, setOn] = useState(false);
  const [added, setAdded] = useState<string[]>([]);
  const [refused, setRefused] = useState<string[]>([]);
  const take = (accepted: File[], rejected: FileRejection[]): void => {
    setAdded((names) => [...accepted.map((file) => file.name), ...names].slice(0, 5));
    setRefused(rejected.map(({ file }) => file.name));
  };
  return (
    <div className="stack" style={{ width: '100%', maxWidth: '32rem' }}>
      {/* The page zone's keyboard twin: every page zone has a button in the page header's actions. */}
      <PageHeader
        // An example on a docs page, which has its own h1.
        headingLevel={2}
        title="Documents"
        actions={
          <FileButton acceptedFileTypes={TYPES} allowsMultiple onFiles={take}>
            Upload
          </FileButton>
        }
      />
      <Switch isSelected={isOn} onChange={setOn}>
        Drop anywhere on this page
      </Switch>
      <Text size="small" tone="muted" className="page-zone-added">
        {added.length === 0 ? 'Nothing added yet.' : `Added ${added.join(', ')}`}
      </Text>
      {refused.length === 0 ? null : (
        <Text size="small" tone="muted" className="page-zone-refused">
          {`Not added: ${refused.join(', ')}`}
        </Text>
      )}
      {/* In an app, mount the page zone at the page's root, beside its header: it draws its overlay in the shell. */}
      {isOn ? (
        <PageDropZone
          title="Drop files to upload"
          description="To Documents, 2026"
          acceptedFileTypes={TYPES}
          allowsMultiple
          onFiles={take}
        />
      ) : null}
    </div>
  );
}

'use client';

import { FileButton, Text } from '@snapshot-ui/react';
import { useState, type ReactElement } from 'react';

export default function FileButtonBasic(): ReactElement {
  const [chosen, setChosen] = useState<string[]>([]);
  const take = (accepted: File[]): void => {
    setChosen(accepted.map((file) => file.name));
  };
  return (
    <div className="stack">
      <div className="row">
        <FileButton acceptedFileTypes={['application/pdf']} allowsMultiple onFiles={take}>
          Upload
        </FileButton>
        <FileButton variant="secondary" acceptedFileTypes={['image/*', '.heic']} onFiles={take}>
          Choose a photo
        </FileButton>
      </div>
      <Text size="small" tone="muted">
        {chosen.length === 0 ? 'No file chosen.' : `Chosen: ${chosen.join(', ')}`}
      </Text>
    </div>
  );
}