Support PDF uploads via server-side text extraction

Users can now attach PDFs to any model. At LLM-prep time the server
extracts the text with unpdf (pure-JS pdf.js, no native deps) and
injects it through the existing <document> block path, so PDFs work
with non-multimodal models, the Omni router, and any OpenAI-compatible
backend. Previously a PDF was accepted, stored, and rendered as an
attachment but silently dropped from the model payload.

- extractDocumentText.ts: mime-keyed extractor dispatch (docx etc. slot
  in later); never throws; per-page extraction that stops at the 100k
  char budget, a 500-page cap, and a 20s timeout so adversarial PDFs
  can't pin the event loop; scanned/password/corrupt PDFs degrade to an
  explanatory note instead of failing generation
- prepareFiles.ts: unconditional document branch (not gated on
  multimodal) rendered via formatDocumentBlock with truncation markers
  and quote-stripped name/type attributes
- preprocessMessages.ts: preserve the original filename when
  downloading files from GridFS (document blocks previously showed the
  GridFS hash key instead of the real name)
- Upload endpoint now validates declared MIME types against the
  allowlists (415 otherwise); empty types pass since content is sniffed
  at upload; clipboard pseudo-files and hash re-references unaffected
- UI: PDFs accepted by picker/drop/paste/URL-fetch for every model,
  "Add file" menu, PDF chip for attachments; shared wildcard MIME
  matcher replaces per-component duplicates
- Tests: PDF fixtures plus specs for extraction, injection, and MIME
  validation (29 new tests)

Note: PDFs attached to old conversations were silently ignored before;
on retry they will now be extracted and visible to the model.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TTEP3J7r9pdmAAPyc6NS3P

Author: claude

docs/research/file-upload-types.md

@@ -1,6 +1,6 @@
 # Research: Supporting More Upload File Types (starting with PDF)
 
-_Status: research write-up — no implementation yet. Scope agreed: PDF first, with an architecture that makes adding further types (docx, etc.) easy later._
+_Status: v1 implemented (server-side text extraction via `unpdf`, Option 1 below). Scope: PDF first, with an architecture that makes adding further types (docx, etc.) easy later._
 
 ## Problem statement
 

src/lib/components/chat/ChatInput.svelte

@@ -12,7 +12,11 @@
 	import CarbonChevronRight from "~icons/carbon/chevron-right";
 	import CarbonClose from "~icons/carbon/close";
 	import UrlFetchModal from "./UrlFetchModal.svelte";
-	import { TEXT_MIME_ALLOWLIST, IMAGE_MIME_ALLOWLIST_DEFAULT } from "$lib/constants/mime";
+	import {
+		TEXT_MIME_ALLOWLIST,
+		DOCUMENT_MIME_ALLOWLIST,
+		IMAGE_MIME_ALLOWLIST_DEFAULT,
+	} from "$lib/constants/mime";
 	import MCPServerManager from "$lib/components/mcp/MCPServerManager.svelte";
 	import IconMCP from "$lib/components/icons/IconMCP.svelte";
 
@@ -91,7 +95,7 @@
 	function openFilePickerText() {
 		const textAccept =
 			mimeTypes.filter((m) => !(m === "image/*" || m.startsWith("image/"))).join(",") ||
-			TEXT_MIME_ALLOWLIST.join(",");
+			[...TEXT_MIME_ALLOWLIST, ...DOCUMENT_MIME_ALLOWLIST].join(",");
 		openPickerWithAccept(textAccept);
 	}
 
@@ -318,7 +322,7 @@
 									>
 										<div class="flex items-center gap-1">
 											<CarbonDocument class="size-4 opacity-90 dark:opacity-80" />
-											Add text file
+											Add file
 										</div>
 										<div class="ml-auto flex items-center">
 											<CarbonChevronRight class="size-4 opacity-70 dark:opacity-80" />

src/lib/components/chat/ChatWindow.svelte

@@ -382,13 +382,19 @@
 		providerOverride && providerOverride !== "auto" && !currentModel.isRouter
 	);
 
