2025-06-05 11:12:39 +01:00
|
|
|
import { FileWithUrl } from "../types/file";
|
|
|
|
import { StoredFile, fileStorage } from "../services/fileStorage";
|
|
|
|
|
Feature/v2/multiselect (#4024)
# Description of Changes
This pull request introduces significant updates to the file selection
logic, tool rendering, and file context management in the frontend
codebase. The changes aim to improve modularity, enhance
maintainability, and streamline the handling of file-related operations.
Key updates include the introduction of a new `FileSelectionContext`,
refactoring of file selection logic, and updates to tool management and
rendering.
### File Selection Context and Logic Refactor:
* Added a new `FileSelectionContext` to centralize file selection state
and provide utility hooks for managing selected files, selection limits,
and tool mode. (`frontend/src/contexts/FileSelectionContext.tsx`,
[frontend/src/contexts/FileSelectionContext.tsxR1-R77](diffhunk://#diff-bda35f1aaa5eafa0a0dc48e0b1270d862f6da360ba1241234e891f0ca8907327R1-R77))
* Replaced local file selection logic in `FileEditor` with context-based
logic, improving consistency and reducing duplication.
(`frontend/src/components/fileEditor/FileEditor.tsx`,
[[1]](diffhunk://#diff-481d0a2d8a1714d34d21181db63a020b08dfccfbfa80bf47ac9af382dff25310R63-R70)
[[2]](diffhunk://#diff-481d0a2d8a1714d34d21181db63a020b08dfccfbfa80bf47ac9af382dff25310R404-R438)
### Tool Management and Rendering:
* Refactored `ToolRenderer` to use a `Suspense` fallback for lazy-loaded
tools, improving user experience during tool loading.
(`frontend/src/components/tools/ToolRenderer.tsx`,
[frontend/src/components/tools/ToolRenderer.tsxL32-L64](diffhunk://#diff-2083701113aa92cd1f5ce1b4b52cc233858e31ed7bcf39c5bfb1bcc34e99b6a9L32-L64))
* Simplified `ToolPicker` by reusing the `ToolRegistry` type, reducing
redundancy. (`frontend/src/components/tools/ToolPicker.tsx`,
[frontend/src/components/tools/ToolPicker.tsxL4-R4](diffhunk://#diff-e47deca9132018344c159925f1264794acdd57f4b65e582eb9b2a4ea69ec126dL4-R4))
### File Context Enhancements:
* Introduced a utility function `getFileId` for consistent file ID
extraction, replacing repetitive inline logic.
(`frontend/src/contexts/FileContext.tsx`,
[[1]](diffhunk://#diff-95b3d103fa434f81fdae55f2ea14eda705f0def45a0f2c5754f81de6f2fd93bcR25)
[[2]](diffhunk://#diff-95b3d103fa434f81fdae55f2ea14eda705f0def45a0f2c5754f81de6f2fd93bcL101-R102)
* Updated `FileContextProvider` to use more specific types for PDF
documents, enhancing type safety.
(`frontend/src/contexts/FileContext.tsx`,
[[1]](diffhunk://#diff-95b3d103fa434f81fdae55f2ea14eda705f0def45a0f2c5754f81de6f2fd93bcL350-R351)
[[2]](diffhunk://#diff-95b3d103fa434f81fdae55f2ea14eda705f0def45a0f2c5754f81de6f2fd93bcL384-R385)
### Compression Tool Enhancements:
* Added blob URL cleanup logic to the compression hook to prevent memory
leaks. (`frontend/src/hooks/tools/compress/useCompressOperation.ts`,
[frontend/src/hooks/tools/compress/useCompressOperation.tsR58-L66](diffhunk://#diff-d7815fea0e89989511ae1786f7031cba492b9f2db39b7ade92d9736d1bd4b673R58-L66))
* Adjusted file ID generation in the compression operation to handle
multiple files more effectively.
(`frontend/src/hooks/tools/compress/useCompressOperation.ts`,
[frontend/src/hooks/tools/compress/useCompressOperation.tsL90-R102](diffhunk://#diff-d7815fea0e89989511ae1786f7031cba492b9f2db39b7ade92d9736d1bd4b673L90-R102))
---
## Checklist
### General
- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings
### Documentation
- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)
### UI Changes (if applicable)
- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)
### Testing (if applicable)
- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.
2025-07-25 09:37:52 +01:00
|
|
|
export function getFileId(file: File): string {
|
|
|
|
return (file as File & { id?: string }).id || file.name;
|
|
|
|
}
|
|
|
|
|
2025-06-05 11:12:39 +01:00
|
|
|
/**
|
|
|
|
* Consolidated file size formatting utility
|
|
|
|
*/
|
|
|
|
export function 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(2)) + ' ' + sizes[i];
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get file date as string
|
|
|
|
*/
|
|
|
|
export function getFileDate(file: File): string {
|
|
|
|
if (file.lastModified) {
|
|
|
|
return new Date(file.lastModified).toLocaleString();
|
|
|
|
}
|
|
|
|
return "Unknown";
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get file size as string (legacy method for backward compatibility)
|
|
|
|
*/
|
|
|
|
export function getFileSize(file: File): string {
|
|
|
|
if (!file.size) return "Unknown";
|
|
|
|
return formatFileSize(file.size);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Create enhanced file object from stored file metadata
|
|
|
|
* This eliminates the repeated pattern in FileManager
|
|
|
|
*/
|
|
|
|
export function createEnhancedFileFromStored(storedFile: StoredFile, thumbnail?: string): FileWithUrl {
|
|
|
|
const enhancedFile: FileWithUrl = {
|
|
|
|
id: storedFile.id,
|
|
|
|
storedInIndexedDB: true,
|
|
|
|
url: undefined, // Don't create blob URL immediately to save memory
|
|
|
|
thumbnail: thumbnail || storedFile.thumbnail,
|
|
|
|
// File metadata
|
|
|
|
name: storedFile.name,
|
|
|
|
size: storedFile.size,
|
|
|
|
type: storedFile.type,
|
|
|
|
lastModified: storedFile.lastModified,
|
|
|
|
// Lazy-loading File interface methods
|
|
|
|
arrayBuffer: async () => {
|
|
|
|
const data = await fileStorage.getFileData(storedFile.id);
|
|
|
|
if (!data) throw new Error(`File ${storedFile.name} not found in IndexedDB - may have been purged`);
|
|
|
|
return data;
|
|
|
|
},
|
|
|
|
slice: (start?: number, end?: number, contentType?: string) => {
|
|
|
|
// Return a promise-based slice that loads from IndexedDB
|
|
|
|
return new Blob([], { type: contentType || storedFile.type });
|
|
|
|
},
|
|
|
|
stream: () => {
|
|
|
|
throw new Error('Stream not implemented for IndexedDB files');
|
|
|
|
},
|
|
|
|
text: async () => {
|
|
|
|
const data = await fileStorage.getFileData(storedFile.id);
|
|
|
|
if (!data) throw new Error(`File ${storedFile.name} not found in IndexedDB - may have been purged`);
|
|
|
|
return new TextDecoder().decode(data);
|
|
|
|
}
|
|
|
|
} as FileWithUrl;
|
|
|
|
|
|
|
|
return enhancedFile;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Load files from IndexedDB and convert to enhanced file objects
|
|
|
|
*/
|
|
|
|
export async function loadFilesFromIndexedDB(): Promise<FileWithUrl[]> {
|
|
|
|
try {
|
|
|
|
await fileStorage.init();
|
|
|
|
const storedFiles = await fileStorage.getAllFileMetadata();
|
|
|
|
|
|
|
|
if (storedFiles.length === 0) {
|
|
|
|
return [];
|
|
|
|
}
|
|
|
|
|
|
|
|
const restoredFiles: FileWithUrl[] = storedFiles
|
|
|
|
.filter(storedFile => {
|
|
|
|
// Filter out corrupted entries
|
|
|
|
return storedFile &&
|
|
|
|
storedFile.name &&
|
|
|
|
typeof storedFile.size === 'number';
|
|
|
|
})
|
|
|
|
.map(storedFile => {
|
|
|
|
try {
|
|
|
|
return createEnhancedFileFromStored(storedFile);
|
|
|
|
} catch (error) {
|
|
|
|
console.error('Failed to restore file:', storedFile?.name || 'unknown', error);
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.filter((file): file is FileWithUrl => file !== null);
|
|
|
|
|
|
|
|
return restoredFiles;
|
|
|
|
} catch (error) {
|
|
|
|
console.error('Failed to load files from IndexedDB:', error);
|
|
|
|
return [];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Clean up blob URLs from file objects
|
|
|
|
*/
|
|
|
|
export function cleanupFileUrls(files: FileWithUrl[]): void {
|
|
|
|
files.forEach(file => {
|
|
|
|
if (file.url && !file.url.startsWith('indexeddb:')) {
|
|
|
|
URL.revokeObjectURL(file.url);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Check if file should use blob URL or IndexedDB direct access
|
|
|
|
*/
|
|
|
|
export function shouldUseDirectIndexedDBAccess(file: FileWithUrl): boolean {
|
|
|
|
const FILE_SIZE_LIMIT = 100 * 1024 * 1024; // 100MB
|
|
|
|
return file.size > FILE_SIZE_LIMIT;
|
|
|
|
}
|