useFiles

import { useState } from "react";
import { useFiles } from "skybridge/web";
import { useCallTool } from "../helpers.js"; // generated, type-safe from server schema

function ReceiptAttach() {
  const { upload, getDownloadUrl, selectFiles } = useFiles();
  const { callTool, isPending } = useCallTool("scan-receipt");
  const [error, setError] = useState<string>();

  const attachFromDevice = async (file: File) => {
    try {
      const meta = await upload(file);
      const { downloadUrl } = await getDownloadUrl(meta);
      callTool({
        receipt: {
          file_id: meta.fileId,
          download_url: downloadUrl,
          file_name: meta.fileName,
          mime_type: meta.mimeType,
        },
      });
    } catch (e) {
      setError(String(e));
    }
  };

  const attachFromLibrary = async () => {
    try {
      const [picked] = await selectFiles();
      if (!picked) {
        return;
      }
      const { downloadUrl } = await getDownloadUrl(picked);
      callTool({
        receipt: {
          file_id: picked.fileId,
          download_url: downloadUrl,
          file_name: picked.fileName,
          mime_type: picked.mimeType,
        },
      });
    } catch (e) {
      setError(String(e));
    }
  };

  return (
    <div>
      <input
        type="file"
        disabled={isPending}
        onChange={(e) => {
          const file = e.target.files?.[0];
          if (file) {
            attachFromDevice(file);
          }
        }}
      />
      <button disabled={isPending} onClick={attachFromLibrary}>
        Pick from library
      </button>
      {error && <p>Could not attach receipt: {error}</p>}
    </div>
  );
}