Document Repository

Manage all program documents through an integrated Google Drive file browser with upload, organization, and search capabilities.

Overview

The Document Repository provides a unified interface to access, organize, and manage all Master’s program documentation stored in Google Drive.

Key Features

Drive Integration

Direct connection to Google Drive with real-time sync

File Browser

Navigate folder structures with breadcrumb navigation

Bulk Upload

Upload multiple files simultaneously with progress tracking

Universal Search

Search files and folders across the entire repository

Repository Home

Interface Layout

alt=“Repository interface with sidebar and file grid” /> The repository interface consists of:

Top Navigation Bar
- Breadcrumb navigation
- Search bar
- New folder button
- Refresh button
- View mode toggle (grid/list)
- Upload button
Left Sidebar (Desktop only)
- Folder tree navigation
- Expandable/collapsible folders
- Current location highlight
Main Content Area
- File and folder cards (grid view)
- File and folder rows (list view)
- Selection checkboxes

View Modes

Grid View
List View

Large file icons
File thumbnails (for images/PDFs)
Best for visual browsing

const [viewMode, setViewMode] = useState(
  localStorage.getItem('repoViewMode') || 'grid'
);

The breadcrumb shows your current location:

🏠 Google Drive > Estudiantes > 2024-1 > EST-2024-01-001

Click any level to jump to that folder
Home icon returns to root
Current location is highlighted in blue

Expand folders to see nested structure:

▶️ Click arrow to expand
▼ Click arrow to collapse
📁 Click folder name to navigate
Current folder has blue background

The folder tree loads dynamically. Only visible folders are expanded to improve performance.

File Management

Uploading Files

Click Upload Button

Located in top-right corner with cloud upload icon

Select Files

Drag and drop or click to browse (multi-select supported)

Monitor Progress

Progress bar shows upload status for each file

Automatic Refresh

File list refreshes automatically when upload completes

alt=“File upload modal with progress bars” /> Features:

Multiple file selection
Drag-and-drop zone
Individual progress bars
Cancel option per file
Success/error indicators

// Upload to current folder
const handleUpload = async (files) => {
  for (const file of files) {
    await api.drive.uploadFile(currentFolder.id, file);
  }
  handleRefresh();
};

Creating Folders

Click New Folder

Plus icon in the toolbar

Enter Name

Popup dialog requests folder name

Confirm

Folder is created in current location

Folder names must be unique within the same parent folder. Duplicate names will show an error.

File Actions

Hover over any file or folder to reveal action buttons:

Icon	Action	Description
👁️	Preview	View file preview (images, PDFs)
⬇️	Download	Download file to your computer
🔗	Copy Link	Copy shareable Drive link
📂	Open in Drive	Open file in Google Drive web interface
🗑️	Delete	Move file to Drive trash

Bulk Selection

Enable Selection

Click checkboxes on files/folders

Selection Counter

Top-right shows “X seleccionados”

Bulk Actions

Delete button appears in toolbar

Clear Selection

Click X or refresh page

alt=“Multiple files selected with action bar” />

Search Functionality

Universal Search

The search bar performs universal search across:

File names
Folder names
File contents (for supported types)
Metadata

const handleSearch = async () => {
  const results = await api.drive.searchUniversal(searchQuery);
  const foundFiles = results.filter(item => item.type === 'file');
  const foundFolders = results.filter(item => item.type === 'folder');
  
  setFiles(foundFiles);
  setFolders(foundFolders);
};

Search Results

Search results show:

File/Folder Name: Highlighted matches
Parent Folder Path: Where the file is located
Last Modified: Date timestamp
File Type: Icon indicator

Press Enter or click the search icon to trigger search. Results update in real-time as you type (500ms debounce).

Clearing Search

Click the X button in the search bar to:

Clear search query
Return to current folder view
Reset filters

File Types & Icons

Supported File Types

The repository recognizes and displays icons for:

const fileIcons = {
  // Documents
  'pdf': <FilePdf />,
  'doc': <FileWord />,
  'docx': <FileWord />,
  
  // Spreadsheets
  'xls': <FileExcel />,
  'xlsx': <FileExcel />,
  'csv': <FileSpreadsheet />,
  
  // Presentations
  'ppt': <FilePowerpoint />,
  'pptx': <FilePowerpoint />,
  
  // Images
  'jpg': <FileImage />,
  'jpeg': <FileImage />,
  'png': <FileImage />,
  'gif': <FileImage />,
  
  // Archives
  'zip': <FileArchive />,
  'rar': <FileArchive />,
  
  // Default
  'default': <File />
};

File Thumbnails

For image files and PDFs, the system displays thumbnails:

Auto-generated from Drive API
200x200px preview size
Cached for performance

Folder Structure

Recommended Organization

📁 Google Drive (Root)
├── 📁 Estudiantes/
│   ├── 📁 2024-1/
│   │   ├── 📁 EST-2024-01-001/
│   │   ├── 📁 EST-2024-01-002/
│   │   └── ...
│   └── 📁 2024-2/
│       └── ...
├── 📁 Docentes/
│   ├── 📁 DOC-2024-01-001/
│   └── ...
├── 📁 Tesis/
│   ├── 📁 2024/
│   │   ├── 📁 [Student Name] - TES-2024-01-001/
│   │   └── ...
│   └── 📁 2023/
│       └── ...
├── 📁 Eventos/
│   ├── 📁 Seminarios/
│   ├── 📁 Congresos/
│   └── ...
└── 📁 Administrativo/
    ├── 📁 Actas/
    ├── 📁 Resoluciones/
    └── ...

