From 48605418ebbe3cd621679568709ebff8ff59d8e2 Mon Sep 17 00:00:00 2001
From: Raunak Bhagat <r@rabh.io>
Date: Tue, 13 Oct 2026 19:59:24 +0000
Subject: [PATCH] feat(opal): update `InputUpload` and remove previous, legacy
 component (#15965)

---
 web/.type-coverage-baseline.yaml              |  17 +-
 web/lib/opal/src/components/README.md         |   2 +-
 web/lib/opal/src/components/index.ts          |  10 +-
 .../components/inputs/input-file/README.md    |  24 --
 .../inputs/input-file/components.tsx          | 181 ----------
 .../InputUpload.stories.tsx}                  |  46 ++-
 .../components/inputs/input-upload/README.md  |  62 ++++
 .../inputs/input-upload/components.tsx        | 330 ++++++++++++++++++
 .../components/inputs/input-upload/styles.css |  53 +++
 .../opal/src/form/InputUploadField.test.tsx   | 173 +++++++++
 web/lib/opal/src/form/InputUploadField.tsx    |  72 ++++
 web/lib/opal/src/form/index.ts                |   4 +
 web/lib/opal/src/hooks/index.ts               |   1 +
 web/lib/opal/src/hooks/useWindowFileDrag.ts   |  55 +++
 web/lib/opal/src/icons/import-icon.tsx        |  22 --
 web/lib/opal/src/icons/import.tsx             |  20 ++
 web/lib/opal/src/icons/index.ts               |   2 +-
 web/lib/opal/src/strings.tsx                  |  17 +-
 .../admin/billing/LicenseActivationCard.tsx   |   6 +-
 web/src/components/Field.tsx                  | 165 +--------
 .../admin/connectors/FileUpload.tsx           |  96 -----
 web/src/i18n/OpalStringsBridge.tsx            |   6 +-
 web/src/i18n/messages/ar.json                 |  10 +-
 web/src/i18n/messages/de.json                 |  10 +-
 web/src/i18n/messages/en.json                 |  10 +-
 web/src/i18n/messages/es.json                 |  10 +-
 web/src/i18n/messages/fr.json                 |  10 +-
 web/src/i18n/messages/ja.json                 |  10 +-
 web/src/i18n/messages/ko.json                 |  10 +-
 web/src/i18n/messages/pt.json                 |  10 +-
 web/src/i18n/messages/zh.json                 |  10 +-
 web/src/lib/connectors/fileTypes.ts           |   4 -
 web/src/lib/connectors/types/fileTypes.ts     |   1 -
 .../components/AccountNameField.tsx           |  35 ++
 .../components/CreateCredential.test.tsx      |  59 ++++
 .../components/CreateCredential.tsx           |  24 +-
 .../components/CredentialFieldsRenderer.tsx   | 105 +++++-
 .../credentials/components/EditCredential.tsx |   7 +-
 web/src/lib/credentials/constants.ts          |   7 +-
 .../form/FileDropzoneField.tsx                |   2 +-
 .../modals/languageModels/VertexAIModal.tsx   |   8 +-
 .../forms/VertexImageGenForm.tsx              |  21 +-
 .../views/admin/IndexSettingsPage/shared.tsx  |  21 +-
 .../form/gdrive/Credential.tsx                |  10 +-
 .../form/gmail/Credential.tsx                 |  10 +-
 .../sections/AuthenticationAccountSection.tsx |  38 +-
 46 files changed, 1169 insertions(+), 637 deletions(-)
 delete mode 100644 web/lib/opal/src/components/inputs/input-file/README.md
 delete mode 100644 web/lib/opal/src/components/inputs/input-file/components.tsx
 rename web/lib/opal/src/components/inputs/{input-file/InputFile.stories.tsx => input-upload/InputUpload.stories.tsx} (59%)
 create mode 100644 web/lib/opal/src/components/inputs/input-upload/README.md
 create mode 100644 web/lib/opal/src/components/inputs/input-upload/components.tsx
 create mode 100644 web/lib/opal/src/components/inputs/input-upload/styles.css
 create mode 100644 web/lib/opal/src/form/InputUploadField.test.tsx
 create mode 100644 web/lib/opal/src/form/InputUploadField.tsx
 create mode 100644 web/lib/opal/src/hooks/useWindowFileDrag.ts
 delete mode 100644 web/lib/opal/src/icons/import-icon.tsx
 create mode 100644 web/lib/opal/src/icons/import.tsx
 delete mode 100644 web/src/components/admin/connectors/FileUpload.tsx
 create mode 100644 web/src/lib/credentials/components/AccountNameField.tsx
 create mode 100644 web/src/lib/credentials/components/CreateCredential.test.tsx

diff --git a/web/.type-coverage-baseline.yaml b/web/.type-coverage-baseline.yaml
index a62a9742d4..af2221be7c 100644
--- a/web/.type-coverage-baseline.yaml
+++ b/web/.type-coverage-baseline.yaml
@@ -8,7 +8,7 @@
 # `ods type-coverage typescript --update`.
 #
 # Generated file: do not edit by hand.
-total: 98.8
+total: 98.9
 packages:
   .: 100
   src: 99.4
@@ -21,15 +21,15 @@ packages:
   src/app/components: 100
   src/app/config: 100
   src/app/connector: 100
-  src/app/craft: 99.3
+  src/app/craft: 99.4
   src/app/ee: 95.6
   src/app/federated: 97
   src/app/mcp: 99.5
   src/app/nrf: 99.2
   src/app/oauth-config: 100
   src/app/oauth-provider: 100
-  src/components: 97.7
-  src/components/admin: 96.1
+  src/components: 97.6
+  src/components/admin: 95.8
   src/components/auth: 89.3
   src/components/chat: 97.2
   src/components/context: 100
@@ -42,7 +42,7 @@ packages:
   src/components/oauth: 89.5
   src/components/search: 99.5
   src/components/standardAnswers: 100
-  src/components/tools: 99.7
+  src/components/tools: 100
   src/components/tooltip: 100
   src/components/ui: 99.9
   src/components/voice: 100
@@ -69,7 +69,7 @@ packages:
   src/lib/chat: 98.6
   src/lib/connectors: 99
   src/lib/constants: 100
-  src/lib/credentials: 98.3
+  src/lib/credentials: 98.4
   src/lib/extension: 100
   src/lib/externalApps: 100
   src/lib/hierarchy: 100
@@ -91,10 +91,11 @@ packages:
   src/lib/sidebar: 100
   src/lib/skills: 97.4
   src/lib/sso: 99.3
+  src/lib/tiers: 100
   src/lib/tools: 98.1
   src/lib/tracing: 96.9
   src/lib/usage: 97.9
-  src/lib/users: 99
+  src/lib/users: 99.1
   src/lib/voice: 99.3
   src/lib/webSearch: 97.4
   src/providers: 99.5
@@ -130,5 +131,5 @@ packages:
   src/sections/skills: 99.8
   src/sections/usage: 99.6
   src/views: 99.4
-  src/views/admin: 98.4
+  src/views/admin: 98.5
   types: 100
diff --git a/web/lib/opal/src/components/README.md b/web/lib/opal/src/components/README.md
index 24e15cdb95..2e6c6a3173 100644
--- a/web/lib/opal/src/components/README.md
+++ b/web/lib/opal/src/components/README.md
@@ -22,7 +22,7 @@ The barrel file at `index.ts` re-exports each component and its prop types. Each
 | [OpenButton](./buttons/open-button/)           | Trigger button with rotating chevron for popovers            | [README](./buttons/open-button/README.md)      |
 | [Tag](./tag/)                                  | Small colored label for status/category metadata             | [README](./tag/README.md)                      |
 | [InputDateRangePicker](./inputs/chrono/input-date-range-picker/) | Preset date-range strip with a custom-range calendar popover | [README](./inputs/chrono/input-date-range-picker/README.md) |
-| [InputFile](./inputs/input-file/)              | Text field that doubles as a file picker                     | [README](./inputs/input-file/README.md)        |
+| [InputUpload](./inputs/input-upload/)              | Upload control in the input chrome: pick, drop or paste      | [README](./inputs/input-upload/README.md)        |
 | [InputAvatar](./inputs/input-avatar/)          | Avatar frame with primary input chrome                       | [README](./inputs/input-avatar/README.md)      |
 | [InputImage](./inputs/input-image/)            | Circular image dropzone with edit overlay                    | [README](./inputs/input-image/README.md)       |
 | [InputKeyValue](./inputs/input-key-value/)     | Key/value pair editor with validation                        | [README](./inputs/input-key-value/README.md)   |
diff --git a/web/lib/opal/src/components/index.ts b/web/lib/opal/src/components/index.ts
index 42125f159c..dae6f6a54b 100644
--- a/web/lib/opal/src/components/index.ts
+++ b/web/lib/opal/src/components/index.ts
@@ -91,11 +91,13 @@ export {
   type InputNumberProps,
 } from "@opal/components/inputs/input-number/components";
 
