CloudCrate - Multi-Cloud Storage Manager
Manage all your cloud storage from one unified VS Code interface
🚀 Features
☁️ Multi-Cloud Support
- AWS S3 - Full integration with Amazon S3 buckets
- DigitalOcean Spaces - Seamless Spaces management
- Azure Blob Storage - Structure ready (coming soon)
- Google Cloud Storage - Structure ready (coming soon)
- Switch between providers without leaving VS Code
📁 Complete File Management
- Browse - Navigate folders with intuitive breadcrumb interface
- Upload - Drag-and-drop or button upload with smart file naming
- Download - Save files locally with auto-increment on conflicts
- Delete - Remove files with confirmation dialogs
- View - Preview images, PDFs, and text files directly in VS Code
🎨 Modern Interface
- Card View - Visual grid layout with large file icons
- List View - Traditional table view for detailed information
- Dark Theme - Beautiful design matching VS Code aesthetics
- Real-time Notifications - Stay informed of all operations
- Parent Folder Navigation - Quick ".." navigation to go up
🔐 Enterprise-Grade Security
- Secure Storage - Credentials stored in VS Code's SecretStorage
- OS-Level Encryption - Windows Credential Manager, macOS Keychain, Linux Secret Service
- No External Servers - All operations run locally
- Direct SDK Integration - Your data never touches third parties
⚡ Smart Features
- Recently Closed - Restore last 3 closed connections with one click
- Bulk Operations - Select and manage multiple files at once
- Smart Naming - Auto-rename on download conflicts
- File Size Limits - 50MB upload validation
- Empty State Feedback - Clear messaging and guidance
📦 Installation
From VS Code Marketplace
- Open VS Code
- Press
Ctrl+Shift+X (or Cmd+Shift+X on Mac) to open Extensions
- Search for "CloudCrate"
- Click Install
From Command Line
code --install-extension selvakannanr.cloudcrate-extension
⚙️ Quick Start
1. Open CloudCrate
After installation:
- Click the CloudCrate icon in the Activity Bar (left sidebar)
- Or press
Ctrl+Shift+P → "CloudCrate: Open Manager"
- You'll see the welcome screen
2. Add Your First Connection
- Click "+ Add Connection" button
- Select your cloud provider (AWS S3, DigitalOcean, etc.)
- Enter your credentials:
- Connection Name (friendly name)
- Access credentials (keys, bucket name, region)
- Click "Test & Connect"
- Start managing files!
3. Start Managing Files
- Browse: Click folders to navigate
- Upload: Drag files or click Upload button
- Download: Select files → Download button
- View: Select one file → View button (for supported types)
- Delete: Select files → Delete button (with confirmation)
🎯 Supported Cloud Providers
Amazon S3
DigitalOcean Spaces
Azure Blob Storage
- Status: 🚧 Coming Soon
- Requirements (Planned):
- Storage Account Name
- Account Key
- Container Name
Google Cloud Storage
- Status: 🚧 Coming Soon
- Requirements (Planned):
- Project ID
- Service Account JSON Key
- Bucket Name
📖 Usage Examples
Uploading Files
Method 1: Drag & Drop
1. Navigate to your desired folder
2. Drag files from your computer
3. Drop onto the CloudCrate file list
4. Files upload automatically!
Method 2: Button Upload
1. Click the "⬆️ Upload" button
2. Select files from your computer
3. Click "Open" - files upload immediately
Viewing Files
CloudCrate can preview files directly in VS Code:
Supported Formats:
- Images: PNG, JPG, GIF, SVG, WebP, BMP
- Documents: PDF
- Text/Code: TXT, MD, JSON, JS, TS, HTML, CSS, XML, YAML, LOG, etc.
To view:
1. Select one file (checkbox)
2. Click "👁️ View" button
3. File opens in modal viewer
4. Close with X or ESC key
Bulk Operations
1. Check multiple files
2. Click "⬇️ Download" to save all
OR
Click "🗑️ Delete" to remove all (with confirmation)
🛠️ Development
Prerequisites
- Node.js >= 18.0.0
- pnpm >= 8.0.0
- VS Code >= 1.80.0
Setup
# Clone repository
git clone https://github.com/selvadhoni/cloudcrate.git
cd cloudcrate
# Install dependencies
pnpm install
# Build all packages
pnpm run build
Development Mode
# Open in VS Code
code .
# Press F5 to launch Extension Development Host
# Make changes, reload window (Ctrl+R) to test
Build
pnpm run build
Package
cd packages/extension
npx vsce package
🏗️ Architecture
Tech Stack
- Language: TypeScript
- Framework: Monorepo with pnpm workspaces
- UI: Vanilla HTML/CSS/JavaScript (single-file webview)
- Cloud SDKs: @aws-sdk/client-s3, Azure SDK, GCP SDK
Packages
packages/
├── extension/ # VS Code extension host
├── logic/ # NestJS backend services
└── webview-ui/ # Next.js frontend UI
Key Files
src/
├── extension.ts # Extension entry point
├── utils/
│ └── WebviewManager.ts # Core business logic
├── webview-ui/
│ └── app.html # Complete UI (HTML+CSS+JS)
└── logic/
└── interfaces/ # Cloud provider contracts
🔧 Commands
Available via Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
- CloudCrate: Open Manager - Open CloudCrate panel
- CloudCrate: Add Connection - Add new cloud storage connection
- CloudCrate: Refresh - Reload current file list
⚙️ Configuration
Connection Management
Add Connection:
1. CloudCrate panel → "+ Add Connection"
2. Select provider
3. Enter credentials
4. Test & Connect
Close Connection:
1. Hover over connection in sidebar
2. Click X button
3. Confirm closure
Restore Connection:
1. Check "Recently Closed" section
2. Click on connection to restore
3. Back to active connections!
View Preferences
- List View: Traditional table with Name, Size, Modified columns
- Card View: Grid layout with large icons
- Toggle via buttons in top-right corner
- Preference remembered automatically
🐛 Troubleshooting
Connection Failed
- Check Credentials: Verify Access Keys are correct
- Check Region: Ensure region matches your bucket/space
- Check Permissions: Verify IAM permissions allow S3 access
- Check Network: Ensure internet connection is stable
Files Not Loading
- Refresh: Click the "🔄 Refresh" button
- Check Path: Verify you're in correct folder
- Check Permissions: Ensure read access to bucket
- Reload Extension:
Ctrl+R in Extension Dev Host
Upload Failed
- File Size: Check file is under 50MB limit
- Write Permissions: Verify upload permissions on bucket
- Network: Check internet connection
- View Logs: Help → Toggle Developer Tools → Console
Can't View File
- File Type: Check if format is supported (see list above)
- File Size: Large files may take time to load
- Permissions: Verify read access
📝 Privacy & Security
- API Keys: Stored securely using VS Code's SecretStorage (OS-encrypted)
- Data Flow: Direct SDK communication - no intermediary servers
- No Telemetry: CloudCrate doesn't collect usage data
- Local Execution: All operations run within VS Code
- Credential Cleanup: Automatic removal on connection deletion
🤝 Contributing
We welcome contributions! Please see our Contributing Guide for:
- Code of conduct
- Development setup
- Pull request process
- Coding standards
Quick Links:
📚 Documentation
🗺️ Roadmap
✅ v1.0 (Current)
- [x] AWS S3 support
- [x] DigitalOcean Spaces support
- [x] File upload/download/delete
- [x] File preview (images, PDF, text)
- [x] Card & List views
- [x] Recently closed connections
🔜 v1.1 (Next)
- [ ] Azure Blob Storage implementation
- [ ] Google Cloud Storage implementation
- [ ] File search functionality
- [ ] File rename operation
- [ ] Folder upload support
🚀 Future
- [ ] File synchronization
- [ ] Public URL generation
- [ ] Progress indicators for large files
- [ ] Multi-workspace support
- [ ] Custom keyboard shortcuts
📄 License
MIT License - See LICENSE file for details
🙏 Acknowledgments
📞 Support
