mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-11-16 01:21:16 +01:00
7e3321ee16
FileManager Component Overview
Purpose: Modal component for selecting and managing PDF files with
preview capabilities
Architecture:
- Responsive Layouts: MobileLayout.tsx (stacked) vs DesktopLayout.tsx
(3-column)
- Central State: FileManagerContext handles file operations, selection,
and modal state
- File Storage: IndexedDB persistence with thumbnail caching
Key Components:
- FileSourceButtons: Switch between Recent/Local/Drive sources
- FileListArea: Scrollable file grid with search functionality
- FilePreview: PDF thumbnails with dynamic shadow stacking (1-2 shadow
pages based on file count)
- FileDetails: File info card with metadata
- CompactFileDetails: Mobile-optimized file info layout
File Flow:
1. Users select source → browse/search files → select multiple files →
preview with navigation → open in
tools
2. Files persist across tool switches via FileContext integration
3. Memory management handles large PDFs (up to 100GB+)
```mermaid
graph TD
FM[FileManager] --> ML[MobileLayout]
FM --> DL[DesktopLayout]
ML --> FSB[FileSourceButtons<br/>Recent/Local/Drive]
ML --> FLA[FileListArea]
ML --> FD[FileDetails]
DL --> FSB
DL --> FLA
DL --> FD
FLA --> FLI[FileListItem]
FD --> FP[FilePreview]
FD --> CFD[CompactFileDetails]
```
---------
Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
20 lines
470 B
TypeScript
20 lines
470 B
TypeScript
import React from 'react';
|
|
import { useFileManagerContext } from '../../contexts/FileManagerContext';
|
|
|
|
const HiddenFileInput: React.FC = () => {
|
|
const { fileInputRef, onFileInputChange } = useFileManagerContext();
|
|
|
|
return (
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
multiple={true}
|
|
accept="*/*"
|
|
onChange={onFileInputChange}
|
|
style={{ display: 'none' }}
|
|
data-testid="file-input"
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default HiddenFileInput; |