-/* InputFile */
+/* InputUpload */
 export {
-  default as InputFile,
-  type InputFileProps,
-} from "@opal/components/inputs/input-file/components";
+  default as InputUpload,
+  type InputUploadProps,
+  type InputUploadTextProps,
+  type InputUploadFileProps,
+} from "@opal/components/inputs/input-upload/components";
 
 /* InputList */
 export {
diff --git a/web/lib/opal/src/components/inputs/input-file/README.md b/web/lib/opal/src/components/inputs/input-file/README.md
deleted file mode 100644
index 60783c3efa..0000000000
--- a/web/lib/opal/src/components/inputs/input-file/README.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# InputFile
-
-**Import:** `import { InputFile, type InputFileProps } from "@opal/components";`
-
-A text field that doubles as a file picker: type a value directly, or attach a file via the
-paperclip action and the field displays the file's name and carries its text content. Clearing
-returns to typed mode. Built on `InputTypeIn`; the attach/clear actions are `Button`s in the
-right slot.
-
-## Props
-
-Extends `InputTypeInProps` minus the props the component owns itself —
-`type`, `rightChildren`, `value`, `onChange`, `readOnly`, `clearButton` —
-plus:
-
-| Prop                 | Type                            | Description                                            |
-| -------------------- | ------------------------------- | ------------------------------------------------------ |
-| `setValue`           | `(value: string) => void`       | Receives the typed text or the selected file's content |
-| `onValueSet`         | callback                        | Fires after a value lands                              |
-| `accept`             | `string`                        | File-picker accept filter                              |
-| `maxSizeKb`          | `number`                        | Reject files above this size                           |
-| `onFileSizeExceeded` | `({ file, maxSizeKb }) => void` | Called when a file is rejected for size                |
-
-The attach/clear aria labels come from `OpalStrings` (`attachFile` / `clearFile`).
diff --git a/web/lib/opal/src/components/inputs/input-file/components.tsx b/web/lib/opal/src/components/inputs/input-file/components.tsx
deleted file mode 100644
index be1ec83566..0000000000
--- a/web/lib/opal/src/components/inputs/input-file/components.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-"use client";
-
-import React, { useRef, useState } from "react";
-import InputTypeIn, {
-  type InputTypeInProps,
-} from "@opal/components/inputs/texts/input-type-in/components";
-import { Button } from "@opal/components/buttons/button/components";
-import { SvgPaperclip, SvgX } from "@opal/icons";
-import { noProp } from "@opal/utils";
-import { useOpalStrings } from "@opal/strings";
-
-export interface InputFileProps extends Omit<
-  InputTypeInProps,
-  "type" | "rightChildren" | "value" | "onChange" | "readOnly" | "clearButton"
-> {
-  /**
-   * Whether the input is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Whether the input has an error.
-   */
-  error?: boolean;
-  // Receives the extracted file content (text) or pasted value
-  setValue: (value: string) => void;
-  // Called when a value is committed via file selection or paste (not on each keystroke)
-  onValueSet?: (value: string, source: "file" | "paste") => void;
-  // HTML accept attribute e.g. "application/json" or ".txt,.md"
-  accept?: string;
-  // Maximum allowed file size in kilobytes. If exceeded, file is rejected.
-  maxSizeKb?: number;
-  // Optional callback when the selected file exceeds max size
-  onFileSizeExceeded?: (args: { file: File; maxSizeKb: number }) => void;
-}
-
-export default function InputFile({
-  setValue,
-  onValueSet,
-  accept,
-  maxSizeKb,
-  onFileSizeExceeded,
-  disabled,
-  error,
-  variant,
-  placeholder,
-  ...rest
-}: InputFileProps) {
-  const strings = useOpalStrings();
-  const [displayValue, setDisplayValue] = useState<string>("");
-  const [selectedFileName, setSelectedFileName] = useState<string | null>(null);
-  const [isFileMode, setIsFileMode] = useState<boolean>(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  // Derive disabled/readOnly state from either the boolean props or the variant
-  const isDisabled = disabled || variant === "disabled";
-  const isReadOnly = variant === "readOnly";
-  const isNonEditable = isDisabled || isReadOnly;
-
-  function openFilePicker() {
-    if (isNonEditable) return;
-    fileInputRef.current?.click();
-  }
-
-  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    // Enforce file size limit if provided
-    if (typeof maxSizeKb === "number" && maxSizeKb >= 0) {
-      const maxBytes = maxSizeKb * 1024;
-      if (file.size > maxBytes) {
-        onFileSizeExceeded?.({ file, maxSizeKb });
-        // Reset file input to allow re-selecting the same file
-        e.target.value = "";
-        return;
-      }
-    }
-
-    const reader = new FileReader();
-    reader.onload = () => {
-      const textContent =
-        typeof reader.result === "string" ? reader.result : "";
-      setValue(textContent);
-      setSelectedFileName(file.name);
-      setDisplayValue(file.name);
-      setIsFileMode(true);
-      onValueSet?.(textContent, "file");
-    };
-    reader.onerror = () => {
-      // Reset state on error
-      setSelectedFileName(null);
-      setDisplayValue("");
-      setIsFileMode(false);
-      setValue("");
-    };
-    reader.readAsText(file);
-    // clear the input value to allow re-selecting the same file if needed
-    e.target.value = "";
-  }
-
-  function handleClear() {
-    setSelectedFileName(null);
-    setDisplayValue("");
-    setIsFileMode(false);
-    setValue("");
-  }
-
-  function handleChangeWhenTyping(e: React.ChangeEvent<HTMLInputElement>) {
-    if (isFileMode) return; // ignore typing when file-mode is active
-    const next = e.target.value;
-    setDisplayValue(next);
-    setValue(next);
-  }
-
-  function handlePaste(e: React.ClipboardEvent<HTMLInputElement>) {
-    // Don't allow paste when non-editable
-    if (isNonEditable) return;
-    // Switch to editable mode and use pasted text as the value
-    const pastedText = e.clipboardData.getData("text");
-    if (!pastedText) return;
-    e.preventDefault();
-    setIsFileMode(false);
-    setSelectedFileName(null);
-    setDisplayValue(pastedText);
-    setValue(pastedText);
-    onValueSet?.(pastedText, "paste");
-  }
-
-  const rightChildren = isFileMode ? (
-    <Button
-      icon={SvgX}
-      onClick={noProp(handleClear)}
-      type="button"
-      prominence="tertiary"
-      size="sm"
-      aria-label={strings.clearFile}
-    />
-  ) : (
-    <Button
-      disabled={isNonEditable}
-      icon={SvgPaperclip}
-      onClick={noProp(openFilePicker)}
-      type="button"
-      prominence="tertiary"
-      size="sm"
-      aria-label={strings.attachFile}
-    />
-  );
-
-  return (
-    <>
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept={accept}
-        onChange={handleFileChange}
-        aria-hidden
-        className="hidden"
-        tabIndex={-1}
-        disabled={isNonEditable}
-      />
-      <InputTypeIn
-        {...rest}
-        placeholder={placeholder}
-        variant={
-          isDisabled
-            ? "disabled"
-            : error
-              ? "error"
-              : isFileMode || isReadOnly
-                ? "readOnly"
-                : variant
-        }
-        value={displayValue}
-        onChange={handleChangeWhenTyping}
-        onPaste={handlePaste}
-        rightChildren={rightChildren}
-      />
-    </>
-  );
-}
diff --git a/web/lib/opal/src/components/inputs/input-file/InputFile.stories.tsx b/web/lib/opal/src/components/inputs/input-upload/InputUpload.stories.tsx
similarity index 59%
rename from web/lib/opal/src/components/inputs/input-file/InputFile.stories.tsx
rename to web/lib/opal/src/components/inputs/input-upload/InputUpload.stories.tsx
index 5f9a22f1b6..3fce6372a8 100644
--- a/web/lib/opal/src/components/inputs/input-file/InputFile.stories.tsx
+++ b/web/lib/opal/src/components/inputs/input-upload/InputUpload.stories.tsx
@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import React from "react";
-import InputFile from "@opal/components/inputs/input-file/components";
+import InputUpload from "@opal/components/inputs/input-upload/components";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-const meta: Meta<typeof InputFile> = {
-  title: "opal/components/InputFile",
-  component: InputFile,
+const meta: Meta<typeof InputUpload> = {
+  title: "opal/components/InputUpload",
+  component: InputUpload,
   tags: ["autodocs"],
   decorators: [
     (Story) => (
@@ -19,13 +19,16 @@ const meta: Meta<typeof InputFile> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof InputFile>;
+type Story = StoryObj<typeof InputUpload>;
 
 export const Default: Story = {
   render: function DefaultStory() {
     const [, setValue] = React.useState("");
     return (
-      <InputFile placeholder="Paste or attach a file..." setValue={setValue} />
+      <InputUpload
+        placeholder="Paste or attach a file..."
+        setValue={setValue}
+      />
     );
   },
 };
@@ -34,7 +37,7 @@ export const WithAcceptFilter: Story = {
   render: function AcceptFilterStory() {
     const [, setValue] = React.useState("");
     return (
-      <InputFile
+      <InputUpload
         placeholder="JSON files only..."
         setValue={setValue}
         accept="application/json,.json"
@@ -47,7 +50,7 @@ export const WithMaxSize: Story = {
   render: function MaxSizeStory() {
     const [, setValue] = React.useState("");
     return (
-      <InputFile
+      <InputUpload
         placeholder="Max 100KB..."
         setValue={setValue}
         maxSizeKb={100}
@@ -61,7 +64,11 @@ export const WithMaxSize: Story = {
 
 export const Disabled: Story = {
   render: () => (
-    <InputFile placeholder="Cannot upload" setValue={() => {}} disabled />
+    <InputUpload
+      placeholder="Cannot upload"
+      setValue={() => {}}
+      variant="disabled"
+    />
   ),
 };
 
@@ -69,7 +76,26 @@ export const ErrorState: Story = {
   render: function ErrorStory() {
     const [, setValue] = React.useState("");
     return (
-      <InputFile placeholder="Required file..." setValue={setValue} error />
+      <InputUpload
+        placeholder="Required file..."
+        setValue={setValue}
+        variant="error"
+      />
+    );
+  },
+};
+
+export const FileMode: Story = {
+  render: function FileModeStory() {
+    const [file, setFile] = React.useState<File | null>(null);
+    return (
+      <InputUpload
+        mode="file"
+        accept=".pfx"
+        placeholder="Attach a .pfx certificate"
+        value={file}
+        onFileChange={setFile}
+      />
     );
   },
 };
diff --git a/web/lib/opal/src/components/inputs/input-upload/README.md b/web/lib/opal/src/components/inputs/input-upload/README.md
new file mode 100644
index 0000000000..99188f499e
--- /dev/null
+++ b/web/lib/opal/src/components/inputs/input-upload/README.md
@@ -0,0 +1,62 @@
+# InputUpload
+
+**Import:** `import { InputUpload, type InputUploadProps } from "@opal/components";`
+**Formik:** `import { InputUploadField } from "@opal/form";`
+
+An upload control in the input chrome, for one file in a form row. Nothing is typed: a click, Enter
+or Space opens the file picker, and a file can be dropped on it. With a value, Delete or Backspace
+clears it, as the × does; clearing with the × returns focus to the control. It leads with an import icon, shows
+the placeholder until a file is in, then the file's name, with a × at the end that clears it.
+
+While files are dragged anywhere over the page (`useWindowFileDrag` from `@opal/hooks`), the control
+shows itself as a drop target: a dashed `action-selection-05` border, `action-selection-01` fill, and
+blue icon and text. Over the control itself the fill deepens to `action-selection-02`. The × hides
+during a drag. The copy says what a drop does:
+
+| Drag            | Empty                   | Holding a file              |
+| --------------- | ----------------------- | --------------------------- |
+| Over the page   | "Drop file here to add" | the file's name             |
+| Over the control | "Drop file here to add" | "Drop here to replace file" |
+
+A dropped file must match `accept`, and is refused above `maxSizeKb`, as a picked one is.
+
+## Modes
+
+- **`mode="text"`** (default): the value is the file's **text** (`setValue`), for text files such as a
+  JSON key. Focused, the control also takes a paste (Cmd/Ctrl+V); the pasted text becomes the value
+  and the control shows "Pasted text".
+- **`mode="file"`**: the value is the **`File`** itself, unread (`onFileChange`), for a binary file
+  such as a `.pfx` certificate. No paste.
+
+## Props
+
+| Prop                 | Mode | Type                            | Description                                                                 |
+| -------------------- | ---- | ------------------------------- | --------------------------------------------------------------------------- |
+| `mode`               | both | `"text" \| "file"`              | Default `"text"`                                                            |
+| `value`              | text | `string`                        | The value, when the caller owns it. Set from outside, it shows "File attached" |
+| `setValue`           | text | `(value: string) => void`       | Receives the file's text or the pasted text; `""` once cleared              |
+| `value`              | file | `File \| null`                  | The file, when the caller owns it                                           |
+| `onFileChange`       | file | `(file: File \| null) => void`  | Receives the file, or `null` once cleared                                   |
+| `variant`            | both | `InputVariants`                 | `"primary"` (default), `"error"`, `"disabled"` (no picking, dropping or pasting), `"readOnly"` |
+| `placeholder`        | both | `string \| RichStr`              | Shown while empty. Default: "Add a file…"                                  |
+| `accept`             | both | `string`                        | The picker's filter, as the HTML `accept` attribute; a drop must match it   |
+| `maxSizeKb`          | both | `number`                        | Rejects a file larger than this                                             |
+| `onFileSizeExceeded` | both | `({ file, maxSizeKb }) => void` | Called when a file is rejected for its size                                 |
+| `id`, `name`, `onBlur`, `data-testid` | both | —              | Passed to the control (`name` to the hidden file input)                     |
+
+Without `value`, the control keeps its own. `InputUploadField` binds it to Formik: a `string` field in
+text mode, a `File | null` field in file mode. An upload, paste or clear marks the field touched; a
+touched field with an error shows the error variant.
+
+Labels come from `OpalStrings`: `inputUploadPlaceholder`, `clearFile`, `inputUploadPasted`, `inputUploadAttached`,
+`inputUploadDropToAdd` and `inputUploadDropToReplace`.
+
+## Usage
+
+```tsx
+<InputUpload accept="application/json" placeholder="Upload a key file" setValue={setKey} />
+
+<InputUpload mode="file" accept=".pfx" onFileChange={setCertificate} />
+
+<InputUploadField name="apiKey" accept=".json" />
+```
diff --git a/web/lib/opal/src/components/inputs/input-upload/components.tsx b/web/lib/opal/src/components/inputs/input-upload/components.tsx
new file mode 100644
index 0000000000..cab47db448
--- /dev/null
+++ b/web/lib/opal/src/components/inputs/input-upload/components.tsx
@@ -0,0 +1,330 @@
+"use client";
+
+import "@opal/components/inputs/shared.css";
+import "@opal/components/inputs/input-upload/styles.css";
+import React, { useEffect, useRef, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { Button } from "@opal/components/buttons/button/components";
+import { Text } from "@opal/components/text/components";
+import { SvgImport, SvgX } from "@opal/icons";
+import { noProp } from "@opal/utils";
+import { useOpalStrings } from "@opal/strings";
+import useWindowFileDrag from "@opal/hooks/useWindowFileDrag";
+import type { InputVariants, RichStr } from "@opal/types";
+
+interface InputUploadBaseProps {
+  /** Visual state, as on the other inputs. @default "primary" */
+  variant?: InputVariants;
+  /**
+   * Shown while nothing is uploaded. Accepts `markdown()`. Default: "Add a
+   * file…" (`OpalStrings.inputUploadPlaceholder`).
+   */
+  placeholder?: string | RichStr;
+  /** The control's id, so a `<label htmlFor>` names it and opens it. */
+  id?: string;
+  /** Submitted with the hidden file input. */
+  name?: string;
+  /** Called when focus leaves the control. */
+  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+  "data-testid"?: string;
+  /**
+   * The file picker's filter, as the HTML `accept` attribute
+   * (`"application/json,.json"`). A dropped file must match it too.
+   */
+  accept?: string;
+  /** Rejects a file larger than this many kilobytes. */
+  maxSizeKb?: number;
+  /** Called when a file is rejected for its size. */
+  onFileSizeExceeded?: (args: { file: File; maxSizeKb: number }) => void;
+}
+
+/** The default: the uploaded file's text, or pasted text. */
+export type InputUploadTextProps = InputUploadBaseProps & {
+  mode?: "text";
+  /**
+   * The value, when the caller owns it. Unset, the control keeps its own.
+   * A change from outside (a reset) drops the uploaded file's name.
+   */
+  value?: string;
+  /** Receives the uploaded file's text or the pasted text; `""` once cleared. */
+  setValue: (value: string) => void;
+};
+
+/** The uploaded file itself, for a binary file such as a certificate. */
+export type InputUploadFileProps = InputUploadBaseProps & {
+  mode: "file";
+  /** The file, when the caller owns it. Unset, the control keeps its own. */
+  value?: File | null;
+  /** Receives the uploaded file, or `null` once it is cleared. */
+  onFileChange: (file: File | null) => void;
+};
+
+export type InputUploadProps = InputUploadTextProps | InputUploadFileProps;
+
+/** Whether `file` matches an HTML `accept` list: extensions, MIME types or `type/*`. */
+function matchesAccept(file: File, accept: string | undefined): boolean {
+  if (!accept) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return accept
+    .split(",")
+    .map((entry) => entry.trim().toLowerCase())
+    .filter(Boolean)
+    .some((entry) =>
+      entry.startsWith(".")
+        ? name.endsWith(entry)
+        : entry.endsWith("/*")
+          ? type.startsWith(entry.slice(0, -1))
+          : type === entry
+    );
+}
+
+/**
+ * An upload control in the input chrome. A click (or Enter or Space) opens
+ * the file picker, and a file can be dropped on it. Nothing is typed. Once a
+ * file is in, it shows the file's name, and the × at the end clears it.
+ *
+ * While files are dragged anywhere over the page, it shows itself as a drop
+ * target, darker once the pointer is over it. Its copy says what a drop
+ * does: add a file, or replace the one it holds.
+ *
+ * - `mode="text"` (default): the value is the file's text. Focused, the
+ *   control also takes a paste, whose text becomes the value.
+ * - `mode="file"`: the value is the `File` itself, unread, for a binary file
+ *   such as a certificate.
+ *
+ * @example
+ * ```tsx
+ * <InputUpload accept="application/json" setValue={setKey} />
+ *
+ * <InputUpload mode="file" accept=".pfx" onFileChange={setCertificate} />
+ * ```
+ */
+export default function InputUpload(props: InputUploadProps) {
+  const {
+    variant = "primary",
+    placeholder,
+    id,
+    name,
+    onBlur,
+    accept,
+    maxSizeKb,
+    onFileSizeExceeded,
+  } = props;
+  const strings = useOpalStrings();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const isNonEditable = variant === "disabled" || variant === "readOnly";
+
+  // Text mode: the value when the caller does not own it, and what it came
+  // from: a file's name, or a paste.
+  const [ownText, setOwnText] = useState<string>("");
+  const [source, setSource] = useState<
+    { kind: "file"; name: string } | { kind: "paste" } | null
+  >(null);
+  // File mode: the file, when the caller does not own it.
+  const [ownFile, setOwnFile] = useState<File | null>(null);
+
+  // The last value this control reported. A different one from outside (a
+  // form reset) forgets where the old value came from.
+  const reportedRef = useRef<string | undefined>(undefined);
+  const outsideText = props.mode !== "file" ? props.value : undefined;
+  useEffect(() => {
+    if (outsideText !== undefined && outsideText !== reportedRef.current) {
+      setSource(null);
+    }
+  }, [outsideText]);
+
+  const currentFile: File | null =
+    props.mode === "file"
+      ? props.value !== undefined
+        ? props.value
+        : ownFile
+      : null;
+  const currentText: string =
+    props.mode === "file" ? "" : (props.value ?? ownText);
+
+  // What the control shows: the file's name, "Pasted text", or, for a value
+  // set from outside, "File attached".
+  const label: string | null =
+    props.mode === "file"
+      ? (currentFile?.name ?? null)
+      : source?.kind === "file"
+        ? source.name
+        : source?.kind === "paste"
+          ? strings.inputUploadPasted
+          : currentText
+            ? strings.inputUploadAttached
+            : null;
+  const hasValue: boolean = label !== null;
+
+  function reportText(text: string) {
+    if (props.mode === "file") return;
+    reportedRef.current = text;
+    if (props.value === undefined) setOwnText(text);
+    props.setValue(text);
+  }
+
+  function reportFile(file: File | null) {
+    if (props.mode !== "file") return;
+    if (props.value === undefined) setOwnFile(file);
+    props.onFileChange(file);
+  }
+
+  function clear() {
+    setSource(null);
+    if (props.mode === "file") reportFile(null);
+    else reportText("");
+  }
+
+  /** Takes a picked or dropped file, unless its type or size is refused. */
+  function takeFile(file: File) {
+    if (!matchesAccept(file, accept)) return;
+    if (typeof maxSizeKb === "number" && maxSizeKb >= 0) {
+      if (file.size > maxSizeKb * 1024) {
+        onFileSizeExceeded?.({ file, maxSizeKb });
+        return;
+      }
+    }
+    if (props.mode === "file") {
+      reportFile(file);
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      setSource({ kind: "file", name: file.name });
+      reportText(typeof reader.result === "string" ? reader.result : "");
+    };
+    reader.onerror = clear;
+    reader.readAsText(file);
+  }
+
+  // Drag and drop only: a click opens the picker below.
+  const { getRootProps, isDragActive } = useDropzone({
+    onDrop: (files) => {
+      const file = files[0];
+      if (file) takeFile(file);
+    },
+    multiple: false,
+    disabled: isNonEditable,
+    noClick: true,
+    noKeyboard: true,
+  });
+
+  // While files are dragged: anywhere over the page, or over this control.
+  const filesDragged = useWindowFileDrag(!isNonEditable);
+  const drag: "page" | "over" | null = isDragActive
+    ? "over"
+    : filesDragged
+      ? "page"
+      : null;
+  // Over the page, a held file keeps its name; over the control, the copy
+  // says the drop replaces it.
+  const shownLabel: string | null =
+    drag === null
+      ? label
+      : !hasValue
+        ? strings.inputUploadDropToAdd
+        : drag === "over"
+          ? strings.inputUploadDropToReplace
+          : label;
+
+  function openFilePicker() {
+    if (!isNonEditable) fileInputRef.current?.click();
+  }
+
+  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (file) takeFile(file);
+    // Lets the same file be picked again.
+    e.target.value = "";
+  }
+
+  function handlePaste(e: React.ClipboardEvent<HTMLButtonElement>) {
+    if (props.mode === "file" || isNonEditable) return;
+    const pastedText = e.clipboardData.getData("text");
+    if (!pastedText) return;
+    e.preventDefault();
+    setSource({ kind: "paste" });
+    reportText(pastedText);
+  }
+
+  return (
+    <div
+      {...getRootProps({ className: "opal-input-upload" })}
+      data-drag={drag ?? undefined}
+    >
+      <input
+        ref={fileInputRef}
+        type="file"
+        name={name}
+        accept={accept}
+        onChange={handleFileChange}
+        aria-hidden
+        className="hidden"
+        tabIndex={-1}
+        disabled={isNonEditable}
+      />
+      <div className="opal-input" data-variant={variant}>
+        {/* The whole field picks a file, as a button a label can point at;
+        the × beside it is its own button. Its name is the label, else its
+        text. Enter and Space open the picker, as on any button. */}
+        <button
+          id={id}
+          type="button"
+          disabled={isNonEditable}
+          data-testid={props["data-testid"]}
+          className="opal-input-upload-trigger"
+          onClick={openFilePicker}
+          ref={triggerRef}
+          onPaste={handlePaste}
+          onKeyDown={(e) => {
+            // Delete or Backspace clears the value, as the × does.
+            if (e.key !== "Delete" && e.key !== "Backspace") return;
+            if (!hasValue) return;
+            e.preventDefault();
+            clear();
+          }}
+          onBlur={onBlur}
+        >
+          <div className="opal-input-leading-icon">
+            <SvgImport className="opal-input-leading-icon-svg" />
+          </div>
+          <span
+            className="opal-input-upload-label"
+            data-placeholder={shownLabel === null ? true : undefined}
+          >
+            <Text
+              as="p"
+              font={
+                drag !== null
+                  ? "main-ui-action"
+                  : shownLabel === null
+                    ? "main-ui-muted"
+                    : "main-ui-body"
+              }
+              color="inherit"
+              maxLines={1}
+            >
+              {shownLabel ?? placeholder ?? strings.inputUploadPlaceholder}
+            </Text>
+          </span>
+        </button>
+        {hasValue && !isNonEditable && drag === null && (
+          <Button
+            icon={SvgX}
+            onClick={noProp(() => {
+              clear();
+              // The × goes with the value, so focus returns to the control.
+              triggerRef.current?.focus();
+            })}
+            type="button"
+            prominence="internal"
+            size="sm"
+            aria-label={strings.clearFile}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/web/lib/opal/src/components/inputs/input-upload/styles.css b/web/lib/opal/src/components/inputs/input-upload/styles.css
new file mode 100644
index 0000000000..0d20f518dc
--- /dev/null
+++ b/web/lib/opal/src/components/inputs/input-upload/styles.css
@@ -0,0 +1,53 @@
+@reference "#reference.css";
+
+/* The drop target: the control and its hidden file input. */
+.opal-input-upload {
+  @apply w-full;
+}
+
+/* The field itself picks a file: a bare button with no caret, a pointer, and
+   the row's text one line tall, as a typed input's is. */
+.opal-input-upload-trigger {
+  @apply flex flex-1 min-w-0 items-center h-6 cursor-pointer select-none outline-hidden bg-transparent border-0 p-0 text-start;
+}
+
+.opal-input[data-variant="disabled"] .opal-input-upload-trigger {
+  @apply cursor-not-allowed;
+}
+
+.opal-input[data-variant="readOnly"] .opal-input-upload-trigger {
+  @apply cursor-default;
+}
+
+/* The uploaded file's name, or the placeholder in its muted colour; the
+   font is the Text's own. */
+.opal-input-upload-label {
+  @apply flex min-w-0 py-0.5 text-text-04;
+}
+
+.opal-input-upload-label[data-placeholder] {
+  @apply text-text-02;
+}
+
+.opal-input[data-variant="disabled"] .opal-input-upload-label {
+  @apply text-text-02;
+}
+
+/* While files are dragged over the page, the control shows itself as a drop
+   target; over the control itself, its fill deepens. */
+.opal-input-upload[data-drag] .opal-input {
+  background-color: var(--action-selection-01);
+  border: 1px dashed var(--action-selection-05);
+}
+
+.opal-input-upload[data-drag="over"] .opal-input {
+  background-color: var(--action-selection-02);
+}
+
+.opal-input-upload[data-drag] .opal-input-upload-label {
+  color: var(--action-selection-05);
+}
+
+.opal-input-upload[data-drag] .opal-input-leading-icon-svg {
+  color: var(--action-selection-05);
+}
diff --git a/web/lib/opal/src/form/InputUploadField.test.tsx b/web/lib/opal/src/form/InputUploadField.test.tsx
new file mode 100644
index 0000000000..3a1b0c584a
--- /dev/null
+++ b/web/lib/opal/src/form/InputUploadField.test.tsx
@@ -0,0 +1,173 @@
+import React from "react";
+import { render, screen, waitFor } from "@tests/setup/test-utils";
+import "@testing-library/jest-dom";
+import userEvent from "@testing-library/user-event";
+import { Formik, type FormikProps } from "formik";
+import { InputUploadField } from "@opal/form/InputUploadField";
+
+interface KeyForm {
+  key: string;
+}
+
+interface CertificateForm {
+  certificate: File | null;
+}
+
+function picker(container: HTMLElement): HTMLInputElement {
+  const input = container.querySelector<HTMLInputElement>('input[type="file"]');
+  if (!input) throw new Error("no file input");
+  return input;
+}
+
+describe("InputUploadField", () => {
+  test("text mode: a paste into the focused control becomes the value", async () => {
+    const user = userEvent.setup({ delay: null });
+    let form: FormikProps<KeyForm> | null = null;
+    render(
+      <Formik<KeyForm> initialValues={{ key: "" }} onSubmit={() => {}}>
+        {(formik) => {
+          form = formik;
+          return <InputUploadField name="key" placeholder="Upload a key" />;
+        }}
+      </Formik>
+    );
+
+    await user.click(screen.getByRole("button", { name: "Upload a key" }));
+    await user.paste("eyJsaWNlbnNl");
+
+    await waitFor(() => expect(form?.values.key).toBe("eyJsaWNlbnNl"));
+    expect(screen.getByText("Pasted text")).toBeInTheDocument();
+  });
+
+  test("Delete clears an upload from the keyboard, and the × returns focus", async () => {
+    const user = userEvent.setup({ delay: null });
+    let form: FormikProps<KeyForm> | null = null;
+    const { container } = render(
+      <Formik<KeyForm> initialValues={{ key: "" }} onSubmit={() => {}}>
+        {(formik) => {
+          form = formik;
+          return <InputUploadField name="key" />;
+        }}
+      </Formik>
+    );
+    const trigger = container.querySelector<HTMLButtonElement>(
+      ".opal-input-upload-trigger"
+    );
+    if (!trigger) throw new Error("no trigger");
+
+    await user.upload(picker(container), new File(["one"], "one.txt"));
+    await waitFor(() => expect(form?.values.key).toBe("one"));
+    trigger.focus();
+    await user.keyboard("{Delete}");
+    await waitFor(() => expect(form?.values.key).toBe(""));
+
+    await user.upload(picker(container), new File(["two"], "two.txt"));
+    await waitFor(() => expect(form?.values.key).toBe("two"));
+    await user.click(screen.getByRole("button", { name: "Clear file" }));
+    await waitFor(() => expect(form?.values.key).toBe(""));
+    expect(trigger).toHaveFocus();
+  });
+
+  test("the × clears an upload", async () => {
+    const user = userEvent.setup({ delay: null });
+    let form: FormikProps<KeyForm> | null = null;
+    const { container } = render(
+      <Formik<KeyForm> initialValues={{ key: "" }} onSubmit={() => {}}>
+        {(formik) => {
+          form = formik;
+          return <InputUploadField name="key" />;
+        }}
+      </Formik>
+    );
+
+    await user.upload(picker(container), new File(["secret"], "key.txt"));
+    await waitFor(() => expect(form?.values.key).toBe("secret"));
+    await user.click(screen.getByRole("button", { name: "Clear file" }));
+
+    await waitFor(() => expect(form?.values.key).toBe(""));
+    expect(screen.queryByText("key.txt")).not.toBeInTheDocument();
+  });
+
+  test("text mode: an attached file's text becomes the value, and its name shows", async () => {
+    const user = userEvent.setup({ delay: null });
+    let form: FormikProps<KeyForm> | null = null;
+    const { container } = render(
+      <Formik<KeyForm> initialValues={{ key: "" }} onSubmit={() => {}}>
+        {(formik) => {
+          form = formik;
+          return <InputUploadField name="key" />;
+        }}
+      </Formik>
+    );
+
+    await user.upload(
+      picker(container),
+      new File(['{"a":1}'], "key.json", { type: "application/json" })
+    );
+
+    await waitFor(() => expect(form?.values.key).toBe('{"a":1}'));
+    expect(screen.getByText("key.json")).toBeInTheDocument();
+    expect(form?.touched.key).toBe(true);
+  });
+
+  test("text mode: a form reset clears the field", async () => {
+    const user = userEvent.setup({ delay: null });
+    let form: FormikProps<KeyForm> | null = null;
+    const { container } = render(
+      <Formik<KeyForm> initialValues={{ key: "" }} onSubmit={() => {}}>
+        {(formik) => {
+          form = formik;
+          return <InputUploadField name="key" />;
+        }}
+      </Formik>
+    );
+
+    await user.upload(picker(container), new File(["secret"], "key.txt"));
+    await waitFor(() => expect(form?.values.key).toBe("secret"));
+    form?.resetForm();
+
+    await waitFor(() =>
+      expect(screen.queryByText("key.txt")).not.toBeInTheDocument()
+    );
+  });
+
+  test("file mode: the field holds the File itself", async () => {
+    const user = userEvent.setup({ delay: null });
+    let form: FormikProps<CertificateForm> | null = null;
+    const certificate = new File([new Uint8Array([0, 255, 1])], "app.pfx");
+    const { container } = render(
+      <Formik<CertificateForm>
+        initialValues={{ certificate: null }}
+        onSubmit={() => {}}
+      >
+        {(formik) => {
+          form = formik;
+          return <InputUploadField name="certificate" mode="file" />;
+        }}
+      </Formik>
+    );
+
+    await user.upload(picker(container), certificate);
+
+    await waitFor(() => expect(form?.values.certificate).toBe(certificate));
+    expect(screen.getByText("app.pfx")).toBeInTheDocument();
+  });
+
+  test("a touched field with an error shows the error variant", () => {
+    const { container } = render(
+      <Formik<KeyForm>
+        initialValues={{ key: "" }}
+        initialTouched={{ key: true }}
+        initialErrors={{ key: "Required" }}
+        onSubmit={() => {}}
+      >
+        <InputUploadField name="key" />
+      </Formik>
+    );
+
+    expect(container.querySelector(".opal-input")).toHaveAttribute(
+      "data-variant",
+      "error"
+    );
+  });
+});
diff --git a/web/lib/opal/src/form/InputUploadField.tsx b/web/lib/opal/src/form/InputUploadField.tsx
new file mode 100644
index 0000000000..f2b3576517
--- /dev/null
+++ b/web/lib/opal/src/form/InputUploadField.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { useField } from "formik";
+import InputUpload, {
+  type InputUploadFileProps,
+  type InputUploadTextProps,
+} from "@opal/components/inputs/input-upload/components";
+import type { DistributiveOmit } from "@opal/types";
+
+/** Every `InputUpload` prop except the value and its setter, which Formik owns. */
+type InputUploadFieldProps = (
+  | DistributiveOmit<InputUploadTextProps, "value" | "setValue">
+  | DistributiveOmit<InputUploadFileProps, "value" | "onFileChange">
+) & {
+  /** The Formik field name. */
+  name: string;
+};
+
+/**
+ * Formik-bound `InputUpload`. Text mode holds a `string` field (the uploaded
+ * file's text, or pasted text); `mode="file"` holds a `File | null` field.
+ * An upload, a paste or a clear marks the field touched, as leaving it does;
+ * a touched field with an error shows the error variant unless `variant` is
+ * set.
+ */
+function InputUploadField({
+  name,
+  variant,
+  onBlur,
+  ...props
+}: InputUploadFieldProps) {
+  const [field, meta, helpers] = useField<unknown>(name);
+  const isError: boolean = !!meta.touched && meta.error !== undefined;
+  const shared = {
+    id: props.id ?? name,
+    name,
+    variant: variant ?? (isError ? "error" : "primary"),
+    onBlur: (event: React.FocusEvent<HTMLButtonElement>) => {
+      onBlur?.(event);
+      void helpers.setTouched(true);
+    },
+  } as const;
+
+  // setValue validates with the new value; setTouched must not validate again
+  // with the pre-change values.
+  if (props.mode === "file") {
+    return (
+      <InputUpload
+        {...props}
+        {...shared}
+        value={field.value instanceof File ? field.value : null}
+        onFileChange={(file: File | null) => {
+          void helpers.setValue(file);
+          void helpers.setTouched(true, false);
+        }}
+      />
+    );
+  }
+  return (
+    <InputUpload
+      {...props}
+      {...shared}
+      value={typeof field.value === "string" ? field.value : ""}
+      setValue={(value: string) => {
+        void helpers.setValue(value);
+        void helpers.setTouched(true, false);
+      }}
+    />
+  );
+}
+
+export { InputUploadField, type InputUploadFieldProps };
diff --git a/web/lib/opal/src/form/index.ts b/web/lib/opal/src/form/index.ts
index 373c961e3d..3e54711595 100644
--- a/web/lib/opal/src/form/index.ts
+++ b/web/lib/opal/src/form/index.ts
@@ -9,6 +9,10 @@ export {
   InputCheckboxField,
   type InputCheckboxFieldProps,
 } from "@opal/form/InputCheckboxField";
+export {
+  InputUploadField,
+  type InputUploadFieldProps,
+} from "@opal/form/InputUploadField";
 export {
   InputSingleSelectField,
   type InputSingleSelectFieldProps,
diff --git a/web/lib/opal/src/hooks/index.ts b/web/lib/opal/src/hooks/index.ts
index ae8e1e343a..2d0513de73 100644
--- a/web/lib/opal/src/hooks/index.ts
+++ b/web/lib/opal/src/hooks/index.ts
@@ -37,3 +37,4 @@ export {
   type UseImageDropzoneReturn,
 } from "@opal/hooks/useImageDropzone";
 export { default as usePresence } from "@opal/hooks/usePresence";
+export { default as useWindowFileDrag } from "@opal/hooks/useWindowFileDrag";
diff --git a/web/lib/opal/src/hooks/useWindowFileDrag.ts b/web/lib/opal/src/hooks/useWindowFileDrag.ts
new file mode 100644
index 0000000000..9b592e61ff
--- /dev/null
+++ b/web/lib/opal/src/hooks/useWindowFileDrag.ts
@@ -0,0 +1,55 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+/** Whether a drag carries files (not text or a link dragged in the page). */
+function carriesFiles(event: DragEvent): boolean {
+  return Array.from(event.dataTransfer?.types ?? []).includes("Files");
+}
+
+/**
+ * True while files are dragged anywhere over the window, so a drop target can
+ * show itself before the pointer reaches it. Ends on a drop, a cancelled drag
+ * or the pointer leaving the window.
+ *
+ *   const filesDragged = useWindowFileDrag(!disabled);
+ */
+export default function useWindowFileDrag(enabled: boolean = true): boolean {
+  const [dragging, setDragging] = useState(false);
+
+  useEffect(() => {
+    if (!enabled) {
+      setDragging(false);
+      return;
+    }
+    // dragenter and dragleave fire for every element crossed, so a count of
+    // the open enters says whether the drag is still inside the window.
+    let depth = 0;
+    const onEnter = (event: DragEvent) => {
+      if (!carriesFiles(event)) return;
+      depth += 1;
+      setDragging(true);
+    };
+    const onLeave = (event: DragEvent) => {
+      if (!carriesFiles(event)) return;
+      depth = Math.max(0, depth - 1);
+      if (depth === 0) setDragging(false);
+    };
+    const onEnd = () => {
+      depth = 0;
+      setDragging(false);
+    };
+    window.addEventListener("dragenter", onEnter);
+    window.addEventListener("dragleave", onLeave);
+    window.addEventListener("drop", onEnd);
+    window.addEventListener("dragend", onEnd);
+    return () => {
+      window.removeEventListener("dragenter", onEnter);
+      window.removeEventListener("dragleave", onLeave);
+      window.removeEventListener("drop", onEnd);
+      window.removeEventListener("dragend", onEnd);
+    };
+  }, [enabled]);
+
+  return dragging;
+}
diff --git a/web/lib/opal/src/icons/import-icon.tsx b/web/lib/opal/src/icons/import-icon.tsx
deleted file mode 100644
index a6671b4766..0000000000
--- a/web/lib/opal/src/icons/import-icon.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { IconProps } from "@opal/types";
-
-const SvgImport = ({ size, ...props }: IconProps) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 14 14"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    stroke="currentColor"
-    {...props}
-  >
-    <path
-      d="M6.75 9.41667L9.41667 6.75M9.41667 6.75L6.75 4.08333M9.41667 6.75L0.75 6.74667M2.75 3.75V2.08C2.75 1.34546 3.34546 0.75 4.08 0.75H11.4167C11.7703 0.75 12.1094 0.890476 12.3595 1.14052C12.6095 1.39057 12.75 1.72971 12.75 2.08333V11.4167C12.75 11.7703 12.6095 12.1094 12.3595 12.3595C12.1094 12.6095 11.7703 12.75 11.4167 12.75H4.08C3.34546 12.75 2.75 12.1545 2.75 11.42V9.75"
-      strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export default SvgImport;
diff --git a/web/lib/opal/src/icons/import.tsx b/web/lib/opal/src/icons/import.tsx
new file mode 100644
index 0000000000..2d9c678be6
--- /dev/null
+++ b/web/lib/opal/src/icons/import.tsx
@@ -0,0 +1,20 @@
+import type { IconProps } from "@opal/types";
+const SvgImport = ({ size, ...props }: IconProps) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    {...props}
+  >
+    <path
+      d="M7.5 5.33333L10.1667 8L7.5 10.6667M10.1667 8L1.5 7.99667M3.5 5V3.33C3.5 2.59546 4.09546 2 4.83 2H12.1667C12.8929 2 13.5 2.60711 13.5 3.33333V12.6667C13.5 13.3929 12.8929 14 12.1667 14H4.83C4.09546 14 3.5 13.4045 3.5 12.67V11"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+export default SvgImport;
diff --git a/web/lib/opal/src/icons/index.ts b/web/lib/opal/src/icons/index.ts
index ba3f48e5d2..7497ef0601 100644
--- a/web/lib/opal/src/icons/index.ts
+++ b/web/lib/opal/src/icons/index.ts
@@ -108,7 +108,7 @@ export { default as SvgShareWebhook } from "@opal/icons/share-webhook";
 export { default as SvgHourglass } from "@opal/icons/hourglass";
 export { default as SvgImage } from "@opal/icons/image";
 export { default as SvgImageSmall } from "@opal/icons/image-small";
-export { default as SvgImport } from "@opal/icons/import-icon";
+export { default as SvgImport } from "@opal/icons/import";
 export { default as SvgInfo } from "@opal/icons/info";
 export { default as SvgInfoSmall } from "@opal/icons/info-small";
 export { default as SvgKey } from "@opal/icons/key";
diff --git a/web/lib/opal/src/strings.tsx b/web/lib/opal/src/strings.tsx
index cbc15bc097..665d9c703a 100644
--- a/web/lib/opal/src/strings.tsx
+++ b/web/lib/opal/src/strings.tsx
@@ -15,8 +15,17 @@ export type OpalStrings = {
   copied: string;
   copyCode: string;
   clear: string;
-  attachFile: string;
   clearFile: string;
+  /** InputUpload's placeholder when its caller gives none. */
+  inputUploadPlaceholder: string;
+  /** InputUpload's label for a value that was pasted, not uploaded. */
+  inputUploadPasted: string;
+  /** InputUpload's label for a value set from outside, such as a saved one. */
+  inputUploadAttached: string;
+  /** InputUpload's copy while a file is dragged and it holds none. */
+  inputUploadDropToAdd: string;
+  /** InputUpload's copy while a file is dragged over it and it holds one. */
+  inputUploadDropToReplace: string;
   clearFilter: string;
   date: string;
   dateRange: string;
@@ -121,8 +130,12 @@ export const defaultOpalStrings: OpalStrings = {
   copied: "Copied!",
   copyCode: "Copy code",
   clear: "Clear",
-  attachFile: "Attach file",
   clearFile: "Clear file",
+  inputUploadPlaceholder: "Add a file…",
+  inputUploadPasted: "Pasted text",
+  inputUploadAttached: "File attached",
+  inputUploadDropToAdd: "Drop file here to add",
+  inputUploadDropToReplace: "Drop here to replace file",
   clearFilter: "Clear filter",
   date: "Date",
   dateRange: "Date range",
diff --git a/web/src/app/admin/billing/LicenseActivationCard.tsx b/web/src/app/admin/billing/LicenseActivationCard.tsx
index b9b154d888..752d6b7529 100644
--- a/web/src/app/admin/billing/LicenseActivationCard.tsx
+++ b/web/src/app/admin/billing/LicenseActivationCard.tsx
@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useLocale, useTranslations } from "next-intl";
 import { Button, Card } from "@opal/components";
 import Text from "@/refresh-components/texts/Text";
-import { InputFile } from "@opal/components";
+import { InputUpload } from "@opal/components";
 import { Section } from "@/layouts/general-layouts";
 import { InputVertical } from "@opal/layouts";
 import { SvgXCircle, SvgCheckCircle, SvgXOctagon } from "@opal/icons";
@@ -201,13 +201,13 @@ export default function LicenseActivationCard({
               }
               withLabel
             >
-              <InputFile
+              <InputUpload
                 placeholder="eyJwYXlsb2FkIjogeyJ2ZXJzaW9..."
                 setValue={(value) => {
                   setLicenseKey(value);
                   setError(null);
                 }}
-                error={!!error}
+                variant={error ? "error" : "primary"}
               />
               {error && (
                 <Section
diff --git a/web/src/components/Field.tsx b/web/src/components/Field.tsx
index 56bab4ac31..dc0178db03 100644
--- a/web/src/components/Field.tsx
+++ b/web/src/components/Field.tsx
@@ -9,7 +9,6 @@ import {
   useField,
   useFormikContext,
 } from "formik";
-import { FileUpload } from "@/components/admin/connectors/FileUpload";
 import * as Yup from "yup";
 import { FormBodyBuilder } from "./admin/connectors/types";
 import { InputSingleSelect, type TooltipSide } from "@opal/components";
@@ -17,7 +16,7 @@ import { FiInfo, FiX } from "react-icons/fi";
 import { useTranslations } from "next-intl";
 import ReactMarkdown from "react-markdown";
 import { FaMarkdown } from "react-icons/fa";
-import { useState, useEffect, memo, JSX } from "react";
+import { useState, memo, JSX } from "react";
 import remarkGfm from "remark-gfm";
 import {
   Button,
@@ -31,11 +30,7 @@ import {
 import { Section } from "@/layouts/general-layouts";
 import { transformLinkUri } from "@/lib/utils";
 import { cn } from "@opal/utils";
-import FileDropzoneField from "@/refresh-components/form/FileDropzoneField";
 import { RichTextSubtext } from "./RichTextSubtext";
-import { TypedFile, FILE_TYPE_DEFINITIONS } from "@/lib/connectors/fileTypes";
-import { createTypedFile } from "@/lib/connectors/utils";
-import { getCredentialFileType } from "@/lib/credentials/utils";
 import Text from "@/refresh-components/texts/Text";
 
 import { SvgEye, SvgEyeClosed, SvgPlusCircle } from "@opal/icons";
@@ -393,164 +388,6 @@ export function TextFormField({
   );
 }
 
-export function FileUploadFormField({
-  name,
-  label,
-  subtext,
-}: {
-  name: string;
-  label: string;
-  subtext?: string | JSX.Element;
-}) {
-  // We create a *temporary* field inside of `Formik` to throw the `File` object into.
-  // The actual *contents* of the file will be thrown into the field called `name`.
-  const fileName = `temporary.filename-${name}`;
-  const [fileField] = useField<File>(fileName);
-  const [, , contentsHelper] = useField<string>(name);
-
-  useEffect(() => {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      contentsHelper.setValue(e.target?.result as string);
-    };
-    if (fileField.value instanceof File) {
-      reader.readAsText(fileField.value);
-    }
-  }, [contentsHelper, fileField.value]);
-
-  return (
-    <div className="w-full">
-      <FieldLabel name={name} label={label} subtext={subtext} />
-      <FileDropzoneField name={fileName} multiple={false} />
-    </div>
-  );
-}
-
-export function TypedFileUploadFormField({
-  name,
-  label,
-  subtext,
-}: {
-  name: string;
-  label: string;
-  subtext?: string | JSX.Element;
-}) {
-  const t = useTranslations("common.field");
-  const [field, , helpers] = useField<TypedFile | null>(name);
-  const [customError, setCustomError] = useState<string>("");
-  const [isValidating, setIsValidating] = useState(false);
-  const [description, setDescription] = useState<string>("");
-
-  useEffect(() => {
-    const typeDefinitionKey = getCredentialFileType(name);
-    if (typeDefinitionKey) {
-      setDescription(
-        FILE_TYPE_DEFINITIONS[typeDefinitionKey].description || ""
-      );
-    }
-  }, [name]);
-
-  useEffect(() => {
-    const validateFile = async () => {
-      if (!field.value) {
-        setIsValidating(false);
-        return;
-      }
-
-      setIsValidating(true);
-
-      try {
-        const validation = await field.value.validate();
-        if (validation?.isValid) {
-          setCustomError("");
-        } else {
-          setCustomError(
-            validation?.errors.join(", ") || t("fileValidation.unknownError")
-          );
-          helpers.setValue(null);
-        }
-      } catch (error) {
-        setCustomError(
-          error instanceof Error
-            ? error.message
-            : t("fileValidation.validationError")
-        );
-        helpers.setValue(null);
-      } finally {
-        setIsValidating(false);
-      }
-    };
-
-    validateFile();
-  }, [field.value, helpers, t]);
-
-  const handleFileSelection = async (files: File[]) => {
-    if (files.length === 0) {
-      helpers.setValue(null);
-      setCustomError("");
-      return;
-    }
-
-    const file = files[0];
-    if (!file) {
-      setCustomError(t("fileValidation.selectionError"));
-      return;
-    }
-
-    const typeDefinitionKey = getCredentialFileType(name);
-
-    if (!typeDefinitionKey) {
-      setCustomError(t("fileValidation.noTypeDefinition", { name }));
-      return;
-    }
-
-    try {
-      const typedFile = createTypedFile(file, name, typeDefinitionKey);
-      helpers.setValue(typedFile);
-      setCustomError("");
-    } catch (error) {
-      setCustomError(
-        error instanceof Error
-          ? error.message
-          : t("fileValidation.unknownError")
-      );
-      helpers.setValue(null);
-    } finally {
-      setIsValidating(false);
-    }
-  };
-
-  return (
-    <div className="w-full">
-      <FieldLabel name={name} label={label} subtext={subtext} />
-      {description && (
-        <div className="text-sm text-text-03 mb-2">{description}</div>
-      )}
-      <FileUpload
-        selectedFiles={field.value ? [field.value.file] : []}
-        setSelectedFiles={handleFileSelection}
-        multiple={false}
-      />
-      {/* Validation feedback */}
-      {isValidating && (
-        <div className="text-status-info-05 text-sm mt-1">
-          {t("fileValidation.validating")}
-        </div>
-      )}
-
-      {customError ? (
-        <div className="text-action-danger-05 text-sm mt-1">{customError}</div>
-      ) : (
-        <ErrorMessage
-          name={name}
-          component="div"
-          className="text-action-danger-05 text-sm mt-1"
-        />
-      )}
-    </div>
-  );
-}
-
 export function MultiSelectField({
   name,
   label,
diff --git a/web/src/components/admin/connectors/FileUpload.tsx b/web/src/components/admin/connectors/FileUpload.tsx
deleted file mode 100644
index 80b2a855d5..0000000000
--- a/web/src/components/admin/connectors/FileUpload.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { useFormikContext } from "formik";
-import { FC, useState } from "react";
-import React from "react";
-import Dropzone from "react-dropzone";
-import { useTranslations } from "next-intl";
-
-interface FileUploadProps {
-  selectedFiles: File[];
-  setSelectedFiles: (files: File[]) => void;
-  message?: string;
-  name?: string;
-  multiple?: boolean;
-  accept?: string;
-}
-
-export const FileUpload: FC<FileUploadProps> = ({
-  name,
-  selectedFiles,
-  setSelectedFiles,
-  message,
-  multiple = true,
-  accept,
-}) => {
-  const t = useTranslations("admin.connector.fileUpload");
-  const [dragActive, setDragActive] = useState(false);
-  const { setFieldValue } = useFormikContext();
-
-  return (
-    <div>
-      <Dropzone
-        onDrop={(acceptedFiles) => {
-          let filesToSet: File[] = [];
-          if (multiple) {
-            filesToSet = acceptedFiles;
-          } else {
-            const acceptedFile = acceptedFiles[0];
-            if (acceptedFile !== undefined) {
-              filesToSet = [acceptedFile];
-            }
-          }
-
-          if (filesToSet !== undefined) {
-            setSelectedFiles(filesToSet);
-          }
-
-          setDragActive(false);
-          if (name) {
-            setFieldValue(name, multiple ? filesToSet : filesToSet[0]);
-          }
-        }}
-        onDragLeave={() => setDragActive(false)}
-        onDragEnter={() => setDragActive(true)}
-        multiple={multiple}
-        accept={accept ? { [accept]: [] } : undefined}
-      >
-        {({ getRootProps, getInputProps }) => (
-          <section>
-            <div
-              {...getRootProps()}
-              className={
-                "flex flex-col items-center w-full px-4 py-12 rounded-sm " +
-                "shadow-lg tracking-wide border border-border cursor-pointer" +
-                (dragActive ? " border-accent" : "")
-              }
-            >
-              <input {...getInputProps()} />
-              <b className="text-text-darker">
-                {message ||
-                  t("dropzone.message", {
-                    multiple: multiple ? "true" : "false",
-                  })}
-              </b>
-            </div>
-          </section>
-        )}
-      </Dropzone>
-
-      {selectedFiles.length > 0 && (
-        <div className="mt-4">
-          <h2 className="text-sm font-bold">
-            {t("selectedFiles.heading", {
-              multiple: multiple ? "true" : "false",
-            })}
-          </h2>
-          <ul>
-            {selectedFiles.map((file) => (
-              <div key={file.name} className="flex">
-                <p className="text-sm me-2">{file.name}</p>
-              </div>
-            ))}
-          </ul>
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/web/src/i18n/OpalStringsBridge.tsx b/web/src/i18n/OpalStringsBridge.tsx
index 75d3b9edf5..8d9328318f 100644
--- a/web/src/i18n/OpalStringsBridge.tsx
+++ b/web/src/i18n/OpalStringsBridge.tsx
@@ -27,8 +27,12 @@ export default function OpalStringsBridge({
       copied: t("common.copied"),
       copyCode: t("common.copyCode"),
       clear: t("common.clear"),
-      attachFile: t("inputFile.attachFile"),
       clearFile: t("inputFile.clearFile"),
+      inputUploadPlaceholder: t("inputUpload.placeholder"),
+      inputUploadPasted: t("inputUpload.pasted"),
+      inputUploadAttached: t("inputUpload.attached"),
+      inputUploadDropToAdd: t("inputUpload.dropToAdd"),
+      inputUploadDropToReplace: t("inputUpload.dropToReplace"),
       clearFilter: t("common.clearFilter"),
       date: t("common.date"),
       dateRange: t("dateRange.label"),
diff --git a/web/src/i18n/messages/ar.json b/web/src/i18n/messages/ar.json
index 7bfedfa04e..dc483d4bf9 100644
--- a/web/src/i18n/messages/ar.json
+++ b/web/src/i18n/messages/ar.json
@@ -3519,7 +3519,7 @@
         "jiraUserEmail": "مطلوب لـ Jira Cloud.",
         "lumappsServiceUser": "المستخدم الذي تتم الفهرسة نيابةً عنه.",
         "outlineBaseUrl": "مثل https://app.getoutline.com، أو عنوان URL الخاص بخادمك المستضاف ذاتيًا.",
-        "pfxFile": "ملف PFX.",
+        "pfxFile": "ارفع ملف `.pfx` الذي يحتوي على المفتاح الخاص لتسجيل التطبيق. يجب أن يكون أصغر من 10 كيلوبايت.",
         "testrailBaseUrl": "مثل https://yourcompany.testrail.io."
       },
       "methods": {
@@ -14161,9 +14161,15 @@
       "year": "السنة"
     },
     "inputFile": {
-      "attachFile": "إرفاق ملف",
       "clearFile": "مسح الملف"
     },
+    "inputUpload": {
+      "placeholder": "أضف ملفًا…",
+      "pasted": "نص ملصق",
+      "attached": "تم إرفاق ملف",
+      "dropToAdd": "أفلت الملف هنا لإضافته",
+      "dropToReplace": "أفلت هنا لاستبدال الملف"
+    },
     "inputImage": {
       "alt": "صورة",
       "dropRejected": "تم رفض الملف",
diff --git a/web/src/i18n/messages/de.json b/web/src/i18n/messages/de.json
index 6bcf0189bc..de2a3e6d0c 100644
--- a/web/src/i18n/messages/de.json
+++ b/web/src/i18n/messages/de.json
@@ -3519,7 +3519,7 @@
         "jiraUserEmail": "Erforderlich für Jira Cloud.",
         "lumappsServiceUser": "Der Benutzer, in dessen Namen indiziert wird.",
         "outlineBaseUrl": "Zum Beispiel https://app.getoutline.com oder deine selbst gehostete URL.",
-        "pfxFile": "Eine PFX-Datei.",
+        "pfxFile": "Lade die `.pfx`-Datei mit dem privaten Schlüssel der App-Registrierung hoch. Muss kleiner als 10 KB sein.",
         "testrailBaseUrl": "Zum Beispiel https://yourcompany.testrail.io."
       },
       "methods": {
@@ -14161,9 +14161,15 @@
       "year": "Jahr"
     },
     "inputFile": {
-      "attachFile": "Datei anhängen",
       "clearFile": "Datei entfernen"
     },
+    "inputUpload": {
+      "placeholder": "Datei hinzufügen…",
+      "pasted": "Eingefügter Text",
+      "attached": "Datei angehängt",
+      "dropToAdd": "Datei hier ablegen, um sie hinzuzufügen",
+      "dropToReplace": "Hier ablegen, um die Datei zu ersetzen"
+    },
     "inputImage": {
       "alt": "Bild",
       "dropRejected": "Datei abgelehnt",
diff --git a/web/src/i18n/messages/en.json b/web/src/i18n/messages/en.json
index be77b0f0f9..601efcd237 100644
--- a/web/src/i18n/messages/en.json
+++ b/web/src/i18n/messages/en.json
@@ -3519,7 +3519,7 @@
         "jiraUserEmail": "Required for Jira Cloud.",
         "lumappsServiceUser": "The user to index on behalf of.",
         "outlineBaseUrl": "For example https://app.getoutline.com, or your self-hosted URL.",
-        "pfxFile": "A PFX file.",
+        "pfxFile": "Upload the `.pfx` file containing the private key of the app registration. Must be under 10 KB.",
         "testrailBaseUrl": "For example https://yourcompany.testrail.io."
       },
       "methods": {
@@ -14161,9 +14161,15 @@
       "year": "Year"
     },
     "inputFile": {
-      "attachFile": "Attach file",
       "clearFile": "Clear file"
     },
+    "inputUpload": {
+      "placeholder": "Add a file…",
+      "pasted": "Pasted text",
+      "attached": "File attached",
+      "dropToAdd": "Drop file here to add",
+      "dropToReplace": "Drop here to replace file"
+    },
     "inputImage": {
       "alt": "Image",
       "dropRejected": "File rejected",
diff --git a/web/src/i18n/messages/es.json b/web/src/i18n/messages/es.json
index 059a24f33c..4eddfc32b7 100644
--- a/web/src/i18n/messages/es.json
+++ b/web/src/i18n/messages/es.json
@@ -3519,7 +3519,7 @@
         "jiraUserEmail": "Obligatorio para Jira Cloud.",
         "lumappsServiceUser": "El usuario en cuyo nombre se indexa.",
         "outlineBaseUrl": "Por ejemplo, https://app.getoutline.com, o tu URL autoalojada.",
-        "pfxFile": "Un archivo PFX.",
+        "pfxFile": "Sube el archivo `.pfx` que contiene la clave privada del registro de la aplicación. Debe ocupar menos de 10 KB.",
         "testrailBaseUrl": "Por ejemplo, https://yourcompany.testrail.io."
       },
       "methods": {
@@ -14161,9 +14161,15 @@
       "year": "Año"
     },
     "inputFile": {
-      "attachFile": "Adjuntar archivo",
       "clearFile": "Quitar archivo"
     },
+    "inputUpload": {
+      "placeholder": "Añadir un archivo…",
+      "pasted": "Texto pegado",
+      "attached": "Archivo adjunto",
+      "dropToAdd": "Suelta el archivo aquí para añadirlo",
+      "dropToReplace": "Suelta aquí para reemplazar el archivo"
+    },
     "inputImage": {
       "alt": "Imagen",
       "dropRejected": "Archivo rechazado",
diff --git a/web/src/i18n/messages/fr.json b/web/src/i18n/messages/fr.json
index 79b4db77cb..a738709c9b 100644
--- a/web/src/i18n/messages/fr.json
+++ b/web/src/i18n/messages/fr.json
@@ -3519,7 +3519,7 @@
         "jiraUserEmail": "Obligatoire pour Jira Cloud.",
         "lumappsServiceUser": "L'utilisateur au nom duquel indexer.",
         "outlineBaseUrl": "Par exemple https://app.getoutline.com, ou l'URL de votre instance auto-hébergée.",
-        "pfxFile": "Un fichier PFX.",
+        "pfxFile": "Importez le fichier `.pfx` contenant la clé privée de l’inscription d’application. Doit faire moins de 10 Ko.",
         "testrailBaseUrl": "Par exemple https://yourcompany.testrail.io."
       },
       "methods": {
@@ -14161,9 +14161,15 @@
       "year": "Année"
     },
     "inputFile": {
-      "attachFile": "Joindre un fichier",
       "clearFile": "Effacer le fichier"
     },
+    "inputUpload": {
+      "placeholder": "Ajouter un fichier…",
+      "pasted": "Texte collé",
+      "attached": "Fichier joint",
+      "dropToAdd": "Déposez le fichier ici pour l’ajouter",
+      "dropToReplace": "Déposez ici pour remplacer le fichier"
+    },
     "inputImage": {
       "alt": "Image",
       "dropRejected": "Fichier refusé",
diff --git a/web/src/i18n/messages/ja.json b/web/src/i18n/messages/ja.json
index b54061971b..4fdd6a9a85 100644
--- a/web/src/i18n/messages/ja.json
+++ b/web/src/i18n/messages/ja.json
@@ -3519,7 +3519,7 @@
         "jiraUserEmail": "Jira Cloud では必須です。",
         "lumappsServiceUser": "代理でインデックスを作成するユーザーです。",
         "outlineBaseUrl": "例: https://app.getoutline.com、またはセルフホストの URL。",
-        "pfxFile": "PFX ファイルです。",
+        "pfxFile": "アプリ登録の秘密キーを含む `.pfx` ファイルをアップロードしてください。10 KB 未満である必要があります。",
         "testrailBaseUrl": "例: https://yourcompany.testrail.io。"
       },
       "methods": {
@@ -14161,9 +14161,15 @@
       "year": "年"
     },
     "inputFile": {
-      "attachFile": "ファイルを添付",
       "clearFile": "ファイルをクリア"
     },
+    "inputUpload": {
+      "placeholder": "ファイルを追加…",
+      "pasted": "貼り付けたテキスト",
+      "attached": "ファイル添付済み",
+      "dropToAdd": "ここにファイルをドロップして追加",
+      "dropToReplace": "ここにドロップしてファイルを置き換え"
+    },
     "inputImage": {
       "alt": "画像",
       "dropRejected": "ファイルが拒否されました",
diff --git a/web/src/i18n/messages/ko.json b/web/src/i18n/messages/ko.json
index 038639b7be..9baa7515ff 100644
--- a/web/src/i18n/messages/ko.json
+++ b/web/src/i18n/messages/ko.json
@@ -3519,7 +3519,7 @@
         "jiraUserEmail": "Jira Cloud에 필요합니다.",
         "lumappsServiceUser": "대신 인덱싱할 사용자입니다.",
         "outlineBaseUrl": "예: https://app.getoutline.com 또는 자체 호스팅 URL.",
-        "pfxFile": "PFX 파일입니다.",
+        "pfxFile": "앱 등록의 개인 키가 포함된 `.pfx` 파일을 업로드하세요. 10KB 미만이어야 합니다.",
         "testrailBaseUrl": "예: https://yourcompany.testrail.io."
       },
       "methods": {
@@ -14161,9 +14161,15 @@
       "year": "년"
     },
     "inputFile": {
-      "attachFile": "파일 첨부",
       "clearFile": "파일 지우기"
     },
+    "inputUpload": {
+      "placeholder": "파일 추가…",
+      "pasted": "붙여넣은 텍스트",
+      "attached": "파일 첨부됨",
+      "dropToAdd": "여기에 파일을 놓아 추가",
+      "dropToReplace": "여기에 놓아 파일 바꾸기"
+    },
     "inputImage": {
       "alt": "이미지",
       "dropRejected": "파일이 거부되었습니다",
diff --git a/web/src/i18n/messages/pt.json b/web/src/i18n/messages/pt.json
index 505bd56111..aebbd851f9 100644
--- a/web/src/i18n/messages/pt.json
+++ b/web/src/i18n/messages/pt.json
@@ -3519,7 +3519,7 @@
         "jiraUserEmail": "Obrigatório para o Jira Cloud.",
         "lumappsServiceUser": "O usuário em nome do qual indexar.",
         "outlineBaseUrl": "Por exemplo, https://app.getoutline.com ou a URL da sua instância própria.",
-        "pfxFile": "Um arquivo PFX.",
+        "pfxFile": "Envie o arquivo `.pfx` com a chave privada do registro do aplicativo. Deve ter menos de 10 KB.",
         "testrailBaseUrl": "Por exemplo, https://yourcompany.testrail.io."
       },
       "methods": {
@@ -14161,9 +14161,15 @@
       "year": "Ano"
     },
     "inputFile": {
-      "attachFile": "Anexar arquivo",
       "clearFile": "Limpar arquivo"
     },
+    "inputUpload": {
+      "placeholder": "Adicionar um arquivo…",
+      "pasted": "Texto colado",
+      "attached": "Arquivo anexado",
+      "dropToAdd": "Solte o arquivo aqui para adicionar",
+      "dropToReplace": "Solte aqui para substituir o arquivo"
+    },
     "inputImage": {
       "alt": "Imagem",
       "dropRejected": "Arquivo rejeitado",
diff --git a/web/src/i18n/messages/zh.json b/web/src/i18n/messages/zh.json
index 6f6548f808..aa50ca62af 100644
--- a/web/src/i18n/messages/zh.json
+++ b/web/src/i18n/messages/zh.json
@@ -3519,7 +3519,7 @@
         "jiraUserEmail": "Jira Cloud 必填。",
         "lumappsServiceUser": "要代表其建立索引的用户。",
         "outlineBaseUrl": "例如 https://app.getoutline.com，或你的自托管 URL。",
-        "pfxFile": "PFX 文件。",
+        "pfxFile": "上传包含应用注册私钥的 `.pfx` 文件。必须小于 10 KB。",
         "testrailBaseUrl": "例如 https://yourcompany.testrail.io。"
       },
       "methods": {
@@ -14161,9 +14161,15 @@
       "year": "年"
     },
     "inputFile": {
-      "attachFile": "附加文件",
       "clearFile": "清除文件"
     },
+    "inputUpload": {
+      "placeholder": "添加文件…",
+      "pasted": "已粘贴的文本",
+      "attached": "已附加文件",
+      "dropToAdd": "将文件拖放到此处以添加",
+      "dropToReplace": "拖放到此处以替换文件"
+    },
     "inputImage": {
       "alt": "图片",
       "dropRejected": "文件被拒绝",
diff --git a/web/src/lib/connectors/fileTypes.ts b/web/src/lib/connectors/fileTypes.ts
index 61caf35a66..bef77d2e89 100644
--- a/web/src/lib/connectors/fileTypes.ts
+++ b/web/src/lib/connectors/fileTypes.ts
@@ -11,8 +11,6 @@ export const FILE_TYPE_DEFINITIONS: Record<
       maxSizeKB: 10,
       allowedExtensions: [".pfx"],
     },
-    description:
-      "Please upload the .pfx file containing the private key of the app registration. The file size must be under 10KB.",
   },
   [FileTypeCategory.ONEDRIVE_PFX_FILE]: {
     category: FileTypeCategory.ONEDRIVE_PFX_FILE,
@@ -20,8 +18,6 @@ export const FILE_TYPE_DEFINITIONS: Record<
       maxSizeKB: 10,
       allowedExtensions: [".pfx"],
     },
-    description:
-      "Please upload a .pfx file containing the private key for OneDrive. The file size must be under 10KB.",
   },
 };
 
diff --git a/web/src/lib/connectors/types/fileTypes.ts b/web/src/lib/connectors/types/fileTypes.ts
index 5d5fee1dc8..e70158b6f1 100644
--- a/web/src/lib/connectors/types/fileTypes.ts
+++ b/web/src/lib/connectors/types/fileTypes.ts
@@ -12,5 +12,4 @@ export interface FileValidationRule {
 export interface FileTypeDefinition {
   category: FileTypeCategory;
   validation?: FileValidationRule;
-  description?: string;
 }
diff --git a/web/src/lib/credentials/components/AccountNameField.tsx b/web/src/lib/credentials/components/AccountNameField.tsx
new file mode 100644
index 0000000000..e6d92dd453
--- /dev/null
+++ b/web/src/lib/credentials/components/AccountNameField.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { InputTypeIn } from "@opal/components";
+import { InputVertical } from "@opal/layouts";
+import { FormikField } from "@/refresh-components/form/FormikField";
+
+interface AccountNameFieldProps {
+  /** The Formik path of the name, e.g. `name` or `new_account.name`. */
+  name: string;
+}
+
+/** A new account's optional display name. Left blank, it shows as "Untitled". */
+export function AccountNameField({ name }: AccountNameFieldProps) {
+  const t = useTranslations("admin.credentials.create");
+  return (
+    <InputVertical
+      withLabel={name}
+      title={t("nameField.title")}
+      suffix="optional"
+    >
+      <FormikField<string>
+        name={name}
+        render={(formikField) => (
+          <InputTypeIn
+            {...formikField}
+            id={name}
+            value={formikField.value ?? ""}
+            placeholder={t("nameField.placeholder")}
+          />
+        )}
+      />
+    </InputVertical>
+  );
+}
diff --git a/web/src/lib/credentials/components/CreateCredential.test.tsx b/web/src/lib/credentials/components/CreateCredential.test.tsx
new file mode 100644
index 0000000000..bd01a50f1f
--- /dev/null
+++ b/web/src/lib/credentials/components/CreateCredential.test.tsx
@@ -0,0 +1,59 @@
+import { render, screen, setupUser, waitFor } from "@tests/setup/test-utils";
+import CreateCredential from "@/lib/credentials/components/CreateCredential";
+import { ValidSources } from "@/lib/connectors/types/source";
+
+jest.mock("@/lib/credentials/svc", () => ({
+  submitCredential: jest.fn(),
+}));
+
+const { submitCredential } = jest.requireMock("@/lib/credentials/svc");
+
+function renderNotion() {
+  render(
+    <CreateCredential
+      sourceType={ValidSources.Notion}
+      accessType="public"
+      refresh={jest.fn()}
+      onSwitch={jest.fn().mockResolvedValue(undefined)}
+    />
+  );
+}
+
+describe("CreateCredential", () => {
+  beforeEach(() => {
+    submitCredential.mockResolvedValue({
+      message: "ok",
+      isSuccess: true,
+      credential: { id: 1 },
+    });
+  });
+
+  it("sends the account's display name", async () => {
+    const user = setupUser();
+    renderNotion();
+
+    await user.type(screen.getByTestId("notion_integration_token"), "secret");
+    await user.type(screen.getByLabelText(/Name/), "  Team workspace ");
+    await user.click(screen.getByRole("button", { name: /Create/ }));
+
+    await waitFor(() =>
+      expect(submitCredential).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: "Team workspace",
+          credential_json: { notion_integration_token: "secret" },
+        })
+      )
+    );
+  });
+
+  it("leaves a blank name out", async () => {
+    const user = setupUser();
+    renderNotion();
+
+    await user.type(screen.getByTestId("notion_integration_token"), "secret");
+    await user.click(screen.getByRole("button", { name: /Create/ }));
+
+    await waitFor(() => expect(submitCredential).toHaveBeenCalled());
+    expect(submitCredential.mock.calls[0][0]).not.toHaveProperty("name");
+  });
+});
diff --git a/web/src/lib/credentials/components/CreateCredential.tsx b/web/src/lib/credentials/components/CreateCredential.tsx
index 0e8934f6f7..c3c8dfafad 100644
--- a/web/src/lib/credentials/components/CreateCredential.tsx
+++ b/web/src/lib/credentials/components/CreateCredential.tsx
@@ -27,6 +27,7 @@ import {
 } from "@/lib/credentials/components/ShareAccountField";
 import { useCredentialFieldCopy } from "@/lib/credentials/hooks";
 import { CredentialFieldsRenderer } from "@/lib/credentials/components/CredentialFieldsRenderer";
+import { AccountNameField } from "@/lib/credentials/components/AccountNameField";
 import { TypedFile } from "@/lib/connectors/fileTypes";
 import { SvgPlusCircle } from "@opal/icons";
 
@@ -51,6 +52,8 @@ function CreateButton({ onClick, isSubmitting, isValid }: CreateButtonProps) {
 }
 
 type CreateCredentialFormValues = ShareAccountFormValues & {
+  /** The account's display name; blank leaves it "Untitled". */
+  name: string;
   [key: string]: unknown;
 };
 
@@ -110,7 +113,8 @@ export default function CreateCredential({
     setSubmitting(true);
     formikHelpers.setSubmitting(true);
 
-    const { share, groups, ...credentialValues } = values;
+    const { share, groups, name, ...credentialValues } = values;
+    const displayName: string = name.trim();
 
     let privateKey: TypedFile | null = null;
     const filteredCredentialValues = Object.fromEntries(
@@ -127,7 +131,7 @@ export default function CreateCredential({
       const response = await submitCredential({
         credential_json: filteredCredentialValues,
         ...shareAccountPayload({ share, groups }),
-        // No name: the credential list shows its "Untitled" fallback.
+        ...(displayName && { name: displayName }),
         source: sourceType,
         private_key: privateKey || undefined,
       });
@@ -199,6 +203,7 @@ export default function CreateCredential({
     <Formik<CreateCredentialFormValues>
       initialValues={{
         ...initialCredentialValues(spec),
+        name: "",
         share: DEFAULT_SHARE_AUDIENCE,
         groups: [],
         ...(initialAuthMethod && {
@@ -231,15 +236,18 @@ export default function CreateCredential({
                 setAuthMethod={setAuthMethod}
               />
 
-              {/* Above: the fields the source needs. Below: optional sharing
-              and the Create button. */}
+              {/* Above: the fields the source needs. Below: the optional name
+              and sharing, then the Create button. */}
               <Divider paddingParallel={0} paddingPerpendicular={0} />
 
               <Disabled disabled={!formikProps.isValid}>
-                <ShareAccountField
-                  disabled={!formikProps.isValid}
-                  groupsLocked={!businessTier}
-                />
+                <Section alignItems="stretch" gap={4}>
+                  <AccountNameField name="name" />
+                  <ShareAccountField
+                    disabled={!formikProps.isValid}
+                    groupsLocked={!businessTier}
+                  />
+                </Section>
               </Disabled>
 
               <Section flexDirection="row" justifyContent="end">
diff --git a/web/src/lib/credentials/components/CredentialFieldsRenderer.tsx b/web/src/lib/credentials/components/CredentialFieldsRenderer.tsx
index c5ae41cbf8..2e7a5332d5 100644
--- a/web/src/lib/credentials/components/CredentialFieldsRenderer.tsx
+++ b/web/src/lib/credentials/components/CredentialFieldsRenderer.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import {
+  InputUpload,
   InputPasswordTypeIn,
   InputSwitch,
   InputTypeIn,
@@ -10,19 +11,29 @@ import {
 } from "@opal/components";
 import {
   Content,
+  InputErrorText,
   InputHorizontal,
   InputVertical,
   Label,
   Section,
 } from "@opal/layouts";
 import { InputCheckboxField } from "@opal/form";
-import type { IconFunctionComponent } from "@opal/types";
-import { getIn, useFormikContext } from "formik";
+import type { IconFunctionComponent, RichStr } from "@opal/types";
+import { markdown } from "@opal/utils";
+import { getIn, useField, useFormikContext } from "formik";
 import { useTranslations } from "next-intl";
-import { TypedFileUploadFormField } from "@/components/Field";
+import {
+  FILE_TYPE_DEFINITIONS,
+  type TypedFile,
+} from "@/lib/connectors/fileTypes";
+import { createTypedFile } from "@/lib/connectors/utils";
 import { FormikField } from "@/refresh-components/form/FormikField";
 import { useCredentialFieldCopy } from "@/lib/credentials/hooks";
-import { getCredentialSpec, methodFields } from "@/lib/credentials/utils";
+import {
+  getCredentialFileType,
+  getCredentialSpec,
+  methodFields,
+} from "@/lib/credentials/utils";
 import type {
   CredentialFieldValues,
   CredentialSpec,
@@ -70,10 +81,15 @@ function CredentialField({
   const name: string = namePrefix ? `${namePrefix}.${fieldKey}` : fieldKey;
   const checkboxIcon = useCheckboxIcon(name, label);
 
-  // A file such as a .pfx key is binary; Opal's InputFile reads text, so
-  // this field keeps the typed upload until Opal can hand back a File.
   if (field.kind === "file") {
-    return <TypedFileUploadFormField name={name} label={label} />;
+    return (
+      <CredentialFileField
+        name={name}
+        fieldKey={fieldKey}
+        label={label}
+        description={copy.description}
+      />
+    );
   }
 
   // The checkbox stands in for the icon, left of the title. The label around
@@ -159,6 +175,79 @@ function CredentialField({
   );
 }
 
+interface CredentialFileFieldProps {
+  /** The Formik path. */
+  name: string;
+  /** The spec key: it picks the file's type and names it to the server. */
+  fieldKey: string;
+  label: string | RichStr;
+  /**
+   * The field's hint. A plain string is read as markdown, so `.pfx` in
+   * backticks shows as code.
+   */
+  description?: string | RichStr;
+}
+
+/**
+ * A key file, such as a .pfx certificate. It stays binary: the field holds a
+ * `TypedFile`, checked against its type's size and extensions when picked.
+ */
+export function CredentialFileField({
+  name,
+  fieldKey,
+  label,
+  description,
+}: CredentialFileFieldProps) {
+  const t = useTranslations("common.field");
+  const [field, , helpers] = useField<TypedFile | null>(name);
+  const [fileError, setFileError] = useState<string | null>(null);
+  const fileType = getCredentialFileType(fieldKey);
+  const definition = fileType ? FILE_TYPE_DEFINITIONS[fileType] : null;
+
+  async function takeFile(file: File | null) {
+    setFileError(null);
+    if (!file) {
+      void helpers.setValue(null);
+      return;
+    }
+    if (!fileType) {
+      setFileError(t("fileValidation.noTypeDefinition", { name: fieldKey }));
+      return;
+    }
+    const typedFile = createTypedFile(file, fieldKey, fileType);
+    const { isValid, errors } = await typedFile.validate();
+    if (!isValid) {
+      setFileError(errors.join(", ") || t("fileValidation.unknownError"));
+      void helpers.setValue(null);
+      return;
+    }
+    void helpers.setValue(typedFile);
+    void helpers.setTouched(true, false);
+  }
+
+  return (
+    <InputVertical
+      withLabel={name}
+      title={label}
+      subDescription={
+        typeof description === "string" ? markdown(description) : description
+      }
+    >
+      <InputUpload
+        mode="file"
+        id={name}
+        name={name}
+        data-testid={fieldKey}
+        accept={definition?.validation?.allowedExtensions?.join(",")}
+        value={field.value?.file ?? null}
+        onFileChange={(file) => void takeFile(file)}
+        variant={fileError ? "error" : "primary"}
+      />
+      {fileError && <InputErrorText type="error">{fileError}</InputErrorText>}
+    </InputVertical>
+  );
+}
+
 interface CredentialFieldsRendererProps {
   source: ValidSources;
   spec: CredentialSpec;
diff --git a/web/src/lib/credentials/components/EditCredential.tsx b/web/src/lib/credentials/components/EditCredential.tsx
index c17fa56797..b2f907a5fb 100644
--- a/web/src/lib/credentials/components/EditCredential.tsx
+++ b/web/src/lib/credentials/components/EditCredential.tsx
@@ -2,7 +2,8 @@
 
 import { Button, Text } from "@opal/components";
 import { useTranslations } from "next-intl";
-import { TextFormField, TypedFileUploadFormField } from "@/components/Field";
+import { TextFormField } from "@/components/Field";
+import { CredentialFileField } from "@/lib/credentials/components/CredentialFieldsRenderer";
 import { Form, Formik, FormikHelpers } from "formik";
 import { toast } from "@opal/layouts";
 import { useCredentialFieldCopy } from "@/lib/credentials/hooks";
@@ -101,10 +102,12 @@ export default function EditCredential({
 
             {Object.entries(editableCredentialFields).map(([key, value]) =>
               getCredentialFileType(key) !== null ? (
-                <TypedFileUploadFormField
+                <CredentialFileField
                   key={key}
                   name={key}
+                  fieldKey={key}
                   label={fieldCopy(key).title}
+                  description={fieldCopy(key).description}
                 />
               ) : (
                 <TextFormField
diff --git a/web/src/lib/credentials/constants.ts b/web/src/lib/credentials/constants.ts
index c6b934dce0..91eaf2ceef 100644
--- a/web/src/lib/credentials/constants.ts
+++ b/web/src/lib/credentials/constants.ts
@@ -3,7 +3,6 @@ import { FileTypeCategory } from "@/lib/connectors/types/fileTypes";
 import type {
   CredentialDisplayName,
   CredentialFieldOptions,
-  CredentialHint,
   CredentialJsonOf,
   CredentialMethodDescription,
   CredentialMethodLabel,
@@ -108,7 +107,6 @@ interface MicrosoftAppSpecOptions {
   brandName: string;
   fileType: FileTypeCategory;
   privateKeyDisplayName: CredentialDisplayName;
-  privateKeyHint?: CredentialHint;
   certificateLabel: CredentialMethodLabel;
   descriptions?: {
     clientSecret: CredentialMethodDescription;
@@ -142,7 +140,8 @@ function microsoftAppSpec<const TPrefix extends string>(
     [key("private_key")]: file(
       options.privateKeyDisplayName,
       options.fileType,
-      options.privateKeyHint ? { hint: options.privateKeyHint } : {}
+      // Every Microsoft source takes the same .pfx certificate.
+      { hint: { key: "pfxFile" } }
     ),
   } as MicrosoftAppFields<TPrefix>;
 
@@ -370,7 +369,6 @@ export const CREDENTIAL_SPECS = {
     brandName: "Microsoft Teams",
     fileType: FileTypeCategory.SHAREPOINT_PFX_FILE,
     privateKeyDisplayName: "privateKey",
-    privateKeyHint: { key: "pfxFile" },
     certificateLabel: "certificateAuthentication",
     descriptions: {
       clientSecret: "teamsClientSecret",
@@ -381,7 +379,6 @@ export const CREDENTIAL_SPECS = {
     brandName: "Microsoft Outlook",
     fileType: FileTypeCategory.SHAREPOINT_PFX_FILE,
     privateKeyDisplayName: "privateKey",
-    privateKeyHint: { key: "pfxFile" },
     certificateLabel: "certificateAuthentication",
     descriptions: {
       clientSecret: "outlookClientSecret",
diff --git a/web/src/refresh-components/form/FileDropzoneField.tsx b/web/src/refresh-components/form/FileDropzoneField.tsx
index 7625f341c0..522116fa78 100644
--- a/web/src/refresh-components/form/FileDropzoneField.tsx
+++ b/web/src/refresh-components/form/FileDropzoneField.tsx
@@ -22,7 +22,7 @@ export interface FileDropzoneFieldProps {
 /**
  * Formik-bound drop area with a file picker button. The field holds a
  * `File[]`, or one `File` (or null) when it takes a single file. Files stay
- * binary, unlike Opal's InputFile, which reads them as text.
+ * binary. For one file in a form row, use Opal's InputUpload.
  */
 export default function FileDropzoneField({
   name,
diff --git a/web/src/sections/modals/languageModels/VertexAIModal.tsx b/web/src/sections/modals/languageModels/VertexAIModal.tsx
index c9e3f735d7..402787aa4c 100644
--- a/web/src/sections/modals/languageModels/VertexAIModal.tsx
+++ b/web/src/sections/modals/languageModels/VertexAIModal.tsx
@@ -4,9 +4,8 @@ import { useTranslations } from "next-intl";
 import { useEffect } from "react";
 import { useSWRConfig } from "swr";
 import { useFormikContext } from "formik";
-import { FileUploadFormField } from "@/components/Field";
 import InputTypeInField from "@/refresh-components/form/InputTypeInField";
-import { InputSingleSelectField } from "@opal/form";
+import { InputUploadField, InputSingleSelectField } from "@opal/form";
 import { Card, MessageCard } from "@opal/components";
 import { Section } from "@/layouts/general-layouts";
 import { InputDivider, InputPadder, InputVertical, toast } from "@opal/layouts";
@@ -134,7 +133,10 @@ function VertexAIModalInternals({
             title={t("vertexAi.credentialsField.title")}
             subDescription={t("vertexAi.credentialsField.description")}
           >
-            <FileUploadFormField name={FIELD_VERTEX_CREDENTIALS} label="" />
+            <InputUploadField
+              name={FIELD_VERTEX_CREDENTIALS}
+              accept="application/json,.json"
+            />
           </InputVertical>
         </InputPadder>
       )}
diff --git a/web/src/views/admin/ImageGenerationPage/forms/VertexImageGenForm.tsx b/web/src/views/admin/ImageGenerationPage/forms/VertexImageGenForm.tsx
index 85365c17d4..7121abb39e 100644
--- a/web/src/views/admin/ImageGenerationPage/forms/VertexImageGenForm.tsx
+++ b/web/src/views/admin/ImageGenerationPage/forms/VertexImageGenForm.tsx
@@ -6,7 +6,7 @@ import * as Yup from "yup";
 import { FormikField } from "@/refresh-components/form/FormikField";
 import { FormField } from "@/refresh-components/form/FormField";
 import { InputTypeIn } from "@opal/components";
-import { InputFile } from "@opal/components";
+import { InputUploadField } from "@opal/form";
 import { InputSingleSelect } from "@opal/components";
 import InlineExternalLink from "@/refresh-components/InlineExternalLink";
 import { ImageGenFormWrapper } from "@/views/admin/ImageGenerationPage/forms/ImageGenFormWrapper";
@@ -167,7 +167,7 @@ function VertexFormFields(
       {!isWorkloadIdentity && (
         <FormikField<string>
           name="custom_config.vertex_credentials"
-          render={(field, helper, meta, state) => (
+          render={(_field, _helper, meta, state) => (
             <FormField
               name="custom_config.vertex_credentials"
               state={apiStatus === "error" ? "error" : state}
@@ -175,12 +175,17 @@ function VertexFormFields(
             >
               <FormField.Label>{t("form.credentials.label")}</FormField.Label>
               <FormField.Control>
-                <InputFile
-                  setValue={(value) => helper.setValue(value)}
-                  error={apiStatus === "error"}
-                  onBlur={field.onBlur}
-                  disabled={disabled}
-                  accept="application/json"
+                <InputUploadField
+                  name="custom_config.vertex_credentials"
+                  // Unset, the field shows its own Formik error.
+                  variant={
+                    disabled
+                      ? "disabled"
+                      : apiStatus === "error"
+                        ? "error"
+                        : undefined
+                  }
+                  accept="application/json,.json"
                   placeholder={t("form.credentials.placeholder")}
                 />
               </FormField.Control>
diff --git a/web/src/views/admin/IndexSettingsPage/shared.tsx b/web/src/views/admin/IndexSettingsPage/shared.tsx
index 69642a27a6..af86eaa87c 100644
--- a/web/src/views/admin/IndexSettingsPage/shared.tsx
+++ b/web/src/views/admin/IndexSettingsPage/shared.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { useField } from "formik";
 import { useTranslations } from "next-intl";
 import { useSettings } from "@/lib/settings/hooks";
 import * as Yup from "yup";
 import { markdown } from "@opal/utils";
-import { Divider, InputFile } from "@opal/components";
+import { Divider } from "@opal/components";
+import { InputUploadField } from "@opal/form";
 import type { RichStr } from "@opal/types";
 import { InputHorizontal, InputVertical } from "@opal/layouts";
 import type {
@@ -74,27 +74,12 @@ export function ApiUrlField({
 
 export function GoogleCredentialsField() {
   const t = useTranslations("admin.indexSettings");
-  const [, meta, helpers] = useField<string>("apiKey");
   return (
     <InputVertical
       title={t("fields.googleCredentials.title")}
       withLabel="apiKey"
     >
-      <InputFile
-        id="apiKey"
-        name="apiKey"
-        error={meta.touched && !!meta.error}
-        setValue={(value) => {
-          void helpers.setValue(value);
-        }}
-        onValueSet={() => {
-          void helpers.setTouched(true);
-        }}
-        onBlur={() => {
-          void helpers.setTouched(true);
-        }}
-        accept=".json"
-      />
+      <InputUploadField name="apiKey" accept=".json" />
     </InputVertical>
   );
 }
diff --git a/web/src/views/admin/connectors/AddConnectorPage/form/gdrive/Credential.tsx b/web/src/views/admin/connectors/AddConnectorPage/form/gdrive/Credential.tsx
index d9b95b757a..e3ddc856a1 100644
--- a/web/src/views/admin/connectors/AddConnectorPage/form/gdrive/Credential.tsx
+++ b/web/src/views/admin/connectors/AddConnectorPage/form/gdrive/Credential.tsx
@@ -9,7 +9,7 @@ import { Form, Formik } from "formik";
 import { User } from "@/lib/types";
 import { Button, Text } from "@opal/components";
 import { Section, toast } from "@opal/layouts";
-import { InputFile } from "@opal/components";
+import { InputUpload } from "@opal/components";
 import InputTypeInField from "@/refresh-components/form/InputTypeInField";
 import { refreshAllGoogleData } from "@/lib/googleConnector";
 import { parseOauthAppCredentialJson } from "@/lib/credentials/utils";
@@ -80,8 +80,8 @@ export const DriveAuthSection = ({
             })
           )}
         </Text>
-        <InputFile
-          accept="application/json"
+        <InputUpload
+          accept="application/json,.json"
           placeholder={t("gdrive.oauthUpload.placeholder")}
           setValue={(value) => {
             setOauthAppCredential(
@@ -125,8 +125,8 @@ export const DriveAuthSection = ({
         <Text as="p" font="main-ui-action">
           {t("gdrive.serviceAccountOption.title")}
         </Text>
-        <InputFile
-          accept="application/json"
+        <InputUpload
+          accept="application/json,.json"
           placeholder={t("gdrive.serviceAccountUpload.placeholder")}
           setValue={(value) => {
             if (!value) {
diff --git a/web/src/views/admin/connectors/AddConnectorPage/form/gmail/Credential.tsx b/web/src/views/admin/connectors/AddConnectorPage/form/gmail/Credential.tsx
index 3662211375..84bf6f2b74 100644
--- a/web/src/views/admin/connectors/AddConnectorPage/form/gmail/Credential.tsx
+++ b/web/src/views/admin/connectors/AddConnectorPage/form/gmail/Credential.tsx
@@ -1,6 +1,6 @@
 import { Button, Text } from "@opal/components";
 import { Section, toast } from "@opal/layouts";
-import { InputFile } from "@opal/components";
+import { InputUpload } from "@opal/components";
 import InputTypeInField from "@/refresh-components/form/InputTypeInField";
 import React, { useState, useEffect } from "react";
 import { useTranslations } from "next-intl";
@@ -86,8 +86,8 @@ export const GmailAuthSection = ({
             })
           )}
         </Text>
-        <InputFile
-          accept="application/json"
+        <InputUpload
+          accept="application/json,.json"
           placeholder={t("gmail.oauthUpload.placeholder")}
           setValue={(value) => {
             setOauthAppCredential(
@@ -136,8 +136,8 @@ export const GmailAuthSection = ({
         <Text as="p" font="main-ui-action">
           {t("gmail.serviceAccountOption.title")}
         </Text>
-        <InputFile
-          accept="application/json"
+        <InputUpload
+          accept="application/json,.json"
           placeholder={t("gmail.serviceAccountUpload.placeholder")}
           setValue={(value) => {
             if (!value) {
diff --git a/web/src/views/admin/connectors/AddConnectorPage/sections/AuthenticationAccountSection.tsx b/web/src/views/admin/connectors/AddConnectorPage/sections/AuthenticationAccountSection.tsx
index ca65216d12..fc775858ae 100644
--- a/web/src/views/admin/connectors/AddConnectorPage/sections/AuthenticationAccountSection.tsx
+++ b/web/src/views/admin/connectors/AddConnectorPage/sections/AuthenticationAccountSection.tsx
@@ -2,24 +2,10 @@
 
 import { useEffect, useRef, useState } from "react";
 import { useTranslations } from "next-intl";
-import {
-  Button,
-  Divider,
-  Fold,
-  InputTypeIn,
-  SelectCard,
-  Tabs,
-} from "@opal/components";
-import {
-  Content,
-  ContentAction,
-  InputVertical,
-  Section,
-  toast,
-} from "@opal/layouts";
+import { Button, Divider, Fold, SelectCard, Tabs } from "@opal/components";
+import { Content, ContentAction, Section, toast } from "@opal/layouts";
 import { Disabled } from "@opal/core";
 import { cn } from "@opal/utils";
-import { FormikField } from "@/refresh-components/form/FormikField";
 import { SvgExpand, SvgFold, SvgListTree, SvgPlusCircle } from "@opal/icons";
 import type {
   Credential,
@@ -34,6 +20,7 @@ import { useSettings } from "@/lib/settings/hooks";
 import CreateCredential from "@/lib/credentials/components/CreateCredential";
 import { CredentialFieldsRenderer } from "@/lib/credentials/components/CredentialFieldsRenderer";
 import { ShareAccountField } from "@/lib/credentials/components/ShareAccountField";
+import { AccountNameField } from "@/lib/credentials/components/AccountNameField";
 import { updateCredentialSharing } from "@/lib/credentials/svc";
 import { getIn, useFormikContext } from "formik";
 import { useTierAtLeast } from "@/lib/tiers/hooks";
@@ -102,7 +89,6 @@ export default function AuthenticationAccountSection({
   editCCPairId = null,
 }: AuthenticationAccountSectionProps) {
   const t = useTranslations("admin.connectorsList");
-  const tCreate = useTranslations("admin.credentials.create");
   const newAccountNameField = `${NEW_ACCOUNT_FIELD}.${NEW_ACCOUNT_NAME_FIELD}`;
   const settings = useSettings();
   const {
@@ -278,23 +264,7 @@ export default function AuthenticationAccountSection({
           {/* Opens once the account's own fields are valid. */}
           <Disabled disabled={!newAccountReady}>
             <Section alignItems="stretch" gap={4}>
-              <InputVertical
-                withLabel={newAccountNameField}
-                title={tCreate("nameField.title")}
-                suffix="optional"
-              >
-                <FormikField<string>
-                  name={newAccountNameField}
-                  render={(formikField) => (
-                    <InputTypeIn
-                      {...formikField}
-                      id={newAccountNameField}
-                      value={formikField.value ?? ""}
-                      placeholder={tCreate("nameField.placeholder")}
-                    />
-                  )}
-                />
-              </InputVertical>
+              <AccountNameField name={newAccountNameField} />
               <ShareAccountField
                 namePrefix={NEW_ACCOUNT_FIELD}
                 disabled={!newAccountReady}