Auto-Created Folders

The system automatically creates folders when:

A new student is registered (with toggle enabled)
A new teacher is added
A new thesis is created
An event is scheduled

Auto-created folders follow naming conventions based on entity type and ID.

Folder Explorer Component

The <FolderExplorer> component is used throughout the system:

<FolderExplorer
  folderId={formData.ID_Carpeta_Drive}
  folderUrl={formData.URL_Carpeta_Drive}
  entityType="estudiante"
  entityId={formData.ID_Estudiante}
  entityData={formData}
/>

Integration Points

Student forms (Documents tab)
Teacher forms
Thesis forms
Event forms
Standalone repository page

Refresh & Sync

Manual Refresh

Click the refresh button (🔄) to:

Reload current folder contents
Sync with Drive changes
Update folder tree
Clear cache

Automatic Refresh

The repository auto-refreshes after:

File upload completes
Folder is created
File/folder is deleted
Navigation to new folder

const handleRefresh = () => {
  if (currentFolder) {
    loadFolderContents(currentFolder.id);
  } else {
    loadRootFolder();
  }
  setTreeRefreshKey(prev => prev + 1); // Triggers tree reload
};

Performance Optimization

Lazy Loading

Folders load on-demand when expanded

Debounced Search

Search waits 500ms after typing stops

Cached Thumbnails

File previews are cached in browser

Parallel Requests

File list and folder tree load simultaneously

Loading States

alt=“Skeleton loaders for files and folders” />

Skeleton cards during load
Spinner icon on refresh button
Progress bars during upload

Error Handling

Common Errors

Error	Cause	Solution
No se pudo conectar con Drive	Drive API connection failed	Check internet connection and retry
Carpeta no encontrada	Folder was deleted or moved	Navigate back to parent folder
Permiso denegado	Insufficient Drive permissions	Contact system administrator
Archivo muy grande	File exceeds upload limit	Use Google Drive web interface for large files

If you see repeated connection errors, the Drive API credentials may need to be refreshed. Contact your system administrator.

Source Code Reference

Key components:

Repository home: Fronted/src/pages/repository/RepositoryHome.jsx:14
File manager: Fronted/src/pages/repository/FileManager.jsx
File uploader: Fronted/src/pages/repository/FileUploader.jsx
Folder tree: Fronted/src/pages/repository/FolderTree.jsx
Folder explorer: Fronted/src/components/common/FolderExplorer.jsx
Drive API: Backend/services/DriveManager.js

API Integration

The repository uses Google Drive API v3:

// Backend
api.drive = {
  getRootFolder: () => GET /api/drive/root,
  getFolderTree: (folderId, depth) => GET /api/drive/tree/${folderId},
  getFiles: (folderId) => GET /api/drive/files/${folderId},
  uploadFile: (folderId, file) => POST /api/drive/upload,
  createFolder: (parentId, name) => POST /api/drive/folder,
  deleteFile: (fileId) => DELETE /api/drive/file/${fileId},
  searchUniversal: (query) => GET /api/drive/search?q=${query}
}

Student Management

Access student document folders

Thesis Tracking

Manage thesis documents

Teacher Management

Access faculty documents

Get Started

Core Features

User Guides

Administration

​Overview

​Key Features

Drive Integration

File Browser

Bulk Upload

Universal Search

​Repository Home

​Interface Layout

​View Modes

​Navigation

​Breadcrumb Trail

​Folder Tree Sidebar

​File Management

​Uploading Files

​File Uploader Modal

​Creating Folders

​File Actions

​Bulk Selection

​Search Functionality

​Universal Search

​Search Results

​Clearing Search

​File Types & Icons

​Supported File Types

​File Thumbnails

​Folder Structure

​Recommended Organization

​Auto-Created Folders

​Folder Explorer Component

​Integration Points

​Refresh & Sync

​Manual Refresh

​Automatic Refresh

​Performance Optimization

Lazy Loading

Debounced Search

Cached Thumbnails

Parallel Requests

​Loading States

​Error Handling

​Common Errors

​Source Code Reference

​API Integration

​Related Features

Student Management

Thesis Tracking

Teacher Management

Build docs developers (and LLMs) love

Overview

Key Features

Repository Home

Interface Layout

View Modes

Navigation

Breadcrumb Trail

Folder Tree Sidebar

File Management

Uploading Files

File Uploader Modal

Creating Folders

File Actions

Bulk Selection

Search Functionality

Universal Search

Search Results

Clearing Search

File Types & Icons

Supported File Types

File Thumbnails

Folder Structure

Recommended Organization

Auto-Created Folders

Folder Explorer Component

Integration Points

Refresh & Sync

Manual Refresh

Automatic Refresh

Performance Optimization

Loading States

Error Handling

Common Errors

Source Code Reference

API Integration

Related Features