This commit is contained in:
Timothy Jaeryang Baek
2026-05-14 01:43:33 +09:00
parent ab0ee858b7
commit 3127f1b462
6 changed files with 157 additions and 9 deletions
+13
View File
@@ -384,6 +384,19 @@ class FilesTable:
except Exception:
return None
async def update_file_name_by_id(self, id: str, name: str, db: AsyncSession | None = None) -> FileModel | None:
async with get_async_db_context(db) as db:
try:
result = await db.execute(select(File).filter_by(id=id))
file = result.scalars().first()
file.filename = name
file.meta = {**(file.meta if file.meta else {}), 'name': name}
file.updated_at = int(time.time())
await db.commit()
return FileModel.model_validate(file)
except Exception:
return None
async def delete_file_by_id(self, id: str, db: AsyncSession | None = None) -> bool:
async with get_async_db_context(db) as db:
try:
+40
View File
@@ -765,6 +765,46 @@ async def get_file_content_by_id(
)
############################
# Rename File By Id
############################
class FileRenameForm(BaseModel):
filename: str
@router.post('/{id}/rename')
async def rename_file_by_id(
id: str,
form_data: FileRenameForm,
user=Depends(get_verified_user),
db: AsyncSession = Depends(get_async_session),
):
file = await Files.get_file_by_id(id, db=db)
if not file:
raise HTTPException(
status_code=status.HTTP_404_NOT_FOUND,
detail=ERROR_MESSAGES.NOT_FOUND,
)
if file.user_id == user.id or user.role == 'admin' or await has_access_to_file(id, 'write', user, db=db):
result = await Files.update_file_name_by_id(id, form_data.filename, db=db)
if result:
return result
else:
raise HTTPException(
status_code=status.HTTP_400_BAD_REQUEST,
detail=ERROR_MESSAGES.DEFAULT('Error renaming file'),
)
else:
raise HTTPException(
status_code=status.HTTP_404_NOT_FOUND,
detail=ERROR_MESSAGES.NOT_FOUND,
)
############################
# Delete File By Id
############################
+29
View File
@@ -306,6 +306,35 @@ export const getFileContentById = async (id: string) => {
return res;
};
export const renameFileById = async (token: string, id: string, filename: string) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/files/${id}/rename`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
authorization: `Bearer ${token}`
},
body: JSON.stringify({ filename })
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
error = err.detail;
console.error(err);
return null;
});
if (error) {
throw error;
}
return res;
};
export const deleteFileById = async (token: string, id: string) => {
let error = null;
@@ -22,7 +22,8 @@
updateFileDataContentById,
uploadFile,
deleteFileById,
getFileById
getFileById,
renameFileById
} from '$lib/apis/files';
import {
addFileToKnowledgeById,
@@ -686,6 +687,18 @@
}
};
const renameFileHandler = async (fileId: string, name: string) => {
try {
const res = await renameFileById(localStorage.token, fileId, name);
if (res) {
toast.success($i18n.t('File renamed.'));
getItemsPage();
}
} catch (e) {
toast.error(`${e}`);
}
};
let debounceTimeout = null;
let mediaQuery;
@@ -1197,7 +1210,8 @@
deleteFileHandler(fileId);
}}
onNavigateDirectory={(dirId) => navigateToDirectory(dirId)}
onRename={(fileId, name) => renameFileHandler(fileId, name)}
onNavigateDirectory={(dirId) => navigateToDirectory(dirId)}
onRenameDirectory={(id, name) => renameDirectoryHandler(id, name)}
onDeleteDirectory={(id) => confirmDeleteDirectory(id)}
onMoveFileToDirectory={(fileId, dirId) =>
@@ -128,7 +128,7 @@
<input
bind:this={editInput}
bind:value={editName}
class="text-sm bg-transparent border border-gray-300 dark:border-gray-600 rounded px-1 py-0 outline-none focus:ring-1 focus:ring-gray-400"
class="text-sm w-full bg-transparent border-none outline-hidden"
on:keydown={(e) => {
if (e.key === 'Enter') submitRename();
if (e.key === 'Escape') cancelRename();
@@ -19,6 +19,7 @@
import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
import Download from '$lib/components/icons/Download.svelte';
import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
import Pencil from '$lib/components/icons/Pencil.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
import DirectoryRow from './DirectoryRow.svelte';
@@ -29,11 +30,33 @@
export let onClick = (fileId) => {};
export let onDelete = (fileId) => {};
export let onRename = (fileId: string, name: string) => {};
export let onNavigateDirectory = (directoryId: string) => {};
export let onRenameDirectory = (id: string, name: string) => {};
export let onDeleteDirectory = (id: string) => {};
export let onMoveFileToDirectory = (fileId: string, directoryId: string) => {};
export let onMoveDirectoryToDirectory = (dirId: string, targetDirectoryId: string) => {};
let editingFileId: string | null = null;
let editName = '';
let editInput: HTMLInputElement;
const startRename = (file: any) => {
editingFileId = file?.id ?? file?.tempId;
editName = file?.name ?? file?.meta?.name ?? '';
setTimeout(() => editInput?.select(), 0);
};
const submitRename = () => {
if (editingFileId && editName.trim()) {
onRename(editingFileId, editName.trim());
}
editingFileId = null;
};
const cancelRename = () => {
editingFileId = null;
};
</script>
<div class=" max-h-full flex flex-col w-full gap-[0.5px]">
@@ -90,15 +113,34 @@
on:click={() => {
onClick(file?.id ?? file?.tempId);
}}
on:dblclick={() => {
if (knowledge?.write_access) startRename(file);
}}
>
<div>
<div class="flex gap-2 items-center line-clamp-1">
<div class="line-clamp-1 text-sm">
{file?.name ?? file?.meta?.name}
{#if file?.meta?.size}
<span class="text-xs text-gray-500">{formatFileSize(file?.meta?.size)}</span>
{/if}
</div>
{#if editingFileId === (file?.id ?? file?.tempId)}
<!-- svelte-ignore a11y-autofocus -->
<input
bind:this={editInput}
bind:value={editName}
class="text-sm w-full bg-transparent border-none outline-hidden"
on:keydown={(e) => {
if (e.key === 'Enter') submitRename();
if (e.key === 'Escape') cancelRename();
}}
on:blur={submitRename}
on:click={(e) => e.stopPropagation()}
autofocus
/>
{:else}
<div class="line-clamp-1 text-sm">
{file?.name ?? file?.meta?.name}
{#if file?.meta?.size}
<span class="text-xs text-gray-500">{formatFileSize(file?.meta?.size)}</span>
{/if}
</div>
{/if}
</div>
</div>
@@ -143,6 +185,16 @@
<div
class="min-w-[140px] rounded-2xl p-1 z-[9999999] bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800"
>
<button
type="button"
class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
on:click={() => {
startRename(file);
}}
>
<Pencil className="size-3.5" />
{$i18n.t('Rename')}
</button>
<button
type="button"
class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"