{selectedRowKeys.length > 0 ? (
<>
- {special === "library" &&
- files.filter((item) => selectedRowKeys.includes(item.name) && !item.isDir)
+ {files.filter((item) => selectedRowKeys.includes(item.name) && !item.isDir)
.length > 0 ? (
void;
+ onUploadedFiles?: (files: string[], path: string, special: string) => void;
}> = ({
special,
initialPath = "",
@@ -36,7 +47,9 @@ export const SelectFileFileBrowser: React.FC<{
trackUrl = true,
showDirOnly = false,
showColumns = undefined,
+ enableFileManagement = false,
onFileSelectChange,
+ onUploadedFiles,
}) => {
const { t } = useTranslation();
const { playAudio } = useAudioContext();
@@ -48,6 +61,20 @@ export const SelectFileFileBrowser: React.FC<{
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [isInformationModalOpen, setIsInformationModalOpen] = useState(false);
+
+ const [isConfirmDeleteModalOpen, setIsConfirmDeleteModalOpen] = useState(false);
+ const [isConfirmMultipleDeleteModalOpen, setIsConfirmMultipleDeleteModalOpen] = useState(false);
+ const [fileToDelete, setFileToDelete] = useState(null);
+ const [deletePath, setDeletePath] = useState("");
+ const [deleteApiCall, setDeleteApiCall] = useState("");
+ const [isMoveFileModalOpen, setIsMoveFileModalOpen] = useState(false);
+ const [isRenameFileModalOpen, setIsRenameFileModalOpen] = useState(false);
+ const [currentFile, setCurrentFile] = useState("");
+ const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
+ const [uploadFileList, setUploadFileList] = useState([]);
+ const [downloading, setDownloading] = useState<{ [key: string]: boolean }>({});
+ const [imagePreviewOpen, setImagePreviewOpen] = useState(false);
+ const [imagePreviewUrl, setImagePreviewUrl] = useState("");
const [currentRecord, setCurrentRecord] = useState();
const [currentAudioUrl, setCurrentAudioUrl] = useState("");
@@ -56,6 +83,7 @@ export const SelectFileFileBrowser: React.FC<{
setPath,
files,
rebuildList,
+ setRebuildList,
loading,
filterText,
filterFieldAutoFocus,
@@ -81,6 +109,33 @@ export const SelectFileFileBrowser: React.FC<{
initialPath,
});
+ const directoryTree = useDirectoryTree(special, {
+ skipPreload: special === "custom_img",
+ });
+
+ const {
+ open: isCreateDirectoryModalOpen,
+ createDirectoryPath,
+ createDirectoryInputKey,
+ hasNewDirectoryInvalidChars,
+ isCreateDirectoryButtonDisabled,
+ inputCreateDirectoryRef,
+ openCreateDirectoryModal,
+ closeCreateDirectoryModal,
+ handleCreateDirectoryInputChange,
+ createDirectory,
+ } = useDirectoryCreate({
+ path,
+ directoryTree,
+ selectNewNode: true,
+ setRebuildList: enableFileManagement ? setRebuildList : undefined,
+ special,
+ });
+
+ const { handleFileDownload } = useFileDownload({
+ setDownloading: enableFileManagement ? setDownloading : () => {},
+ });
+
useEffect(() => {
setSelectedRowKeys([]);
}, [rebuildList]);
@@ -147,9 +202,44 @@ export const SelectFileFileBrowser: React.FC<{
setPath(newPath);
};
+ const showDeleteConfirmDialog = (fileName: string, pathWithFile: string, apiCall: string) => {
+ setFileToDelete(fileName);
+ setDeletePath(decodeURIComponent(pathWithFile));
+ setDeleteApiCall(apiCall);
+ setIsConfirmDeleteModalOpen(true);
+ };
+
+ const showMoveDialog = (fileName: string) => {
+ directoryTree.setTreeNodeId(directoryTree.rootTreeNode.id);
+ setCurrentFile(fileName || "");
+ setIsMoveFileModalOpen(true);
+ };
+
+ const showRenameDialog = (fileName: string) => {
+ setCurrentFile(fileName);
+ setIsRenameFileModalOpen(true);
+ };
+
+ const closeMoveFileModal = () => {
+ setIsMoveFileModalOpen(false);
+ directoryTree.setTreeNodeId(directoryTree.rootTreeNode.id);
+ };
+
+ const closeRenameFileModal = () => {
+ setIsRenameFileModalOpen(false);
+ };
+
+ const handleMultipleDelete = () => {
+ setIsConfirmMultipleDeleteModalOpen(true);
+ };
+
+ const imageFilesSelected = enableFileManagement
+ ? files.filter((item) => selectedRowKeys.includes(item.name) && !item.isDir).length
+ : 0;
+
// columns
const columns = createColumns({
- mode: "select",
+ mode: enableFileManagement ? "full" : "select",
path,
special,
overlay,
@@ -158,13 +248,113 @@ export const SelectFileFileBrowser: React.FC<{
showColumns,
defaultSorter,
dirNameSorter,
+ downloading: enableFileManagement ? downloading : undefined,
handleDirClick,
showInformationModal,
playAudio,
+ handleFileDownload: enableFileManagement ? handleFileDownload : undefined,
+ showRenameDialog: enableFileManagement ? showRenameDialog : undefined,
+ showMoveDialog: enableFileManagement ? showMoveDialog : undefined,
+ showDeleteConfirmDialog: enableFileManagement ? showDeleteConfirmDialog : undefined,
+ buildContentUrl: special === "custom_img" ? buildContentUrl : undefined,
+ onImagePreviewClick:
+ special === "custom_img"
+ ? (url) => {
+ setImagePreviewUrl(url);
+ setImagePreviewOpen(true);
+ }
+ : undefined,
});
return (
<>
+ {enableFileManagement && (
+ <>
+ setIsConfirmDeleteModalOpen(false)}
+ multipleOpen={isConfirmMultipleDeleteModalOpen}
+ onCloseMultiple={() => setIsConfirmMultipleDeleteModalOpen(false)}
+ />
+ {isCreateDirectoryModalOpen && (
+ setIsUploadModalOpen(false)}
+ path={path}
+ special={special}
+ uploadFileList={uploadFileList}
+ setUploadFileList={setUploadFileList}
+ setRebuildList={setRebuildList}
+ onUploadedFiles={onUploadedFiles}
+ />
+ {isMoveFileModalOpen && (
+ {}}
+ setRebuildList={setRebuildList}
+ />
+ )}
+ {isRenameFileModalOpen && (
+ setImagePreviewOpen(false)}
+ footer={null}
+ >
+ {imagePreviewUrl ? (
+ 
+ ) : null}
+
+ )}
{currentRecord && isInformationModalOpen && (
{t("tonies.currentPath")}
{generateBreadcrumbs(path)}
+ {selectedRowKeys.length > 0 && (
+ <>
+ {imageFilesSelected > 0 && (
+
+ }
+ onClick={() => showMoveDialog("")}
+ >
+ {t("fileBrowser.move")}
+
+
+ )}
+
+ }
+ onClick={handleMultipleDelete}
+ >
+ {t("fileBrowser.delete")}
+
+
+
+ )}
+ }
+ size="small"
+ onClick={() => openCreateDirectoryModal(path)}
+ >
+ {t("fileBrowser.createDirectory.createDirectory")}
+
+ }
+ size="small"
+ onClick={() => setIsUploadModalOpen(true)}
+ >
+ {t("fileBrowser.upload.showUploadFilesDragNDrop")}
+
+
+ )}
{loading ? 
showInformationModal(record)}
- style={{
- height: 40,
- width: 40,
- objectFit: "contain",
- cursor: "pointer",
- marginRight: 8,
- }}
- />
- ) : (
- <>
- )}
- {mode === "full" && record.hide ? (
- 
{
+ if (record.tonieInfo) {
+ showInformationModal(record);
+ } else if (onImagePreviewClick) {
+ onImagePreviewClick(src);
+ }
+ }}
+ style={{
+ height: 40,
+ width: 40,
+ objectFit: "contain",
+ cursor: record.tonieInfo || onImagePreviewClick ? "pointer" : "default",
+ marginRight: 8,
+ }}
+ />
+ ) : record?.isDir ? (
+ {
}
}
- return actions;
+ return = ({
+ open,
+ onClose,
+ onSelectImage,
+ initialSelection = "",
+ title: titleProp,
+}) => {
+ const { t } = useTranslation();
+ const title = titleProp ?? t("tonies.imageManager.title");
+ const [source, setSource] = useState("custom");
+ const [customPath, setCustomPath] = useState("");
+ const [customSelection, setCustomSelection] = useState("");
+ const [originalSelection, setOriginalSelection] = useState("");
+ const [originalImages, setOriginalImages] = useState([]);
+
+ useEffect(() => {
+ if (!open) return;
+ const initialIsCustom = isCustomImagePath(initialSelection);
+ const initialIsOriginal = initialSelection && !initialIsCustom;
+ setSource(initialIsCustom ? "custom" : initialIsOriginal ? "original" : "custom");
+ setCustomSelection(initialIsCustom ? initialSelection : "");
+ setOriginalSelection(initialIsOriginal ? initialSelection : "");
+ setCustomPath(initialIsCustom ? deriveCustomImgDirectory(initialSelection) : "");
+ }, [initialSelection, open]);
+
+ useEffect(() => {
+ if (!open || source !== "original") return;
+ const loadOriginalImages = async () => {
+ try {
+ const response = await api.apiGetTeddyCloudApiRaw("/api/toniesJson");
+ if (!response.ok) return;
+ const data = await response.json();
+ const normalized = Array.isArray(data) ? data : [];
+ const pics = normalized
+ .flatMap((entry: any) => [
+ typeof entry?.pic === "string" ? entry.pic : "",
+ typeof entry?.picture === "string" ? entry.picture : "",
+ typeof entry?.tonieInfo?.picture === "string" ? entry.tonieInfo.picture : "",
+ typeof entry?.sourceInfo?.picture === "string" ? entry.sourceInfo.picture : "",
+ ])
+ .map((pic: string) => normalizePreviewPath(pic))
+ .filter((pic: string) => pic.length > 0);
+ setOriginalImages(Array.from(new Set(pics)).sort((a, b) => a.localeCompare(b)));
+ } catch {
+ setOriginalImages([]);
+ }
+ };
+ void loadOriginalImages();
+ }, [open, source]);
+
+ const selectedImage = source === "custom" ? customSelection : originalSelection;
+
+ const canConfirm = useMemo(() => selectedImage.trim().length > 0, [selectedImage]);
+
+ return (
+ <>
+ {
+ if (!canConfirm) return;
+ onSelectImage(selectedImage);
+ onClose();
+ }}
+ okButtonProps={{ disabled: !canConfirm }}
+ okText={t("tonies.imageManager.okText")}
+ >
+
+
+ value={source}
+ options={[
+ { label: t("tonies.imageManager.sourceCustom"), value: "custom" },
+ { label: t("tonies.imageManager.sourceOriginal"), value: "original" },
+ ]}
+ onChange={(value) => setSource(value)}
+ />
+
+
+
+
+ );
+};
+
+export default ImageManagerModal;
diff --git a/src/components/tonies/filebrowser/modals/UploadFilesModal.tsx b/src/components/tonies/filebrowser/modals/UploadFilesModal.tsx
index 103c58ae..c3de40d8 100644
--- a/src/components/tonies/filebrowser/modals/UploadFilesModal.tsx
+++ b/src/components/tonies/filebrowser/modals/UploadFilesModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
import { Modal, Upload, Button, theme } from "antd";
import type { UploadFile, UploadProps } from "antd";
import { InboxOutlined } from "@ant-design/icons";
@@ -6,12 +6,29 @@ import { useTranslation } from "react-i18next";
import { TeddyCloudApi } from "../../../../api";
import { defaultAPIConfig } from "../../../../config/defaultApiConfig";
+import { UPLOAD_TIMEOUT_MS } from "../../../../constants/numbers";
import { useTeddyCloud } from "../../../../contexts/TeddyCloudContext";
import { NotificationTypeEnum } from "../../../../types/teddyCloudNotificationTypes";
const api = new TeddyCloudApi(defaultAPIConfig());
const { useToken } = theme;
+const normalizePathForQuery = (inputPath: string) => {
+ const raw = (inputPath || "").trim();
+ if (!raw) return "";
+ return raw
+ .split("/")
+ .filter((segment) => segment.length > 0)
+ .map((segment) => {
+ try {
+ return encodeURIComponent(decodeURIComponent(segment));
+ } catch {
+ return encodeURIComponent(segment);
+ }
+ })
+ .join("/");
+};
+
interface UploadFilesModalProps {
open: boolean;
onClose: () => void;
@@ -23,6 +40,7 @@ interface UploadFilesModalProps {
setUploadFileList: React.Dispatch[]>>;
setRebuildList: React.Dispatch>;
+ onUploadedFiles?: (files: string[], path: string, special: string) => void;
}
const UploadFilesModal: React.FC = ({
@@ -34,6 +52,7 @@ const UploadFilesModal: React.FC = ({
setUploadFileList,
setRebuildList,
+ onUploadedFiles,
}) => {
const { t } = useTranslation();
const { token } = useToken();
@@ -41,6 +60,13 @@ const UploadFilesModal: React.FC = ({
const [uploading, setUploading] = useState(false);
+ useEffect(() => {
+ // Ensure stale loading state is cleared when modal closes/reopens.
+ if (!open) {
+ setUploading(false);
+ }
+ }, [open]);
+
const uploadDraggerProps: UploadProps = {
name: "file",
multiple: true,
@@ -70,7 +96,10 @@ const UploadFilesModal: React.FC = ({
setUploading(true);
let failure = false;
+ const uploadedFileNames: string[] = [];
const key = "uploading-" + files.length + "-" + new Date();
+ const encodedPath = normalizePathForQuery(path);
+ const encodedSpecial = encodeURIComponent(special);
for (let i = 0; i < files.length; i++) {
const file = files[i];
@@ -81,16 +110,27 @@ const UploadFilesModal: React.FC = ({
);
const formData = new FormData();
- // antd UploadFile has originFileObj
- formData.append(file.name as string, file.originFileObj as Blob);
+ const originalBlob = file.originFileObj as Blob | undefined;
+ if (!originalBlob) {
+ failure = true;
+ setUploadFileList((prevList) =>
+ prevList.map((f) => (f.uid === file.uid ? { ...f, status: "error" } : f))
+ );
+ continue;
+ }
+ // Keep multipart field name stable; send original filename separately.
+ formData.append("file", originalBlob, file.name);
try {
- const response = await api.apiPostTeddyCloudFormDataRaw(
- `/api/fileUpload?path=${path}&special=${special}`,
- formData
- );
+ const response = await Promise.race([
+ api.apiPostTeddyCloudFormDataRaw(`/api/fileUpload?path=${encodedPath}&special=${encodedSpecial}`, formData),
+ new Promise((_, reject) =>
+ setTimeout(() => reject(new Error(`Upload timeout after ${UPLOAD_TIMEOUT_MS}ms`)), UPLOAD_TIMEOUT_MS)
+ ),
+ ]);
if (response.ok) {
setUploadFileList((prevList) => prevList.filter((f) => f.uid !== file.uid));
+ uploadedFileNames.push(file.name as string);
addNotification(
NotificationTypeEnum.Success,
t("fileBrowser.upload.uploadedFile"),
@@ -111,10 +151,11 @@ const UploadFilesModal: React.FC = ({
}
} catch (err) {
failure = true;
+ const errorMessage = err instanceof Error ? err.message : String(err);
addNotification(
NotificationTypeEnum.Error,
t("fileBrowser.upload.uploadedFileFailed"),
- t("fileBrowser.upload.uploadFailedForFile", { file: file.name }),
+ `${t("fileBrowser.upload.uploadFailedForFile", { file: file.name })} (${errorMessage})`,
t("fileBrowser.title")
);
setUploadFileList((prevList) =>
@@ -123,9 +164,12 @@ const UploadFilesModal: React.FC = ({
}
}
- closeLoadingNotification(key);
+ await closeLoadingNotification(key);
setRebuildList((prev) => !prev);
+ if (uploadedFileNames.length > 0 && onUploadedFiles) {
+ onUploadedFiles(uploadedFileNames, path, special);
+ }
if (failure) {
addNotification(
@@ -158,7 +202,14 @@ const UploadFilesModal: React.FC = ({
background: token.colorBgElevated,
}}
>
-
+
-
- {t("fileBrowser.hidden")}
-
-
- ) : (
- ""
- )}
-
- ),
+ width: 56,
+ render: (picture: string, record: any) => {
+ const src = getPictureSrc(record);
+ return (
+ <>
+ {record && src ? (
+
+
+ {t("fileBrowser.hidden")}
+
+
+ ) : null}
+
+ );
+ },
showOnDirOnly: false,
},
@@ -278,6 +307,7 @@ export const createColumns = (options: CreateColumnsOptions): any[] => {
dataIndex: "controls",
key: "controls",
sorter: undefined,
+ width: 100,
render: (name: string, record: any) => {
const actions: React.ReactNode[] = [];
@@ -422,7 +452,7 @@ export const createColumns = (options: CreateColumnsOptions): any[] => {
);
}
- if (special === "library" && record.name !== "..") {
+ if ((special === "library" || special === "custom_img") && record.name !== "..") {
if (!record.isDir && showRenameDialog) {
actions.push(
{actions}
;
},
showOnDirOnly: false,
};
diff --git a/src/components/tonies/filebrowser/hooks/useFileBrowserCore.tsx b/src/components/tonies/filebrowser/hooks/useFileBrowserCore.tsx
index d69b482e..632354d8 100644
--- a/src/components/tonies/filebrowser/hooks/useFileBrowserCore.tsx
+++ b/src/components/tonies/filebrowser/hooks/useFileBrowserCore.tsx
@@ -129,11 +129,31 @@ export const useFileBrowserCore = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [overlay]);
- // fetch directory listing
+ // fetch directory listing (SWR for custom_img: show cache first, revalidate in background)
useEffect(() => {
- setLoading(true);
-
const apiPathParam = mode === "fileBrowser" ? path : encodeURIComponent(path);
+ const cacheKey = `fileIndexV2:${special}:${overlay || ""}:${apiPathParam}:${showDirOnly}:${filetypeFilter.join(",")}`;
+ const useSwr = special === "custom_img";
+
+ let hadCache = false;
+ if (useSwr) {
+ try {
+ const cached = sessionStorage.getItem(cacheKey);
+ if (cached) {
+ const parsed = JSON.parse(cached) as Record[];
+ if (Array.isArray(parsed)) {
+ setFiles(parsed);
+ setLoading(false);
+ hadCache = true;
+ }
+ }
+ } catch {
+ /* ignore parse errors */
+ }
+ }
+ if (!hadCache) {
+ setLoading(true);
+ }
api.apiGetTeddyCloudApiRaw(
`/api/fileIndexV2?path=${apiPathParam}&special=${special}` + (overlay ? `&overlay=${overlay}` : "")
@@ -163,6 +183,14 @@ export const useFileBrowserCore = ({
});
setFiles(filteredList);
+
+ if (useSwr) {
+ try {
+ sessionStorage.setItem(cacheKey, JSON.stringify(filteredList));
+ } catch {
+ /* ignore quota errors */
+ }
+ }
})
.catch((error: any) => {
// If the requested path is invalid/unavailable -> go back to root
@@ -285,6 +313,9 @@ export const useFileBrowserCore = ({
};
const defaultSorter = (a: any, b: any, dataIndex: string | string[]) => {
+ if (a?.name === "..") return -1;
+ if (b?.name === "..") return 1;
+
const fieldA = Array.isArray(dataIndex) ? getFieldValue(a, dataIndex) : a[dataIndex];
const fieldB = Array.isArray(dataIndex) ? getFieldValue(b, dataIndex) : b[dataIndex];
@@ -301,6 +332,8 @@ export const useFileBrowserCore = ({
};
const dirNameSorter = (a: any, b: any) => {
+ if (a?.name === "..") return -1;
+ if (b?.name === "..") return 1;
if (a.isDir === b.isDir) return defaultSorter(a, b, "name");
return a.isDir ? -1 : 1;
};
diff --git a/src/components/tonies/filebrowser/modals/ImageManagerModal.tsx b/src/components/tonies/filebrowser/modals/ImageManagerModal.tsx
new file mode 100644
index 00000000..5e2f97ed
--- /dev/null
+++ b/src/components/tonies/filebrowser/modals/ImageManagerModal.tsx
@@ -0,0 +1,202 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Empty, List, Modal, Segmented, Space } from "antd";
+import { useTranslation } from "react-i18next";
+
+import { TeddyCloudApi } from "../../../../api";
+import { defaultAPIConfig } from "../../../../config/defaultApiConfig";
+import { IMAGE_EXTENSIONS } from "../../../../constants/fileTypes";
+import { SelectFileFileBrowser } from "../SelectFileFileBrowser";
+
+const api = new TeddyCloudApi(defaultAPIConfig());
+
+type ImageSource = "custom" | "original";
+
+const normalizeDirPath = (value: string) => value.replace(/^\/+/, "").replace(/\/+$/, "");
+
+const deriveCustomImgDirectory = (pic?: string): string => {
+ if (!pic || !pic.startsWith("/custom_img/")) return "";
+ const normalized = pic.slice("/custom_img/".length);
+ const segments = normalized.split("/").filter(Boolean);
+ if (segments.length <= 1) return "";
+ return segments.slice(0, -1).join("/");
+};
+
+const toCustomImgWebPath = (path: string, fileName: string) => {
+ const normalizedPath = normalizeDirPath(path);
+ return normalizedPath ? `/custom_img/${normalizedPath}/${fileName}` : `/custom_img/${fileName}`;
+};
+
+const isCustomImagePath = (path?: string) => !!path && path.startsWith("/custom_img/");
+
+const normalizePreviewPath = (value?: string) => {
+ const raw = (value || "").trim();
+ if (!raw) return "";
+ if (/^(https?:\/\/|data:|blob:)/i.test(raw)) return raw;
+ if (raw.startsWith("/")) return raw;
+ if (raw.startsWith("custom_img/")) return `/${raw}`;
+ if (raw.startsWith("img/")) return `/${raw}`;
+ return raw;
+};
+
+interface ImageManagerModalProps {
+ open: boolean;
+ onClose: () => void;
+ onSelectImage: (path: string) => void;
+ initialSelection?: string;
+ title?: string;
+}
+
+export const ImageManagerModal: React.FC
+ {
+ setCustomPath(path);
+ if (files.length === 0) return;
+ setCustomSelection(toCustomImgWebPath(path, files[0].name));
+ }}
+ onUploadedFiles={(files, path) => {
+ if (files.length > 0) {
+ setSource("custom");
+ setCustomSelection(toCustomImgWebPath(path, files[0]));
+ }
+ }}
+ />
+
+
+ {originalImages.length === 0 ? (
+
+ - (
+