Nimbus-Drive

☁️ NimbusDrive

A fully client-side cloud storage experience — no servers, no accounts, no limits on privacy.

Built by Snake Arcade & daboiyoshi · Contact: info@daboiyoshi.com

---

Overview

NimbusDrive is a feature-complete, browser-based cloud storage application that works entirely in your browser using IndexedDB for persistent local storage. It looks, feels, and behaves like a real cloud drive — with folders, file uploads, drag & drop, starring, trash, and more — all without sending a single byte to a remote server.

Every file you upload is stored directly in your browser’s IndexedDB database and persists across page refreshes and browser restarts, just like a real drive.

---

Features

📁 File & Folder Management

• Create folders — via the + New button, the toolbar, or right-clicking empty space
• Upload files — click the Upload button or drag & drop files from your OS anywhere onto the page
• Rename — right-click any item and choose Rename, select and press F2, or use the Details panel
• Delete — moves items to Trash first; permanently delete from the Trash view
• Move items — drag files or folders directly into another folder, or use right-click → Move to…
• Star items — mark important files or folders with a star for quick access
• Create blank text files — via + New → New Text File
• Download files — double-click any file or use the right-click context menu to download it back to your device

🗂️ Navigation & Views

| View | Description | |——|————-| | My Drive | Your main file system, organized in folders | | Recent | The 50 most recently modified files across all folders | | Starred | All files and folders you’ve starred | | Trash | Items moved to trash; restore or permanently delete from here |

• Breadcrumb navigation — click any level to jump back up the folder tree
• Nested folders — create folders inside folders, drill down as deep as you need
• Search — the search bar filters files and folders in real-time across the current view

🖱️ Selection & Bulk Actions

• Single-click a file to select it and open the Details panel
• Ctrl/Cmd + click to multi-select individual items
• Ctrl/Cmd + A to select everything in the current view
• When multiple items are selected, a Selection Toolbar appears at the bottom with bulk actions:
  • Download, Star, Move, Delete, Deselect

🔃 Sorting & Display

• Grid view — icon-based card layout (default)
• List view — compact table layout with Name, Modified, Size, and Type columns
• Sort — cycle through sort modes by clicking the Sort button:
  • Name ↑ / Name ↓ / Size ↑ / Size ↓ / Date ↑ / Date ↓
• Folders always appear before files in sorted results

🌙 Dark / Light Mode

Toggle between dark and light themes with the moon/sun button in the top-right corner. The theme is applied instantly across the entire UI.

📦 Drag & Drop

• Drop files from your OS onto the NimbusDrive window at any time to upload them — a full-screen drop overlay confirms the action
• Drag file cards into folders to move them — the target folder highlights in green to confirm the drop
• Multi-selected items can all be dragged at once into a folder

🗑️ Trash System

• Deleting an item moves it to Trash (non-destructive by default)
• Trashing a folder automatically trashes all of its contents recursively
• From the Trash view you can:
  • Restore an item back to its original location
  • Delete Forever to permanently remove it from IndexedDB
• The right-click context menu in Trash switches to Restore / Delete Forever actions automatically

ℹ️ Details Panel

Clicking a file or folder opens a Details panel on the right side showing:

• File type and icon
• File size (formatted: B / KB / MB / GB)
• Created date & time
• Last modified date & time
• Starred status
• Location (folder path)
• Quick-action buttons: Download, Rename, Delete

💾 Storage Meter

The sidebar displays a live storage meter showing:

• How much of your 10 GB local quota is used
• How much space remains
• A color-coded progress bar (purple → amber → red as you fill up)

Storage is calculated in real-time after every upload or delete.

---

How It Works

Storage Engine — IndexedDB

NimbusDrive uses the browser’s built-in IndexedDB API as its database. Each file or folder is stored as a record (object) with the following structure:

{
  "id": "unique-id",
  "name": "photo.jpg",
  "isFolder": false,
  "parentId": null,
  "size": 204800,
  "type": "image/jpeg",
  "data": "<ArrayBuffer of file bytes>",
  "createdAt": 1712345678000,
  "updatedAt": 1712345678000,
  "trashed": false,
  "starred": false
}

• parentId: null means the item lives in the root of My Drive
• parentId: "<folder-id>" means it lives inside that folder
• File contents are stored as raw ArrayBuffer (binary-safe)
• Folders have no data field — they are pure metadata records

Root-Level Querying

A key implementation detail: IndexedDB’s index .getAll(null) does not mean “get items where parentId is null” — it means “get everything.” NimbusDrive handles this by manually filtering from all records when querying the root level, and using the parentId index for sub-folder queries.

File Upload Flow

1. User selects files via the file picker or drops them onto the window
2. Available storage is checked — if the upload would exceed 10 GB, it is rejected
3. Each file is read as an ArrayBuffer via FileReader
4. A record is written to IndexedDB with all metadata and the binary data
5. The upload progress bar tracks progress file-by-file
6. The view re-renders and the storage meter updates

File Download Flow

1. The binary ArrayBuffer is retrieved from IndexedDB
2. It is wrapped in a Blob with the correct MIME type
3. A temporary object URL is created and an invisible <a> tag is clicked programmatically
4. The URL is revoked after the download is triggered

---

Keyboard Shortcuts

Shortcut	Action
F2	Rename selected item
Delete / Backspace	Move selected items to Trash
Ctrl/Cmd + A	Select all items in current view
Escape	Deselect all / close modals / close context menus
Double-click folder	Open folder
Double-click file	Download file

---

Context Menu Actions

Right-click a file or folder:

• Open / Download
• Rename
• Star / Unstar
• Download
• Details
• Move to…
• Delete (Move to Trash)

Right-click empty space (My Drive only):

• New Folder
• Upload Files
• Toggle View (Grid ↔ List)

Right-click in Trash view:

• Restore
• Delete Forever

---

Storage Limits

Limit	Value
Total storage	10 GB
Max file size	Limited only by available quota
Number of files	Unlimited
Number of folders	Unlimited
Nesting depth	Unlimited

Note: The 10 GB limit is enforced by NimbusDrive’s logic. Actual browser storage limits vary by browser and device. IndexedDB can typically store several GB of data in modern browsers.

---

Browser Compatibility

NimbusDrive works in all modern browsers that support IndexedDB:

Browser	Support
Chrome / Edge	✅ Full support
Firefox	✅ Full support
Safari	✅ Full support (iOS 13+)
Opera	✅ Full support

Privacy note: All data stays 100% on your device. Nothing is transmitted over the network. Clearing your browser’s site data will erase your drive.

---

File Type Icons

NimbusDrive automatically assigns icons based on file extension:

Icon	Types
🖼️	jpg, jpeg, png, gif, webp, svg, bmp
🎬	mp4, mov, avi, mkv, webm
🎵	mp3, wav, flac, ogg, aac
📄	pdf
📝	doc, docx
📃	txt, md
📊	xls, xlsx, csv
📑	ppt, pptx
🗜️	zip, rar, 7z, tar, gz
💻	js, ts, jsx, tsx
🌐	html
🎨	css
🐍	py
☕	java
📋	json, xml, yaml, yml
🗃️	sql
📄	Everything else

---

Credits

Role	Name
Created by	Snake Arcade
Created by	daboiyoshi
Contact	info@daboiyoshi.com

---

NimbusDrive — Your files, your browser, your privacy.