saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-08-26 14:19:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dynamic upload/add files button for toolstep

Browse Source
This commit is contained in:
Connor Yoh 2025-08-25 15:33:19 +01:00
parent e6f4cfb318
commit 12472b9b33
2 changed files with 107 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/public/locales/en-GB/translation.json
View File

@ -48,7 +48,11 @@
"filesSelected": "{{count}} files selected",
"files": {
"title": "Files",
"placeholder": "Select a PDF file in the main view to get started"
"placeholder": "Select a PDF file in the main view to get started",
"upload": "Upload",
"addFiles": "Add files",
"noFiles": "No files uploaded. ",
"selectFromWorkbench": "Select files from the workbench or "
},
"noFavourites": "No favourites added",
"downloadComplete": "Download Complete",

130
frontend/src/components/tools/shared/FileStatusIndicator.tsx
View File

@ -1,9 +1,12 @@
import React from "react";
import React, { useState, useEffect } from "react";
import { Text, Anchor } from "@mantine/core";
import { useTranslation } from "react-i18next";
import FolderIcon from '@mui/icons-material/Folder';
import UploadIcon from '@mui/icons-material/Upload';
import AddIcon from '@mui/icons-material/Add';
import { useFilesModalContext } from "../../../contexts/FilesModalContext";
import { useAllFiles } from "../../../contexts/FileContext";
import { useFileManager } from "../../../hooks/useFileManager";
export interface FileStatusIndicatorProps {
selectedFiles?: File[];
@ -15,41 +18,112 @@ const FileStatusIndicator = ({
placeholder,
}: FileStatusIndicatorProps) => {
const { t } = useTranslation();
const { openFilesModal } = useFilesModalContext();
const { openFilesModal, onFilesSelect } = useFilesModalContext();
const { files: workbenchFiles } = useAllFiles();
const { loadRecentFiles } = useFileManager();
const [hasRecentFiles, setHasRecentFiles] = useState<boolean | null>(null);
// Check if there are recent files
useEffect(() => {
const checkRecentFiles = async () => {
try {
const recentFiles = await loadRecentFiles();
setHasRecentFiles(recentFiles.length > 0);
} catch (error) {
setHasRecentFiles(false);
}
};
checkRecentFiles();
}, [loadRecentFiles]);
// Handle native file picker
const handleNativeUpload = () => {
const input = document.createElement('input');
input.type = 'file';
input.multiple = true;
input.accept = '.pdf,application/pdf';
input.onchange = (event) => {
const files = Array.from((event.target as HTMLInputElement).files || []);
if (files.length > 0) {
onFilesSelect(files);
}
};
input.click();
};
// Don't render until we know if there are recent files
if (hasRecentFiles === null) {
return null;
}
// Check if there are no files in the workbench
if (workbenchFiles.length === 0) {
return (
<Text size="sm" c="dimmed">
{t("files.noFiles", "No files uploaded. ")}{" "}
<Anchor
size="sm"
onClick={openFilesModal}
style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
>
<FolderIcon style={{ fontSize: '14px' }} />
{t("files.addFiles", "Add files")}
</Anchor>
</Text>
);
// If no recent files, show upload button
if (!hasRecentFiles) {
return (
<Text size="sm" c="dimmed">
{t("files.noFiles", "No files uploaded. ")}{" "}
<Anchor
size="sm"
onClick={handleNativeUpload}
style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
>
<UploadIcon style={{ fontSize: '0.875rem' }} />
{t("files.upload", "Upload")}
</Anchor>
</Text>
);
} else {
// If there are recent files, show add files button
return (
<Text size="sm" c="dimmed">
{t("files.noFiles", "No files uploaded. ")}{" "}
<Anchor
size="sm"
onClick={openFilesModal}
style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
>
<AddIcon style={{ fontSize: '0.875rem' }} />
{t("files.addFiles", "Add files")}
</Anchor>
</Text>
);
}
}
// Show selection status when there are files in workbench
if (selectedFiles.length === 0) {
return (
<Text size="sm" c="dimmed">
{t("files.selectFromWorkbench", "Select files from the workbench or ") + " "}
<Anchor
size="sm"
onClick={openFilesModal}
style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
>
<FolderIcon style={{ fontSize: '14px' }} />
{t("files.addFiles", "Add files")}
</Anchor>
</Text>
);
// If no recent files, show upload option
if (!hasRecentFiles) {
return (
<Text size="sm" c="dimmed">
{t("files.selectFromWorkbench", "Select files from the workbench or ") + " "}
<Anchor
size="sm"
onClick={handleNativeUpload}
style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
>
<UploadIcon style={{ fontSize: '0.875rem' }} />
{t("files.upload", "Upload")}
</Anchor>
</Text>
);
} else {
// If there are recent files, show add files option
return (
<Text size="sm" c="dimmed">
{t("files.selectFromWorkbench", "Select files from the workbench or ") + " "}
<Anchor
size="sm"
onClick={openFilesModal}
style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
>
<AddIcon style={{ fontSize: '0.875rem' }} />
{t("files.addFiles", "Add files")}
</Anchor>
</Text>
);
}
}
return (