enh: files data controls

backend/open_webui/models/files.py

@@ -4,7 +4,7 @@ from typing import Optional
 
 from sqlalchemy.orm import Session
 from open_webui.internal.db import Base, JSONField, get_db, get_db_context
-from pydantic import BaseModel, ConfigDict
+from pydantic import BaseModel, ConfigDict, model_validator
 from sqlalchemy import BigInteger, Column, String, Text, JSON
 
 log = logging.getLogger(__name__)
@@ -63,6 +63,25 @@ class FileMeta(BaseModel):
 
     model_config = ConfigDict(extra="allow")
 
+    @model_validator(mode="before")
+    @classmethod
+    def sanitize_meta(cls, data):
+        """Sanitize metadata fields to handle malformed legacy data."""
+        if not isinstance(data, dict):
+            return data
+        
+        # Handle content_type that may be a list like ['application/pdf', None]
+        content_type = data.get("content_type")
+        if isinstance(content_type, list):
+            # Extract first non-None string value
+            data["content_type"] = next(
+                (item for item in content_type if isinstance(item, str)), None
+            )
+        elif content_type is not None and not isinstance(content_type, str):
+            data["content_type"] = None
+        
+        return data
+
 
 class FileModelResponse(BaseModel):
     id: str
@@ -74,7 +93,7 @@ class FileModelResponse(BaseModel):
     meta: FileMeta
 
     created_at: int  # timestamp in epoch
-    updated_at: int  # timestamp in epoch
+    updated_at: Optional[int] = None  # timestamp in epoch, optional for legacy files
 
     model_config = ConfigDict(extra="allow")
 

backend/open_webui/routers/files.py

@@ -282,7 +282,7 @@ def upload_file_handler(
                     },
                     "meta": {
                         "name": name,
-                        "content_type": file.content_type,
+                        "content_type": file.content_type if isinstance(file.content_type, str) else None,
                         "size": len(contents),
                         "data": file_metadata,
                     },
@@ -827,6 +827,23 @@ async def delete_file_by_id(
         or has_access_to_file(id, "write", user, db=db)
     ):
 
+        # Clean up KB associations and embeddings before deleting
+        knowledges = Knowledges.get_knowledges_by_file_id(id, db=db)
+        for knowledge in knowledges:
+            # Remove KB-file relationship
+            Knowledges.remove_file_from_knowledge_by_id(knowledge.id, id, db=db)
+            # Clean KB embeddings (same logic as /knowledge/{id}/file/remove)
+            try:
+                VECTOR_DB_CLIENT.delete(
+                    collection_name=knowledge.id, filter={"file_id": id}
+                )
+                if file.hash:
+                    VECTOR_DB_CLIENT.delete(
+                        collection_name=knowledge.id, filter={"hash": file.hash}
+                    )
+            except Exception as e:
+                log.debug(f"KB embedding cleanup for {knowledge.id}: {e}")
+
         result = Files.delete_file_by_id(id, db=db)
         if result:
             try:

src/lib/apis/files/index.ts

@@ -175,6 +175,44 @@ export const getFiles = async (token: string = '') => {
 	return res;
 };
 
