Skip to main content

​
Overview

Proton Drive is a secure cloud storage application providing end-to-end encrypted file storage, sharing, and collaboration. It features advanced file management, photos backup, and real-time sync capabilities.
Package name: proton-drive | Version: 5.2.0 | License: GPL-3.0

​
Features

Encrypted Storage

End-to-end encrypted file and folder storage

File Sharing

Secure link sharing with password protection

Photos Backup

Automatic photo backup and organization

Document Preview

In-browser preview for various file types

Version History

File revision tracking and restoration

Offline Access

Download manager with offline capabilities

Encrypted Search

Client-side encrypted file search

Web Streams

Streaming upload/download for large files

​
Architecture

​
Directory Structure

drive/src/app/
├── components/          # Reusable UI components
├── containers/          # Container components
├── modals/              # Modal dialogs (25+ modals)
├── sections/            # Major app sections (15 sections)
├── store/               # Redux store modules (24 modules)
│   ├── _links/          # Share link management
│   ├── _shares/         # Shared drive management
│   ├── _volumes/        # Volume management
│   ├── _photos/         # Photos functionality
│   ├── _documents/      # Document handling
│   ├── _downloads/      # Download manager
│   ├── _uploads/        # Upload manager
│   ├── _search/         # Search functionality
│   └── _crypto/         # Cryptographic operations
├── zustand/             # Zustand state stores
├── utils/               # Utility functions (10+ modules)
├── photos/              # Photos app specific code
└── managers/            # File operation managers

​
State Management

Proton Drive uses a hybrid state management approach:
  • Redux Toolkit (@reduxjs/toolkit) for global app state
  • Zustand v4 for local component state
  • IndexedDB (via idb and idb-keyval) for offline storage

​
Key Dependencies

{
  "dependencies": {
    "react": "^18.3.1",
    "react-router-dom": "^5.3.4",
    "react-router-dom-v5-compat": "^6.30.3",
    "@reduxjs/toolkit": "^2.11.2",
    "@proton/components": "workspace:^",
    "@proton/drive": "workspace:^",
    "@proton/crypto": "workspace:^",
    "@openpgp/web-stream-tools": "^0.1.0",
    "web-streams-polyfill": "^4.2.0",
    "client-zip": "^2.5.0",
    "idb": "^8.0.3",
    "idb-keyval": "^6.2.2",
    "exifreader": "^4.36.1",
    "heic-to": "^1.4.2",
    "comlink": "^4.4.2",
    "@tanstack/react-virtual": "^3.13.18",
    "zustand": "^4.5.7",
    "uuid": "^13.0.0"
  }
}

​
Notable Libraries

  • web-streams-polyfill - Web Streams API for browsers
  • @openpgp/web-stream-tools - Streaming encryption/decryption
  • client-zip - Client-side ZIP creation
  • idb - IndexedDB wrapper for offline storage
  • exifreader - EXIF metadata extraction from photos
  • heic-to - HEIC/HEIF image conversion
  • comlink - Web Worker communication
  • @tanstack/react-virtual - Virtual scrolling for large lists

​
NPM Scripts

​
Development

# Start development server
yarn start

# Full command
proton-pack dev-server --appMode=standalone \
  --handleSupportAndErrors \
  --optimizeAssets \
  --noLogicalScss

​
Build

# Production build
yarn build:web

# Analyze bundle size
yarn analyze
Build flags: --handleSupportAndErrors --optimizeAssets --noLogicalScss

​
Testing

# Run tests
yarn test

# Run tests in CI mode
yarn test:ci

# Watch mode
yarn test:watch

​
Code Quality

# Type checking
yarn check-types

# Linting
yarn lint

# Format code
yarn pretty

​
Internationalization

# Extract translations locally (requires build)
yarn i18n:extract:local

# Extract for web
yarn i18n:extract:web

# Get latest translations
yarn i18n:getlatest

# Upload to Crowdin
yarn i18n:upgrade

# Validate translations
yarn i18n:validate

​
Store Modules

