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

1. Open VS Code
2. Press Ctrl+Shift+X (or Cmd+Shift+X on Mac) to open Extensions
3. Search for "CloudCrate"
4. Click Install

From Command Line

code --install-extension yourpublisher.cloudcrate

⚙️ Quick Start

1. Open CloudCrate

After installation:

1. Click the CloudCrate icon in the Activity Bar (left sidebar)
2. Or press Ctrl+Shift+P → "CloudCrate: Open Manager"
3. You'll see the welcome screen

2. Add Your First Connection

1. Click "+ Add Connection" button
2. Select your cloud provider (AWS S3, DigitalOcean, etc.)
3. Enter your credentials:
   • Connection Name (friendly name)
   • Access credentials (keys, bucket name, region)
4. Click "Test & Connect"
5. 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

• Status: ✅ Full Support
• Requirements:
  • AWS Access Key ID
  • AWS Secret Access Key
  • Bucket Name
  • Region
• Get Credentials: https://console.aws.amazon.com/iam/
• Documentation: AWS S3 Setup Guide

DigitalOcean Spaces

• Status: ✅ Full Support
• Requirements:
  • Spaces Access Key
  • Spaces Secret Key
  • Space Name
  • Region (nyc3, sfo3, ams3, etc.)
• Get Credentials: https://cloud.digitalocean.com/account/api/
• Documentation: DigitalOcean Setup Guide

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

1. Check Credentials: Verify Access Keys are correct
2. Check Region: Ensure region matches your bucket/space
3. Check Permissions: Verify IAM permissions allow S3 access
4. Check Network: Ensure internet connection is stable

Files Not Loading

1. Refresh: Click the "🔄 Refresh" button
2. Check Path: Verify you're in correct folder
3. Check Permissions: Ensure read access to bucket
4. Reload Extension: Ctrl+R in Extension Dev Host

Upload Failed

1. File Size: Check file is under 50MB limit
2. Write Permissions: Verify upload permissions on bucket
3. Network: Check internet connection
4. View Logs: Help → Toggle Developer Tools → Console

Can't View File

1. File Type: Check if format is supported (see list above)
2. File Size: Large files may take time to load
3. 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:

• GitHub Issues
• GitHub Discussions
• Development Guide

📚 Documentation

• User Guide - Complete usage instructions
• API Reference - Cloud provider setup
• Development - For contributors
• Architecture - Technical design
• Changelog - Version history

🗺️ Roadmap

✅ v1.0 (Current)

• AWS S3 support
• DigitalOcean Spaces support
• File upload/download/delete
• File preview (images, PDF, text)
• Card & List views
• 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

• Built with VS Code Extension API
• Powered by official cloud SDKs:
  • AWS SDK for JavaScript v3
  • Azure SDK
  • Google Cloud SDK
• UI inspired by modern file managers

📞 Support

• GitHub Issues: Report bugs or request features
• GitHub Discussions: Ask questions or share ideas
• Email: selvadhoni640@gmail.com

---

Made with ❤️ for the VS Code Community by Selvakannan R

⭐ Star us on GitHub if you find CloudCrate helpful!

Report Bug • Request Feature • Documentation