+export const searchFiles = async (
+	token: string,
+	filename: string = '*',
+	skip: number = 0,
+	limit: number = 50
+) => {
+	let error = null;
+
+	const searchParams = new URLSearchParams();
+	searchParams.append('filename', filename);
+	searchParams.append('skip', String(skip));
+	searchParams.append('limit', String(limit));
+
+	const res = await fetch(`${WEBUI_API_BASE_URL}/files/search?${searchParams.toString()}`, {
+		method: 'GET',
+		headers: {
+			Accept: 'application/json',
+			'Content-Type': 'application/json',
+			authorization: `Bearer ${token}`
+		}
+	})
+		.then(async (res) => {
+			if (!res.ok) throw await res.json();
+			return res.json();
+		})
+		.catch((err) => {
+			error = err.detail;
+			console.error(err);
+			return [];
+		});
+
+	if (error) {
+		throw error;
+	}
+
+	return res;
+};
+
 export const getFileById = async (token: string, id: string) => {
 	let error = null;
 

src/lib/components/chat/Settings/DataControls.svelte

@@ -25,6 +25,7 @@
 	import { toast } from 'svelte-sonner';
 	import ArchivedChatsModal from '$lib/components/layout/ArchivedChatsModal.svelte';
 	import SharedChatsModal from '$lib/components/layout/SharedChatsModal.svelte';
+	import FilesModal from '$lib/components/layout/FilesModal.svelte';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 
 	const i18n = getContext('i18n');
@@ -38,6 +39,7 @@
 	let showDeleteConfirmDialog = false;
 	let showArchivedChatsModal = false;
 	let showSharedChatsModal = false;
+	let showFilesModal = false;
 
 	let chatImportInputElement: HTMLInputElement;
 
@@ -139,6 +141,7 @@
 
 <ArchivedChatsModal bind:show={showArchivedChatsModal} onUpdate={handleArchivedChatsChange} />
 <SharedChatsModal bind:show={showSharedChatsModal} />
+<FilesModal bind:show={showFilesModal} />
 
 <ConfirmDialog
 	title={$i18n.t('Archive All Chats')}
@@ -171,7 +174,7 @@
 			hidden
 		/>
 
-			<div>
+		<div>
 			<div class="mb-1 text-sm font-medium">{$i18n.t('Chats')}</div>
 
 			<div>
@@ -266,5 +269,24 @@
 				</div>
 			</div>
 		</div>
+
+		<div>
+			<div class="mb-1 text-sm font-medium">{$i18n.t('Files')}</div>
+
+			<div>
+				<div class="py-0.5 flex w-full justify-between">
+					<div class="self-center text-xs">{$i18n.t('Manage Files')}</div>
+					<button
+						class="p-1 px-3 text-xs flex rounded-sm transition"
+						on:click={() => {
+							showFilesModal = true;
+						}}
+						type="button"
+					>
+						<span class="self-center">{$i18n.t('Manage')}</span>
+					</button>
+				</div>
+			</div>
+		</div>
 	</div>
 </div>

src/lib/components/layout/FilesModal.svelte

@@ -0,0 +1,343 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import { getContext } from 'svelte';
+	import type { Writable } from 'svelte/store';
+	import dayjs from 'dayjs';
+
+	import { searchFiles, deleteFileById } from '$lib/apis/files';
+	import Modal from '$lib/components/common/Modal.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Loader from '$lib/components/common/Loader.svelte';
+	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
+	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import FileItemModal from '$lib/components/common/FileItemModal.svelte';
+
+	const i18n: Writable<any> = getContext('i18n');
+
+	export let show = false;
+
+	let files: any[] | null = null;
+	let query = '';
+	let orderBy = 'created_at';
+	let direction = 'desc';
+
+	let page = 0;
+	let allFilesLoaded = false;
+	let filesLoading = false;
+	let searchDebounceTimeout: any;
+
+	let selectedFileId: string | null = null;
+	let showDeleteConfirmDialog = false;
+
+	let selectedFile: any = null;
+	let showFileItemModal = false;
+
+	const PAGE_SIZE = 50;
+
+	const formatFileSize = (bytes: number): string => {
+		if (bytes === 0) return '0 B';
+		const k = 1024;
+		const sizes = ['B', 'KB', 'MB', 'GB'];
+		const i = Math.floor(Math.log(bytes) / Math.log(k));
+		return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+	};
+
+	const setSortKey = (key: string) => {
+		if (orderBy === key) {
+			direction = direction === 'asc' ? 'desc' : 'asc';
+		} else {
+			orderBy = key;
+			direction = 'asc';
+		}
+		searchHandler();
+	};
+
+	const searchHandler = async () => {
+		if (!show) return;
+
+		if (searchDebounceTimeout) {
+			clearTimeout(searchDebounceTimeout);
+		}
+
+		page = 0;
+		files = null;
+		allFilesLoaded = false;
+
+		const doSearch = async () => {
+			const pattern = query ? `*${query}*` : '*';
+			const newFiles = await searchFiles(localStorage.token, pattern, 0, PAGE_SIZE);
+			files = sortFiles(newFiles);
+			allFilesLoaded = newFiles.length < PAGE_SIZE;
+		};
+
+		if (query === '') {
+			await doSearch();
+		} else {
+			searchDebounceTimeout = setTimeout(doSearch, 500);
+		}
+	};
+
+	const loadMoreFiles = async () => {
+		if (filesLoading || allFilesLoaded) return;
+
+		filesLoading = true;
+		page += 1;
+
+		const pattern = query ? `*${query}*` : '*';
+		const newFiles = await searchFiles(localStorage.token, pattern, page * PAGE_SIZE, PAGE_SIZE);
+
+		allFilesLoaded = newFiles.length < PAGE_SIZE;
+
+		if (newFiles.length > 0) {
+			files = sortFiles([...(files || []), ...newFiles]);
+		}
+
+		filesLoading = false;
+	};
+
+	const sortFiles = (fileList: any[]): any[] => {
+		return fileList.sort((a, b) => {
+			let aVal = a[orderBy] ?? 0;
+			let bVal = b[orderBy] ?? 0;
+
+			if (orderBy === 'filename') {
+				aVal = a.filename?.toLowerCase() ?? '';
+				bVal = b.filename?.toLowerCase() ?? '';
+			}
+
+			if (direction === 'asc') {
+				return aVal > bVal ? 1 : -1;
+			} else {
+				return aVal < bVal ? 1 : -1;
+			}
+		});
+	};
+
+	const deleteHandler = async (fileId: string) => {
+		try {
+			await deleteFileById(localStorage.token, fileId);
+			toast.success($i18n.t('File deleted successfully.'));
+			await searchHandler();
+		} catch (error) {
+			toast.error(`${error}`);
+		}
+	};
+
+	const openFileViewer = (file: any) => {
+		selectedFile = {
+			id: file.id,
+			name: file.filename,
+			type: 'file',
+			size: file.meta?.size,
+			meta: file.meta
+		};
+		showFileItemModal = true;
+	};
+
+	$: if (show) {
+		searchHandler();
+	}
+</script>
+
+<ConfirmDialog
+	bind:show={showDeleteConfirmDialog}
+	on:confirm={() => {
+		if (selectedFileId) {
+			deleteHandler(selectedFileId);
+			selectedFileId = null;
+		}
+	}}
+/>
+
+<FileItemModal bind:show={showFileItemModal} item={selectedFile} edit={false} />
+
+<Modal size="xl" bind:show>
+	<div>
+		<div class="flex justify-between dark:text-gray-300 px-5 pt-4 pb-1">
+			<div class="text-lg font-medium self-center">{$i18n.t('Files')}</div>
+			<button
+				class="self-center"
+				on:click={() => {
+					show = false;
+				}}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					class="w-5 h-5"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</button>
+		</div>
+
+		<div class="flex flex-col w-full px-5 pb-4 dark:text-gray-200">
+			<!-- Search -->
+			<div class="flex w-full space-x-2 mb-0.5">
+				<div class="flex flex-1">
+					<div class="self-center ml-1 mr-3">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</div>
+					<input
+						class="w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
+						bind:value={query}
+						on:input={() => searchHandler()}
+						placeholder={$i18n.t('Search Files')}
+						maxlength="500"
+					/>
+
+					{#if query}
+						<div class="self-center pl-1.5 pr-1 translate-y-[0.5px] rounded-l-xl bg-transparent">
+							<button
+								class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+								on:click={() => {
+									query = '';
+									searchHandler();
+								}}
+							>
+								<XMark className="size-3" strokeWidth="2" />
+							</button>
+						</div>
+					{/if}
+				</div>
+			</div>
+
+			<!-- Files List -->
+			<div class="flex flex-col w-full">
+				{#if files !== null}
+					<div class="w-full">
+						{#if files.length > 0}
+							<div class="flex text-xs font-medium mb-1.5">
+								<button
+									class="px-1.5 py-1 cursor-pointer select-none basis-3/5"
+									on:click={() => setSortKey('filename')}
+								>
+									<div class="flex gap-1.5 items-center">
+										{$i18n.t('Filename')}
+										{#if orderBy === 'filename'}
+											<span class="font-normal">
+												{#if direction === 'asc'}
+													<ChevronUp className="size-2" />
+												{:else}
+													<ChevronDown className="size-2" />
+												{/if}
+											</span>
+										{:else}
+											<span class="invisible">
+												<ChevronUp className="size-2" />
+											</span>
+										{/if}
+									</div>
+								</button>
+								<button
+									class="px-1.5 py-1 cursor-pointer select-none hidden sm:flex sm:basis-2/5 justify-end"
+									on:click={() => setSortKey('created_at')}
+								>
+									<div class="flex gap-1.5 items-center">
+										{$i18n.t('Created at')}
+										{#if orderBy === 'created_at'}
+											<span class="font-normal">
+												{#if direction === 'asc'}
+													<ChevronUp className="size-2" />
+												{:else}
+													<ChevronDown className="size-2" />
+												{/if}
+											</span>
+										{:else}
+											<span class="invisible">
+												<ChevronUp className="size-2" />
+											</span>
+										{/if}
+									</div>
+								</button>
+							</div>
+						{/if}
+
+						<div class="text-left text-sm w-full mb-3 max-h-[32rem] overflow-y-scroll">
+							{#if files.length === 0}
+								<div
+									class="text-xs text-gray-500 dark:text-gray-400 text-center px-5 min-h-20 w-full h-full flex justify-center items-center"
+								>
+									{$i18n.t('No files found')}
+								</div>
+							{/if}
+
+							{#each files as file (file.id)}
+								<div
+									class="w-full flex justify-between items-center rounded-lg text-sm py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-850 cursor-pointer"
+									on:click={() => openFileViewer(file)}
+								>
+									<div class="basis-3/5 min-w-0">
+										<div class="text-ellipsis line-clamp-1">{file.filename}</div>
+										<div class="text-xs text-gray-500">
+											{formatFileSize(file.meta?.size ?? 0)}
+										</div>
+									</div>
+
+									<div class="basis-2/5 flex items-center justify-end">
+										<div class="hidden sm:flex text-gray-500 dark:text-gray-400 text-xs">
+											{dayjs(file.created_at * 1000).format('MMM D, YYYY')}
+										</div>
+
+										<div class="flex justify-end pl-2.5 text-gray-600 dark:text-gray-300">
+											<Tooltip content={$i18n.t('Delete File')}>
+												<button
+													class="self-center w-fit px-1 text-sm rounded-xl"
+													on:click|stopPropagation={() => {
+														selectedFileId = file.id;
+														showDeleteConfirmDialog = true;
+													}}
+												>
+													<GarbageBin class="size-4" strokeWidth="1.5" />
+												</button>
+											</Tooltip>
+										</div>
+									</div>
+								</div>
+							{/each}
+
+							{#if !allFilesLoaded}
+								<Loader
+									on:visible={() => {
+										if (!filesLoading) {
+											loadMoreFiles();
+										}
+									}}
+								>
+									<div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
+										<Spinner className="size-4" />
+										<div>{$i18n.t('Loading...')}</div>
+									</div>
+								</Loader>
+							{/if}
+						</div>
+					</div>
+				{:else}
+					<div class="w-full h-full flex justify-center items-center min-h-20">
+						<Spinner className="size-5" />
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+</Modal>