-	// Always allow common text-like files; add images only when model is multimodal
-	import { TEXT_MIME_ALLOWLIST, IMAGE_MIME_ALLOWLIST_DEFAULT } from "$lib/constants/mime";
+	// Always allow common text-like files and documents (PDF, converted to text server-side);
+	// add images only when model is multimodal
+	import {
+		TEXT_MIME_ALLOWLIST,
+		DOCUMENT_MIME_ALLOWLIST,
+		IMAGE_MIME_ALLOWLIST_DEFAULT,
+	} from "$lib/constants/mime";
 
 	let activeMimeTypes = $derived(
 		Array.from(
 			new Set([
 				...TEXT_MIME_ALLOWLIST,
+				...DOCUMENT_MIME_ALLOWLIST,
 				...(modelIsMultimodal
 					? (currentModel.multimodalAcceptedMimetypes ?? [...IMAGE_MIME_ALLOWLIST_DEFAULT])
 					: []),

src/lib/components/chat/UploadedFile.svelte

@@ -5,11 +5,13 @@
 	import CarbonDocumentBlank from "~icons/carbon/document-blank";
 	import CarbonDownload from "~icons/carbon/download";
 	import CarbonDocument from "~icons/carbon/document";
+	import CarbonDocumentPdf from "~icons/carbon/document-pdf";
 	import Modal from "../Modal.svelte";
 	import AudioPlayer from "../players/AudioPlayer.svelte";
 	import EosIconsLoading from "~icons/eos-icons/loading";
 	import { base } from "$app/paths";
-	import { TEXT_MIME_ALLOWLIST } from "$lib/constants/mime";
+	import { TEXT_MIME_ALLOWLIST, DOCUMENT_MIME_ALLOWLIST } from "$lib/constants/mime";
+	import { mimeMatchesAllowlist } from "$lib/utils/mime";
 
 	interface Props {
 		file: MessageFile;
@@ -44,21 +46,10 @@
 	const isVideo = (mime: string) =>
 		mime.startsWith("video/") || mime === "mp4" || mime === "x-mpeg";
 
-	function matchesAllowed(contentType: string, allowed: readonly string[]): boolean {
-		const ct = contentType.split(";")[0]?.trim().toLowerCase();
-		if (!ct) return false;
-		const [ctType, ctSubtype] = ct.split("/");
-		for (const a of allowed) {
-			const [aType, aSubtype] = a.toLowerCase().split("/");
-			const typeOk = aType === "*" || aType === ctType;
-			const subOk = aSubtype === "*" || aSubtype === ctSubtype;
-			if (typeOk && subOk) return true;
-		}
-		return false;
-	}
-
 	const isPlainText = (mime: string) =>
-		mime === "application/vnd.chatui.clipboard" || matchesAllowed(mime, TEXT_MIME_ALLOWLIST);
+		mime === "application/vnd.chatui.clipboard" || mimeMatchesAllowlist(mime, TEXT_MIME_ALLOWLIST);
+
+	const isDocument = (mime: string) => mimeMatchesAllowlist(mime, DOCUMENT_MIME_ALLOWLIST);
 
 	let isClickable = $derived(isImage(file.mime) || isPlainText(file.mime));
 </script>
@@ -191,6 +182,23 @@
 					{/if}
 				</dl>
 			</div>
+		{:else if isDocument(file.mime)}
+			<div
+				class="flex h-14 w-64 items-center gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-2 2xl:w-72 dark:border-gray-800 dark:bg-gray-900"
+				class:file-hoverable={isClickable}
+			>
+				<div
+					class="grid size-10 flex-none place-items-center rounded-lg bg-gray-100 dark:bg-gray-800"
+				>
+					<CarbonDocumentPdf class="text-base text-gray-700 dark:text-gray-300" />
+				</div>
+				<dl class="flex flex-col items-start truncate leading-tight">
+					<dd class="text-sm">
+						{truncateMiddle(file.name, 28)}
+					</dd>
+					<dt class="text-xs text-gray-400">PDF</dt>
+				</dl>
+			</div>
 		{:else if file.mime === "application/octet-stream"}
 			<div
 				class="flex h-14 w-72 items-center gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-2 dark:border-gray-800 dark:bg-gray-900"

src/lib/server/endpoints/preprocessMessages.ts

@@ -16,9 +16,14 @@ export async function preprocessMessages(
 async function downloadFiles(messages: Message[], convId: ObjectId): Promise<EndpointMessage[]> {
 	return Promise.all(
 		messages.map<Promise<EndpointMessage>>((message) =>
-			Promise.all((message.files ?? []).map((file) => downloadFile(file.value, convId))).then(
-				(files) => ({ ...message, files })
-			)
+			Promise.all(
+				(message.files ?? []).map(async (file) => {
+					// Keep the sniffed mime from storage, but restore the original filename —
+					// the stored filename is the GridFS hash key, not what the user uploaded.
+					const downloaded = await downloadFile(file.value, convId);
+					return { ...downloaded, name: file.name || downloaded.name };
+				})
+			).then((files) => ({ ...message, files }))
 		)
 	);
 }

src/lib/server/files/__tests__/extractDocumentText.spec.ts

@@ -0,0 +1,72 @@
+import { readFile } from "node:fs/promises";
+import { describe, expect, it } from "vitest";
+import { extractDocumentText, isDocumentMime } from "$lib/server/files/extractDocumentText";
+
+const FIXTURE_TEXT = "Hello chat-ui PDF fixture";
+
+async function loadFixture(name: string): Promise<Uint8Array> {
+	return new Uint8Array(await readFile(new URL(`./fixtures/${name}`, import.meta.url)));
+}
+
+describe("extractDocumentText", () => {
+	it("extracts text from a valid PDF", async () => {
+		const data = await loadFixture("sample.pdf");
+		const result = await extractDocumentText(data, "application/pdf");
+
+		expect(result.kind).toBe("text");
+		if (result.kind !== "text") throw new Error("expected text result");
+		expect(result.text).toContain(FIXTURE_TEXT);
+		expect(result.truncated).toBe(false);
+		expect(result.totalChars).toBeGreaterThan(0);
+	});
+
+	it("returns empty for a PDF page without extractable text", async () => {
+		const data = await loadFixture("empty-text.pdf");
+		const result = await extractDocumentText(data, "application/pdf");
+
+		expect(result.kind).toBe("empty");
+	});
+
+	it("returns error (and does not throw) for corrupt bytes", async () => {
+		const data = await loadFixture("corrupt.pdf");
+		const result = await extractDocumentText(data, "application/pdf");
+
+		expect(result.kind).toBe("error");
+	});
+
+	it("truncates extracted text to the char budget", async () => {
+		const data = await loadFixture("sample.pdf");
+		const full = await extractDocumentText(data, "application/pdf");
+		if (full.kind !== "text") throw new Error("expected text result");
+
+		const result = await extractDocumentText(data, "application/pdf", { charBudget: 10 });
+		expect(result.kind).toBe("text");
+		if (result.kind !== "text") throw new Error("expected text result");
+		expect(result.truncated).toBe(true);
+		expect(result.text.length).toBe(10);
+		expect(result.totalChars).toBe(full.totalChars);
+	});
+
+	it("returns error for unsupported document types", async () => {
+		const result = await extractDocumentText(new Uint8Array([1, 2, 3]), "application/zip");
+		expect(result.kind).toBe("error");
+	});
+});
+
+describe("isDocumentMime", () => {
+	it("accepts application/pdf", () => {
+		expect(isDocumentMime("application/pdf")).toBe(true);
+	});
+
+	it("is case-insensitive", () => {
+		expect(isDocumentMime("application/PDF")).toBe(true);
+	});
+
+	it("ignores mime parameters", () => {
+		expect(isDocumentMime("application/pdf; charset=x")).toBe(true);
+	});
+
+	it("rejects non-document mimes", () => {
+		expect(isDocumentMime("text/plain")).toBe(false);
+	});
+});

src/lib/server/files/__tests__/fixtures/corrupt.pdf

@@ -0,0 +1,104 @@
+import { DOCUMENT_MIME_ALLOWLIST } from "$lib/constants/mime";
+import { mimeMatchesAllowlist } from "$lib/utils/mime";
+import { logger } from "$lib/server/logger";
+
+// Per-file cap on extracted characters injected into the prompt.
+export const DOCUMENT_TEXT_CHAR_BUDGET = 100_000;
+
+export type DocumentExtractionResult =
+	| { kind: "text"; text: string; truncated: boolean; totalChars: number }
+	| { kind: "empty" }
+	| { kind: "error"; reason: string };
+
+export function isDocumentMime(mime: string): boolean {
+	return mimeMatchesAllowlist(mime, DOCUMENT_MIME_ALLOWLIST);
+}
+
+// Bounds applied while parsing, not after: a <=10MB PDF can still be a
+// decompression/object bomb, and unpdf runs pdf.js in-process on the event loop.
+const MAX_PDF_PAGES = 500;
+const EXTRACTION_TIMEOUT_MS = 20_000;
+
+type DocumentExtractor = (
+	data: Uint8Array,
+	charBudget: number
+) => Promise<{ text: string; pagesTruncated: boolean }>;
+
+const EXTRACTORS: Record<string, DocumentExtractor> = {
+	"application/pdf": async (data, charBudget) => {
+		// Dynamic import keeps pdf.js out of the cold-start path.
+		const { getDocumentProxy } = await import("unpdf");
+		const pdf = await getDocumentProxy(data);
+		let timer: ReturnType<typeof setTimeout> | undefined;
+		try {
+			const timeout = new Promise<never>((_, reject) => {
+				timer = setTimeout(() => {
+					const err = new Error("document extraction timed out");
+					err.name = "ExtractionTimeout";
+					reject(err);
+				}, EXTRACTION_TIMEOUT_MS);
+			});
+			const extractPages = async () => {
+				const pageCount = Math.min(pdf.numPages, MAX_PDF_PAGES);
+				const pageTexts: string[] = [];
+				let length = 0;
+				// Stop as soon as the budget is met so huge documents are never fully parsed.
+				for (let i = 1; i <= pageCount && length <= charBudget; i++) {
+					const page = await pdf.getPage(i);
+					const content = await page.getTextContent();
+					const pageText = content.items.map((item) => ("str" in item ? item.str : "")).join(" ");
+					pageTexts.push(pageText);
+					length += pageText.length;
+				}
+				return {
+					text: pageTexts.join("\n\n"),
+					pagesTruncated: pdf.numPages > pageTexts.length,
+				};
+			};
+			return await Promise.race([extractPages(), timeout]);
+		} finally {
+			clearTimeout(timer);
+			await pdf.destroy();
+		}
+	},
+};
+
+export async function extractDocumentText(
+	data: Uint8Array,
+	mime: string,
+	options?: { charBudget?: number }
+): Promise<DocumentExtractionResult> {
+	const normalizedMime = (mime || "").toLowerCase().split(";")[0].trim();
+	const extractor = EXTRACTORS[normalizedMime];
+	if (!extractor) {
+		return { kind: "error", reason: "unsupported document type" };
+	}
+
+	try {
+		// Copy the input: pdf.js may transfer/detach the underlying ArrayBuffer, and the
+		// caller's view can be a slice of Node's shared Buffer pool.
+		const copy = new Uint8Array(data);
+		const budget = options?.charBudget ?? DOCUMENT_TEXT_CHAR_BUDGET;
+		const { text, pagesTruncated } = await extractor(copy, budget);
+
+		if (text.trim().length === 0) {
+			return { kind: "empty" };
+		}
+
+		const totalChars = text.length;
+		if (totalChars > budget || pagesTruncated) {
+			return { kind: "text", text: text.slice(0, budget), truncated: true, totalChars };
+		}
+		return { kind: "text", text, truncated: false, totalChars };
+	} catch (err) {
+		if (err instanceof Error && err.name === "PasswordException") {
+			return { kind: "error", reason: "password-protected" };
+		}
+		if (err instanceof Error && err.name === "ExtractionTimeout") {
+			logger.warn({ mime: normalizedMime }, "[files] document text extraction timed out");
+			return { kind: "error", reason: "extraction timed out" };
+		}
+		logger.warn({ err }, "[files] document text extraction failed");
+		return { kind: "error", reason: "unreadable or corrupted" };
+	}
+}