Proton Drive has 24 Redux store modules (prefixed with _):
ModulePurpose
_actionsAction creators
_linksShare link management
_sharesShared drive spaces
_volumesStorage volumes
_photosPhoto library management
_documentsDocument handling
_downloadsDownload queue and manager
_uploadsUpload queue and manager
_searchEncrypted search
_cryptoEncryption/decryption
_revisionsFile version history
_devicesDevice management
_bookmarksBookmarked files/folders
_invitationsShare invitations
_eventsEvent sourcing
_settingsUser preferences
_userUser state
_viewsView configurations
_transferTransfer management
_sanitizationContent sanitization

​
Special Features

​
Streaming Upload/Download

Drive uses Web Streams API for efficient file transfers: 
import { ReadableStream } from 'web-streams-polyfill';
import { createReadableStream } from '@openpgp/web-stream-tools';
import { pipeTo } from '@mattiasbuelens/web-streams-adapter';
  • Stream encryption/decryption on-the-fly
  • Memory-efficient for large files
  • Progress tracking
  • Pause/resume capability

​
Photos App

Dedicated photos functionality: 
photos/
├── PhotosView.tsx
├── PhotoGrid.tsx
├── PhotoViewer.tsx
└── components/
  • EXIF metadata extraction
  • Automatic photo organization
  • HEIC/HEIF support
  • Thumbnail generation

​
File Preview

In-browser file preview:
  • PDF rendering
  • Image preview
  • Video playback
  • Document preview (via preview-sandbox)

​
Version Control

File revision management via _revisions store:
  • Track file changes
  • Restore previous versions
  • Version comparison
  • History timeline

​
Offline Support

IndexedDB-based offline storage: 
import { set, get } from 'idb-keyval';
  • Cache file metadata
  • Offline file access
  • Sync on reconnection

​
Advanced Features

​
Web Workers

Uses Comlink for Web Worker communication: 
import { wrap } from 'comlink';

// Offload crypto operations to workers
// Background file processing

​
Virtual Scrolling

Efficient rendering of large file lists: 
import { useVirtualizer } from '@tanstack/react-virtual';

// Render only visible rows
// Smooth scrolling with thousands of items

​
Client-Side ZIP

Create ZIP files in-browser: 
import { downloadZip } from 'client-zip';

// Bundle multiple files
// Stream ZIP creation
// No server-side processing

​
Modals

Drive has 25+ modal dialogs:
  • File/folder creation
  • Sharing modals
  • Preview modals
  • Settings dialogs
  • Confirmation modals

​
Sections

Major application sections (15 total):
  • File browser
  • Photos view
  • Shared with me
  • Trash
  • Settings
  • Device management
  • etc.

​
Zustand Stores

Local state management with Zustand: 
zustand/
├── useFileUpload.ts
├── useDownloadQueue.ts
├── usePhotoView.ts
└── README.md
See zustand/README.md for store documentation

​
URLs App

Separate entry point for shared links: 
// urls.tsx - Public share link viewer
import UrlsApp from './UrlsApp';

​
Performance Optimizations

  • Code Splitting - Dynamic imports for modals and sections
  • Virtual Scrolling - Only render visible file list items
  • Web Workers - Offload crypto and processing
  • Streaming - Memory-efficient large file handling
  • IndexedDB Caching - Offline-first architecture
  • Asset Optimization - --optimizeAssets flag

​
Build Flags

Special build configuration: 
--appMode=sso              # SSO integration
--handleSupportAndErrors   # Error handling
--optimizeAssets          # Asset optimization
--noLogicalScss           # Disable logical CSS
  • docs - Proton Docs integration
  • docs-editor - Document editing
  • preview-sandbox - Sandboxed file preview

​
Development Notes

Drive requires --noLogicalScss flag due to custom CSS handling.
Use yarn analyze to inspect bundle size and optimize imports.

​
Local Development

  1. Start dev server: yarn start
  2. Access at http://localhost:8080
  3. File operations are encrypted client-side

​
Architecture Documentation

See store/architecture.md for detailed store architecture documentation.

Build docs developers (and LLMs) love

Get started for freeTalk to us