diff --git a/web/src/app.css b/web/src/app.css
index 9285b79..c4176c9 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -70,6 +70,9 @@
     * {
         border-color: var(--color-edge);
     }
+    textarea {
+        vertical-align: bottom;
+    }
 }
 
 @utility btn-ghost-hover {
diff --git a/web/src/lib/components/files/DirectorySelect.svelte b/web/src/lib/components/files/DirectorySelect.svelte
index 8d94bb0..da1e117 100644
--- a/web/src/lib/components/files/DirectorySelect.svelte
+++ b/web/src/lib/components/files/DirectorySelect.svelte
@@ -16,7 +16,7 @@
         {#if directory}
             {directory.fileName}
         {:else}
-            {placeholder}
+            <span class="font-light">{placeholder}</span>
         {/if}
         <span class="iconify size-4 shrink-0 text-em-disabled octicon--triangle-down-16"></span>
     {/snippet}
diff --git a/web/src/lib/components/files/FileInput.svelte b/web/src/lib/components/files/FileInput.svelte
deleted file mode 100644
index a2a2a24..0000000
--- a/web/src/lib/components/files/FileInput.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-    import { useId } from "bits-ui";
-    import { type RestProps } from "$lib/types";
-    import { type Snippet } from "svelte";
-    import { watch } from "runed";
-
-    type Props = {
-        children?: Snippet<[{ files?: FileList }]>;
-        multiple?: boolean;
-        files?: FileList;
-        file?: File;
-        onChange?: (file?: File) => void;
-        onChangeMultiple?: (files?: FileList) => void;
-    } & RestProps;
-
-    let {
-        children,
-        multiple = false,
-        files = $bindable<FileList | undefined>(undefined),
-        file = $bindable<File | undefined>(undefined),
-        onChange,
-        onChangeMultiple,
-        ...restProps
-    }: Props = $props();
-
-    // Update file when files change and multiple is false
-    watch(
-        () => files,
-        (newFiles) => {
-            if (multiple) {
-                return;
-            }
-
-            if (newFiles && newFiles.length > 0) {
-                file = newFiles[0];
-            } else {
-                file = undefined;
-            }
-        },
-    );
-
-    // Clear file when multiple is true
-    watch(
-        () => multiple,
-        (isMultiple) => {
-            if (isMultiple) {
-                file = undefined;
-            }
-        },
-    );
-
-    // Invoke change callbacks
-    watch([() => files, () => file], ([newFiles, newFile]) => {
-        if (multiple) {
-            onChangeMultiple?.(newFiles);
-        } else {
-            onChange?.(newFile);
-        }
-    });
-
-    const labelId = useId();
-    const inputId = useId();
-</script>
-
-<label id={labelId} for={inputId} {...restProps}>
-    {@render children?.({ files })}
-    <input id={inputId} aria-labelledby={labelId} type="file" bind:files class="sr-only" {multiple} />
-</label>
diff --git a/web/src/lib/components/files/MultimodalFileInput.svelte b/web/src/lib/components/files/MultimodalFileInput.svelte
new file mode 100644
index 0000000..fed02b5
--- /dev/null
+++ b/web/src/lib/components/files/MultimodalFileInput.svelte
@@ -0,0 +1,152 @@
+<script lang="ts">
+    import { type MultimodalFileInputProps, MultimodalFileInputState } from "$lib/components/files/index.svelte";
+    import { box } from "svelte-toolbelt";
+    import { RadioGroup } from "bits-ui";
+    import SingleFileInput from "$lib/components/files/SingleFileInput.svelte";
+
+    let { state = $bindable(), label = "File", required = false }: MultimodalFileInputProps = $props();
+
+    const instance = new MultimodalFileInputState({
+        state,
+        label: box.with(() => label),
+        required: box.with(() => required),
+    });
+    state = instance;
+
+    function handleDragOver(event: DragEvent) {
+        instance.dragActive = true;
+        event.preventDefault();
+    }
+
+    function handleDragLeave(event: DragEvent) {
+        if (event.currentTarget === event.target) {
+            instance.dragActive = false;
+        }
+        event.preventDefault();
+    }
+
+    async function handleDrop(event: DragEvent) {
+        instance.dragActive = false;
+        event.preventDefault();
+        if (!event.dataTransfer) {
+            return;
+        }
+
+        const types = event.dataTransfer.types;
+        const files = event.dataTransfer.files;
+
+        // Handle file drops
+        if (files.length > 1) {
+            alert("Only one file can be dropped at a time.");
+            return;
+        } else if (files.length === 1) {
+            instance.file = files[0];
+            instance.mode = "file";
+            return;
+        }
+
+        // Handle URL drops
+        if (types.includes("text/uri-list")) {
+            const urls = event.dataTransfer
+                .getData("text/uri-list")
+                .split("\n")
+                .filter((url) => url && !url.startsWith("#"));
+            if (urls.length > 1) {
+                alert("Only one URL can be dropped at a time.");
+                return;
+            } else if (urls.length === 1) {
+                instance.url = urls[0];
+                instance.mode = "url";
+                return;
+            }
+        }
+
+        // Handle plain text drops
+        if (types.includes("text/plain")) {
+            const text = event.dataTransfer.getData("text/plain");
+            if (text) {
+                instance.text = text;
+                instance.mode = "text";
+                return;
+            }
+        }
+    }
+</script>
+
+{#snippet radioItem(name: string)}
+    <RadioGroup.Item value={name.toLowerCase()}>
+        {#snippet children({ checked })}
+            <span class="rounded-sm px-1 py-0.5 text-sm" class:btn-ghost={!checked} class:border={!checked} class:btn-primary={checked}>
+                {name}
+            </span>
+        {/snippet}
+    </RadioGroup.Item>
+{/snippet}
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+    class="file-drop-target w-full"
+    data-drag-active={instance.dragActive}
+    ondragover={handleDragOver}
+    ondrop={handleDrop}
+    ondragleavecapture={handleDragLeave}
+>
+    <RadioGroup.Root class="mb-1 flex w-full gap-1" bind:value={instance.mode}>
+        {@render radioItem("File")}
+        {@render radioItem("URL")}
+        {@render radioItem("Text")}
+    </RadioGroup.Root>
+    {#if instance.mode === "file"}
+        {@render fileInput()}
+    {:else if instance.mode === "url"}
+        {@render urlInput()}
+    {:else if instance.mode === "text"}
+        {@render textInput()}
+    {/if}
+</div>
+
+<!-- TODO: Implement required prop for SingleFileInput -->
+{#snippet fileInput()}
+    <SingleFileInput bind:file={instance.file} class="flex w-fit items-center gap-2 rounded-md border btn-ghost px-2 py-1 has-focus-visible:outline-2">
+        <span class="iconify size-4 shrink-0 text-em-disabled octicon--file-16"></span>
+        {#if instance.file}
+            {instance.file.name}
+        {:else}
+            <span class="font-light">{label}</span>
+        {/if}
+        <span class="iconify size-4 shrink-0 text-em-disabled octicon--triangle-down-16"></span>
+    </SingleFileInput>
+{/snippet}
+
+{#snippet urlInput()}
+    <input title="{label} URL" bind:value={instance.url} placeholder="Enter file URL" type="url" {required} class="w-full rounded-md border px-2 py-1" />
+{/snippet}
+
+{#snippet textInput()}
+    <textarea title="{label} Text" bind:value={instance.text} placeholder="Enter text here" {required} class="w-full rounded-md border px-2 py-1"></textarea>
+{/snippet}
+
+<style>
+    .file-drop-target {
+        position: relative;
+    }
+    .file-drop-target[data-drag-active="true"]::before {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        content: "Drop here";
+        font-size: var(--text-3xl);
+        color: var(--color-black);
+
+        background-color: rgba(255, 255, 255, 0.7);
+
+        border: dashed var(--color-primary);
+        border-radius: inherit;
+    }
+</style>
diff --git a/web/src/lib/components/files/SingleFileInput.svelte b/web/src/lib/components/files/SingleFileInput.svelte
new file mode 100644
index 0000000..a495b57
--- /dev/null
+++ b/web/src/lib/components/files/SingleFileInput.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { useId } from "bits-ui";
+    import { type RestProps } from "$lib/types";
+    import { type Snippet } from "svelte";
+    import { watch } from "runed";
+
+    type Props = {
+        children?: Snippet<[{ file?: File }]>;
+        file?: File;
+    } & RestProps;
+
+    let { children, file = $bindable<File | undefined>(undefined), ...restProps }: Props = $props();
+
+    let files = $state<FileList | undefined>();
+
+    watch(
+        () => files,
+        (newFiles) => {
+            if (newFiles && newFiles.length > 0) {
+                file = newFiles[0];
+            }
+        },
+    );
+
+    const labelId = useId();
+    const inputId = useId();
+</script>
+
+<label id={labelId} for={inputId} {...restProps}>
+    {@render children?.({ file })}
+    <input id={inputId} aria-labelledby={labelId} type="file" bind:files class="sr-only" />
+</label>
diff --git a/web/src/lib/components/files/SingleFileSelect.svelte b/web/src/lib/components/files/SingleFileSelect.svelte
deleted file mode 100644
index baa4fff..0000000
--- a/web/src/lib/components/files/SingleFileSelect.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-    import FileInput from "$lib/components/files/FileInput.svelte";
-
-    interface Props {
-        placeholder: string;
-        file?: File;
-    }
-
-    let { placeholder = "Select File", file = $bindable<File | undefined>(undefined) }: Props = $props();
-</script>
-
-<FileInput bind:file class="flex w-fit items-center gap-2 rounded-md border btn-ghost px-2 py-1 has-focus-visible:outline-2">
-    <span class="iconify size-4 shrink-0 text-em-disabled octicon--file-16"></span>
-    {#if file}
-        {file.name}
-    {:else}
-        {placeholder}
-    {/if}
-    <span class="iconify size-4 shrink-0 text-em-disabled octicon--triangle-down-16"></span>
-</FileInput>
diff --git a/web/src/lib/components/files/index.svelte.ts b/web/src/lib/components/files/index.svelte.ts
index 0c5c43b..0aceded 100644
--- a/web/src/lib/components/files/index.svelte.ts
+++ b/web/src/lib/components/files/index.svelte.ts
@@ -1,3 +1,6 @@
+import { type ReadableBoxedValues } from "svelte-toolbelt";
+import { lazyPromise } from "$lib/util";
+
 export interface FileSystemEntry {
     fileName: string;
 }
@@ -128,3 +131,117 @@ function filesToDirectory(files: FileList): DirectoryEntry {
 
     return ret;
 }
+
+export type FileInputMode = "file" | "url" | "text";
+
+export type MultimodalFileInputValueMetadata = {
+    type: FileInputMode;
+    name: string;
+};
+
+export type MultimodalFileInputProps = {
+    state?: MultimodalFileInputState | undefined;
+
+    label?: string | undefined;
+    required?: boolean | undefined;
+};
+
+export type MultimodalFileInputStateProps = {
+    state: MultimodalFileInputState | undefined;
+} & ReadableBoxedValues<{
+    label: string;
+    required: boolean;
+}>;
+
+export class MultimodalFileInputState {
+    private readonly opts: MultimodalFileInputStateProps;
+    mode: FileInputMode = $state("file");
+    text: string = $state("");
+    file: File | undefined = $state(undefined);
+    url: string = $state("");
+    private urlResolver = $derived.by(() => {
+        const url = this.url;
+        return lazyPromise(async () => {
+            let threw = false;
+            try {
+                const response = await fetch(url);
+                if (!response.ok) {
+                    threw = true;
+                    throw new Error(`Failed to fetch from URL: ${url}\nStatus: ${response.status}\nBody:\n${await response.text()}`);
+                }
+                return await response.blob();
+            } catch (e) {
+                if (threw) {
+                    throw e;
+                }
+                throw new Error(`Failed to fetch from URL: ${url}\nSome errors, such as those caused by CORS, will only print in the console.\nCause: ${e}`);
+            }
+        });
+    });
+    dragActive = $state(false);
+
+    constructor(opts: MultimodalFileInputStateProps) {
+        this.opts = opts;
+        if (this.opts.state) {
+            this.mode = this.opts.state.mode;
+            this.text = this.opts.state.text;
+            this.file = this.opts.state.file;
+            this.url = this.opts.state.url;
+            this.urlResolver = this.opts.state.urlResolver;
+        }
+    }
+
+    get metadata(): MultimodalFileInputValueMetadata | null {
+        const mode = this.mode;
+        const label = this.opts.label.current;
+        if (mode === "file" && this.file !== undefined) {
+            const file = this.file;
+            return { type: "file", name: file.name };
+        } else if (mode === "url" && this.url !== "") {
+            return { type: "url", name: this.url };
+        } else if (mode === "text" && this.text !== "") {
+            return { type: "text", name: `${label} (Text Input)` };
+        } else {
+            return null;
+        }
+    }
+
+    async resolve(): Promise<Blob> {
+        const mode = this.mode;
+        if (mode === "file" && this.file !== undefined) {
+            return this.file;
+        } else if (mode === "url" && this.url !== "") {
+            return this.urlResolver.getValue();
+        } else if (mode === "text" && this.text !== "") {
+            return new Blob([this.text], { type: "text/plain" });
+        } else {
+            throw Error("No value present");
+        }
+    }
+
+    reset() {
+        this.text = "";
+        this.file = undefined;
+        this.url = "";
+    }
+
+    swapState(other: MultimodalFileInputState) {
+        const mode = this.mode;
+        const text = this.text;
+        const file = this.file;
+        const url = this.url;
+        const urlResolver = this.urlResolver;
+
+        this.mode = other.mode;
+        this.text = other.text;
+        this.file = other.file;
+        this.url = other.url;
+        this.urlResolver = other.urlResolver;
+
+        other.mode = mode;
+        other.text = text;
+        other.file = file;
+        other.url = url;
+        other.urlResolver = urlResolver;
+    }
+}
diff --git a/web/src/lib/components/settings-popover/SettingsPopover.svelte b/web/src/lib/components/settings-popover/SettingsPopover.svelte
index 7e82799..b7d7af0 100644
--- a/web/src/lib/components/settings-popover/SettingsPopover.svelte
+++ b/web/src/lib/components/settings-popover/SettingsPopover.svelte
@@ -35,10 +35,9 @@
         <span class="iconify size-4 shrink-0 octicon--gear-16" aria-hidden="true"></span>
     </Popover.Trigger>
     <Popover.Portal>
-        <Popover.Content aria-label="Options" class="z-50 mx-2 flex flex-col gap-1 rounded-sm border bg-neutral py-1 text-sm shadow" sideOffset={4}>
-            {#if children}
-                {@render children()}
-            {/if}
+        <Popover.Content aria-label="Options" class="z-50 mx-2 flex flex-col gap-1 rounded-sm border bg-neutral py-1 text-sm shadow">
+            {@render children?.()}
+            <Popover.Arrow class="text-edge" />
         </Popover.Content>
     </Popover.Portal>
 </Popover.Root>
diff --git a/web/src/lib/util.ts b/web/src/lib/util.ts
index b13285d..59635b1 100644
--- a/web/src/lib/util.ts
+++ b/web/src/lib/util.ts
@@ -24,7 +24,7 @@ export function trimCommitHash(hash: string): string {
     return hash;
 }
 
-export async function isBinaryFile(file: File): Promise<boolean> {
+export async function isBinaryFile(file: Blob): Promise<boolean> {
     const sampleSize = Math.min(file.size, 1024);
     const buffer = await file.slice(0, sampleSize).arrayBuffer();
     const decoder = new TextDecoder("utf-8", { fatal: true });
@@ -37,8 +37,8 @@ export async function isBinaryFile(file: File): Promise<boolean> {
 }
 
 export async function bytesEqual(
-    a: File,
-    b: File,
+    a: Blob,
+    b: Blob,
     chunkingThreshold: number = 4 * 1024 * 1024, // 4MB
     chunkSize: number = chunkingThreshold,
 ): Promise<boolean> {
diff --git a/web/src/routes/ActionsPopover.svelte b/web/src/routes/ActionsPopover.svelte
index a0c1575..34c8e54 100644
--- a/web/src/routes/ActionsPopover.svelte
+++ b/web/src/routes/ActionsPopover.svelte
@@ -12,7 +12,7 @@
         <span aria-hidden="true" class="iconify size-4 bg-primary octicon--kebab-horizontal-16"></span>
     </Popover.Trigger>
     <Popover.Portal>
-        <Popover.Content class="flex flex-col overflow-hidden rounded-sm border bg-neutral text-sm shadow-sm select-none" sideOffset={4}>
+        <Popover.Content class="flex flex-col overflow-hidden rounded-sm border bg-neutral text-sm shadow-sm select-none">
             <Button.Root
                 class="btn-ghost px-2 py-1 text-left"
                 onclick={() => {
@@ -31,6 +31,7 @@
             >
                 Collapse All
             </Button.Root>
+            <Popover.Arrow class="text-edge" />
         </Popover.Content>
     </Popover.Portal>
 </Popover.Root>
diff --git a/web/src/routes/FileHeader.svelte b/web/src/routes/FileHeader.svelte
index ba0364a..382844b 100644
--- a/web/src/routes/FileHeader.svelte
+++ b/web/src/routes/FileHeader.svelte
@@ -71,7 +71,7 @@
             <span class="iconify size-4 bg-primary octicon--kebab-horizontal-16" aria-hidden="true"></span>
         </Popover.Trigger>
         <Popover.Portal>
-            <Popover.Content class="flex flex-col overflow-hidden rounded-sm border bg-neutral text-sm shadow-sm select-none" sideOffset={4}>
+            <Popover.Content class="flex flex-col overflow-hidden rounded-sm border bg-neutral text-sm shadow-sm select-none">
                 <Button.Root onclick={showInFileTree} class="btn-ghost px-2 py-1">Show in file tree</Button.Root>
                 <LabeledCheckbox
                     labelText="File viewed"
@@ -83,6 +83,7 @@
                         }
                     }
                 />
+                <Popover.Arrow class="text-edge" />
             </Popover.Content>
         </Popover.Portal>
     </Popover.Root>
diff --git a/web/src/routes/InfoPopup.svelte b/web/src/routes/InfoPopup.svelte
index dcb140a..15aa820 100644
--- a/web/src/routes/InfoPopup.svelte
+++ b/web/src/routes/InfoPopup.svelte
@@ -12,8 +12,9 @@
         <span aria-hidden="true" class="iconify size-4 bg-primary octicon--info-16"></span>
     </Popover.Trigger>
     <Popover.Portal>
-        <Popover.Content class="z-50 max-w-64 rounded-sm border bg-neutral px-2 py-1 text-sm">
+        <Popover.Content class="z-50 mx-2 max-w-64 rounded-sm border bg-neutral px-2 py-1 text-sm">
             {@render children?.()}
+            <Popover.Arrow class="text-edge" />
         </Popover.Content>
     </Popover.Portal>
 </Popover.Root>
diff --git a/web/src/routes/LoadDiffDialog.svelte b/web/src/routes/LoadDiffDialog.svelte
index 6b7cda8..5928a05 100644
--- a/web/src/routes/LoadDiffDialog.svelte
+++ b/web/src/routes/LoadDiffDialog.svelte
@@ -7,23 +7,24 @@
     import { type FileDetails, MultiFileDiffViewerState } from "$lib/diff-viewer-multi-file.svelte";
     import { binaryFileDummyDetails, bytesEqual, isBinaryFile, isImageFile, splitMultiFilePatch } from "$lib/util";
     import { onMount } from "svelte";
-    import FileInput from "$lib/components/files/FileInput.svelte";
-    import SingleFileSelect from "$lib/components/files/SingleFileSelect.svelte";
     import { createTwoFilesPatch } from "diff";
     import DirectorySelect from "$lib/components/files/DirectorySelect.svelte";
-    import { DirectoryEntry, FileEntry } from "$lib/components/files/index.svelte";
+    import { DirectoryEntry, FileEntry, MultimodalFileInputState } from "$lib/components/files/index.svelte";
     import { SvelteSet } from "svelte/reactivity";
+    import MultimodalFileInput from "$lib/components/files/MultimodalFileInput.svelte";
 
     const viewer = MultiFileDiffViewerState.get();
-
     let modalOpen = $state(false);
+
     let githubUrl = $state("https://github.com/");
-    let dragActive = $state(false);
 
-    let fileA = $state<File | undefined>(undefined);
-    let fileB = $state<File | undefined>(undefined);
-    let dirA = $state<DirectoryEntry | undefined>(undefined);
-    let dirB = $state<DirectoryEntry | undefined>(undefined);
+    let patchFile = $state<MultimodalFileInputState | undefined>();
+
+    let fileA = $state<MultimodalFileInputState | undefined>();
+    let fileB = $state<MultimodalFileInputState | undefined>();
+
+    let dirA = $state<DirectoryEntry | undefined>();
+    let dirB = $state<DirectoryEntry | undefined>();
     let dirBlacklistInput = $state<string>("");
     const defaultDirBlacklist = [".git/"];
     let dirBlacklist = new SvelteSet(defaultDirBlacklist);
@@ -56,16 +57,23 @@
     });
 
     async function compareFiles() {
-        if (!fileA || !fileB) {
+        if (!fileA || !fileB || !fileA.metadata || !fileB.metadata) {
             alert("Both files must be selected to compare.");
             return;
         }
-
-        const isImageDiff = isImageFile(fileA.name) && isImageFile(fileB.name);
-        const [aBinary, bBinary] = await Promise.all([isBinaryFile(fileA), isBinaryFile(fileB)]);
+        const isImageDiff = isImageFile(fileA.metadata.name) && isImageFile(fileB.metadata.name);
+        let blobA: Blob, blobB: Blob;
+        try {
+            [blobA, blobB] = await Promise.all([fileA.resolve(), fileB.resolve()]);
+        } catch (e) {
+            console.log("Failed to resolve files:", e);
+            alert("Failed to resolve files: " + e);
+            return;
+        }
+        const [aBinary, bBinary] = await Promise.all([isBinaryFile(blobA), isBinaryFile(blobB)]);
         if (aBinary || bBinary) {
             if (!isImageDiff) {
-                alert("Cannot compare binary files.");
+                alert("Cannot compare binary files (except image-to-image comparisons).");
                 return;
             }
         }
@@ -73,46 +81,46 @@
         const fileDetails: FileDetails[] = [];
 
         if (isImageDiff) {
-            if (await bytesEqual(fileA, fileB)) {
+            if (await bytesEqual(blobA, blobB)) {
                 alert("The files are identical.");
                 return;
             }
 
             let status: FileStatus = "modified";
-            if (fileA.name !== fileB.name) {
+            if (fileA.metadata.name !== fileB.metadata.name) {
                 status = "renamed_modified";
             }
 
             fileDetails.push({
                 content: "",
-                fromFile: fileA.name,
-                toFile: fileB.name,
-                fromBlob: fileA,
-                toBlob: fileB,
+                fromFile: fileA.metadata.name,
+                toFile: fileB.metadata.name,
+                fromBlob: blobA,
+                toBlob: blobB,
                 status,
             });
         } else {
-            const [textA, textB] = await Promise.all([fileA.text(), fileB.text()]);
+            const [textA, textB] = await Promise.all([blobA.text(), blobB.text()]);
             if (textA === textB) {
                 alert("The files are identical.");
                 return;
             }
 
-            const diff = createTwoFilesPatch(fileA.name, fileB.name, textA, textB);
+            const diff = createTwoFilesPatch(fileA.metadata.name, fileB.metadata.name, textA, textB);
             let status: FileStatus = "modified";
-            if (fileA.name !== fileB.name) {
+            if (fileA.metadata.name !== fileB.metadata.name) {
                 status = "renamed_modified";
             }
 
             fileDetails.push({
                 content: diff,
-                fromFile: fileA.name,
-                toFile: fileB.name,
+                fromFile: fileA.metadata.name,
+                toFile: fileB.metadata.name,
                 status,
             });
         }
 
-        viewer.loadPatches(fileDetails, { fileName: `${fileA.name}...${fileB.name}.patch` });
+        viewer.loadPatches(fileDetails, { fileName: `${fileA.metadata.name}...${fileB.metadata.name}.patch` });
         await updateUrlParams();
         modalOpen = false;
     }
@@ -257,52 +265,31 @@
         return into;
     }
 
-    async function loadFromPatchFile(fileName: string, patchContent: string) {
-        const files = splitMultiFilePatch(patchContent);
-        if (files.length === 0) {
-            alert("No valid patches found in the file.");
-            modalOpen = true;
+    async function handlePatchFile() {
+        if (!patchFile || !patchFile.metadata) {
+            alert("No patch file selected.");
             return;
         }
-        viewer.loadPatches(files, { fileName });
-        await updateUrlParams();
-    }
-
-    async function handlePatchFile(file?: File) {
-        if (!file) {
+        let text: string;
+        try {
+            const blob = await patchFile.resolve();
+            text = await blob.text();
+        } catch (e) {
+            console.error("Failed to resolve patch file:", e);
+            alert("Failed to resolve patch file: " + e);
             return;
         }
-        modalOpen = false;
-        await loadFromPatchFile(file.name, await file.text());
-    }
-
-    function handleDragOver(event: DragEvent) {
-        dragActive = true;
-        event.preventDefault();
-    }
-
-    function handleDragLeave(event: DragEvent) {
-        if (event.currentTarget === event.target) {
-            dragActive = false;
-        }
-        event.preventDefault();
-    }
-
-    async function handlePatchFileDrop(event: DragEvent) {
-        dragActive = false;
-        event.preventDefault();
-        const files = event.dataTransfer?.files;
-        if (!files || files.length !== 1) {
-            alert("Only one file can be dropped at a time.");
+        const files = splitMultiFilePatch(text);
+        if (files.length === 0) {
+            alert("No valid patches found in the file.");
             return;
         }
         modalOpen = false;
-        const file = files[0];
-        await loadFromPatchFile(file.name, await file.text());
+        viewer.loadPatches(files, { fileName: patchFile.metadata.name });
+        await updateUrlParams();
     }
 
     async function handleGithubUrl() {
-        modalOpen = false;
         const url = new URL(githubUrl);
         // exclude hash + query params
         const test = url.protocol + "//" + url.hostname + url.pathname;
@@ -312,11 +299,11 @@
 
         if (!match) {
             alert("Invalid GitHub URL. Use: https://github.com/owner/repo/(commit|pull|compare)/(id|ref_a...ref_b)");
-            modalOpen = true;
             return;
         }
 
         githubUrl = match[0];
+        modalOpen = false;
         const success = await viewer.loadFromGithubApi(match);
         if (success) {
             await updateUrlParams({ githubUrl });
@@ -342,21 +329,18 @@
         <InfoPopup>Regex patterns for directories and files to ignore.</InfoPopup>
     </div>
     <div class="flex items-center gap-1 px-2">
-        <div class="flex">
-            <input
-                bind:value={dirBlacklistInput}
-                onkeydown={(e) => {
-                    if (e.key === "Enter") {
-                        addBlacklistEntry();
-                    }
-                }}
-                type="text"
-                class="w-full rounded-l-md border-t border-b border-l px-2 py-1"
-            />
-            <Button.Root title="Add blacklist entry" class="flex rounded-r-md btn-primary px-2 py-1" onclick={addBlacklistEntry}>
+        <form
+            class="flex"
+            onsubmit={(e) => {
+                e.preventDefault();
+                addBlacklistEntry();
+            }}
+        >
+            <input bind:value={dirBlacklistInput} type="text" class="w-full rounded-l-md border-t border-b border-l px-2 py-1" />
+            <Button.Root type="submit" title="Add blacklist entry" class="flex rounded-r-md btn-primary px-2 py-1">
                 <span class="iconify size-4 shrink-0 place-self-center octicon--plus-16" aria-hidden="true"></span>
             </Button.Root>
-        </div>
+        </form>
         <Button.Root
             title="Reset blacklist to defaults"
             class="flex rounded-md btn-danger p-1"
@@ -371,10 +355,10 @@
         </Button.Root>
     </div>
     <ul class="m-2 max-h-96 overflow-y-auto rounded-md border">
-        {#each dirBlacklist as entry (entry)}
-            <li class="flex">
-                <span class="grow border-b px-2 py-1">{entry}</span>
-                <div class="border-b p-1 ps-0">
+        {#each dirBlacklist as entry, index (entry)}
+            <li class="flex" class:border-b={index !== dirBlacklist.size - 1}>
+                <span class="grow px-2 py-1">{entry}</span>
+                <div class="p-1 ps-0">
                     <Button.Root
                         title="Delete blacklist entry"
                         class="flex rounded-md btn-danger p-1"
@@ -394,7 +378,7 @@
 {/snippet}
 
 <Dialog.Root bind:open={modalOpen}>
-    <Dialog.Trigger class="h-fit rounded-md btn-primary px-2 py-0.5" onclick={() => (dragActive = false)}>Load another diff</Dialog.Trigger>
+    <Dialog.Trigger class="h-fit rounded-md btn-primary px-2 py-0.5">Load another diff</Dialog.Trigger>
     <Dialog.Portal>
         <Dialog.Overlay class="fixed inset-0 z-50 bg-black/50 dark:bg-white/20" />
         <Dialog.Content
@@ -413,22 +397,24 @@
                     From GitHub
                 </h3>
 
-                <div class="flex flex-row">
+                <form
+                    class="flex flex-row"
+                    onsubmit={(e) => {
+                        e.preventDefault();
+                        handleGithubUrl();
+                    }}
+                >
                     <input
                         id="githubUrl"
                         type="url"
+                        required
                         autocomplete="url"
                         placeholder="https://github.com/"
                         class="grow rounded-l-md border-t border-b border-l px-2 py-1 overflow-ellipsis"
                         bind:value={githubUrl}
-                        onkeyup={(event) => {
-                            if (event.key === "Enter") {
-                                handleGithubUrl();
-                            }
-                        }}
                     />
-                    <Button.Root onclick={handleGithubUrl} class="rounded-r-md btn-primary px-2 py-1">Go</Button.Root>
-                </div>
+                    <Button.Root type="submit" class="rounded-r-md btn-primary px-2 py-1">Go</Button.Root>
+                </form>
                 <span class="mb-2 text-sm text-em-med">Supports commit, PR, and comparison URLs</span>
 
                 <div class="mb-2 flex flex-row gap-1">
@@ -467,91 +453,94 @@
 
             <Separator.Root class="h-px w-full bg-neutral-2" />
 
-            <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <section
-                class="file-drop-target p-4"
-                data-drag-active={dragActive}
-                ondragover={handleDragOver}
-                ondrop={handlePatchFileDrop}
-                ondragleavecapture={handleDragLeave}
+            <form
+                class="p-4"
+                onsubmit={(e) => {
+                    e.preventDefault();
+                    handlePatchFile();
+                }}
             >
                 <h3 class="mb-2 flex items-center gap-1 text-lg font-semibold">
-                    <span class="iconify size-6 shrink-0 octicon--file-directory-open-fill-24"></span>
-                    From Files
+                    <span class="iconify size-6 shrink-0 octicon--file-diff-24"></span>
+                    From Patch File
                 </h3>
+                <MultimodalFileInput bind:state={patchFile} required label="Patch File" />
+                <Button.Root type="submit" class="mt-1 rounded-md btn-primary px-2 py-1">Go</Button.Root>
+            </form>
 
-                <FileInput class="mb-2 flex w-fit items-center gap-2 rounded-md btn-primary px-2 py-1" onChange={handlePatchFile}>
-                    <span class="iconify size-4 shrink-0 octicon--file-diff-16"></span>
-                    Load Patch File
-                </FileInput>
-
-                <section class="mb-2">
-                    <h4 class="mb-2 font-semibold">Compare Files</h4>
-                    <div class="flex flex-wrap items-center gap-1">
-                        <SingleFileSelect bind:file={fileA} placeholder="File A" />
-                        <span class="iconify size-4 shrink-0 octicon--arrow-right-16"></span>
-                        <SingleFileSelect bind:file={fileB} placeholder="File B" />
-                        <Button.Root onclick={compareFiles} class="rounded-md btn-primary px-2 py-1">Go</Button.Root>
-                    </div>
-                </section>
+            <Separator.Root class="h-px w-full bg-neutral-2" />
 
-                <section>
-                    <div class="mb-2 flex items-center">
-                        <h4 class="me-1 font-semibold">Compare Directories</h4>
-                        <InfoPopup>
-                            Compares the entire contents of the directories, including subdirectories. Does not attempt to detect renames. When possible,
-                            preparing a unified diff (<code class="rounded-sm bg-neutral-2 px-1 py-0.5">.patch</code> file) using Git or another tool and loading
-                            it with the above button should be preferred.
-                        </InfoPopup>
-                    </div>
-                    <div class="flex flex-wrap items-center gap-1">
-                        <DirectorySelect bind:directory={dirA} placeholder="Directory A" />
-                        <span class="iconify size-4 shrink-0 octicon--arrow-right-16"></span>
-                        <DirectorySelect bind:directory={dirB} placeholder="Directory B" />
-                        <div class="flex">
-                            <Button.Root onclick={compareDirs} class="relative rounded-l-md btn-primary">
-                                <div class="px-2 py-1">Go</div>
-                                <div class="absolute top-0 right-0 h-full w-px bg-neutral-3/20"></div>
-                            </Button.Root>
-                            <Popover.Root>
-                                <Popover.Trigger title="Edit filters" class="flex rounded-r-md btn-primary p-2 data-[state=open]:btn-primary-hover">
-                                    <span class="iconify size-4 shrink-0 place-self-center octicon--filter-16" aria-hidden="true"></span>
-                                </Popover.Trigger>
-                                <Popover.Portal>
-                                    <Popover.Content side="top" class="z-50 overflow-hidden rounded-md border bg-neutral">
-                                        {@render blacklistPopoverContent()}
-                                    </Popover.Content>
-                                </Popover.Portal>
-                            </Popover.Root>
-                        </div>
+            <form
+                class="p-4"
+                onsubmit={(e) => {
+                    e.preventDefault();
+                    compareFiles();
+                }}
+            >
+                <h3 class="mb-2 flex items-center gap-1 text-lg font-semibold">
+                    <span class="iconify size-6 shrink-0 octicon--file-24"></span>
+                    From Files
+                </h3>
+                <div class="flex flex-wrap items-center gap-1">
+                    <MultimodalFileInput bind:state={fileA} required label="File A" />
+                    <div class="flex w-full">
+                        <span class="iconify size-4 shrink-0 octicon--arrow-down-16"></span>
                     </div>
-                </section>
-            </section>
+                    <MultimodalFileInput bind:state={fileB} required label="File B" />
+                    <Button.Root type="submit" class="rounded-md btn-primary px-2 py-1">Go</Button.Root>
+                    <Button.Root
+                        title="Swap File A and File B"
+                        type="button"
+                        class="flex size-6 items-center justify-center rounded-md btn-primary"
+                        onclick={() => {
+                            if (!fileA || !fileB) return;
+                            fileA.swapState(fileB);
+                        }}
+                    >
+                        <span class="iconify size-4 shrink-0 octicon--arrow-switch-16" aria-hidden="true"></span>
+                    </Button.Root>
+                </div>
+            </form>
+
+            <Separator.Root class="h-px w-full bg-neutral-2" />
+
+            <form
+                class="p-4"
+                onsubmit={(e) => {
+                    e.preventDefault();
+                    compareDirs();
+                }}
+            >
+                <h3 class="mb-2 flex items-center gap-1 text-lg font-semibold">
+                    <span class="iconify size-6 shrink-0 octicon--file-directory-24"></span>
+                    From Directories
+                    <InfoPopup>
+                        Compares the entire contents of the directories, including subdirectories. Does not attempt to detect renames. When possible, preparing
+                        a unified diff (<code class="rounded-sm bg-neutral-2 px-1 py-0.5">.patch</code> file) using Git or another tool and loading it with the above
+                        button should be preferred.
+                    </InfoPopup>
+                </h3>
+                <div class="flex flex-wrap items-center gap-1">
+                    <DirectorySelect bind:directory={dirA} placeholder="Directory A" />
+                    <span class="iconify size-4 shrink-0 octicon--arrow-right-16"></span>
+                    <DirectorySelect bind:directory={dirB} placeholder="Directory B" />
+                    <Button.Root type="submit" class="rounded-md btn-primary px-2 py-1">Go</Button.Root>
+                    <Popover.Root>
+                        <Popover.Trigger
+                            title="Edit filters"
+                            class="flex size-6 items-center justify-center rounded-md btn-primary data-[state=open]:btn-primary-hover"
+                        >
+                            <span class="iconify size-4 shrink-0 octicon--filter-16" aria-hidden="true"></span>
+                        </Popover.Trigger>
+                        <Popover.Portal>
+                            <Popover.Content side="top" class="z-50 overflow-hidden rounded-md border bg-neutral">
+                                {@render blacklistPopoverContent()}
+                                <Popover.Arrow class="text-edge" />
+                            </Popover.Content>
+                        </Popover.Portal>
+                    </Popover.Root>
+                </div>
+            </form>
         </Dialog.Content>
     </Dialog.Portal>
 </Dialog.Root>
-
-<style>
-    .file-drop-target {
-        position: relative;
-    }
-    .file-drop-target[data-drag-active="true"]::before {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        content: "Drop patch file here";
-        font-size: var(--text-3xl);
-        color: var(--color-black);
-
-        background-color: rgba(255, 255, 255, 0.7);
-
-        border: dashed var(--color-primary);
-        border-radius: inherit;
-    }
-</style>
diff --git a/web/src/routes/single-file/+page.svelte b/web/src/routes/single-file/+page.svelte
deleted file mode 100644
index fe8a5e6..0000000
--- a/web/src/routes/single-file/+page.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-    import ConciseDiffView from "$lib/components/diff/ConciseDiffView.svelte";
-    import FileInput from "$lib/components/files/FileInput.svelte";
-
-    let data: { value: string } = $state({ value: "" });
-    let fileName: string = $state("No File Selected");
-
-    async function handleFileUpload(file?: File) {
-        if (file) {
-            data.value = await file.text();
-            fileName = file.name;
-        }
-    }
-</script>
-
-<div class="flex min-h-screen flex-row justify-center bg-primary px-2 py-2 lg:py-6">
-    <div class="flex min-h-[500px] max-w-7xl grow flex-col rounded-lg bg-white p-3 shadow-md md:p-6">
-        <div class="mb-2 flex">
-            <FileInput onChange={handleFileUpload} class="cursor-pointer rounded-lg btn-primary px-4 py-2">Load Patch File</FileInput>
-        </div>
-        <h1 class="text-2xl">{fileName}</h1>
-        <div class="flex h-fit flex-1 flex-col border">
-            <ConciseDiffView rawPatchContent={data.value}></ConciseDiffView>
-        </div>
-    </div>
-</div>