Cloudflare Images Upload for VSCode

Upload images to Cloudflare Images with drag & drop, paste, or command palette - automatically insert markdown links.

✨ Features

🖱️ Drag & Drop: Drag image files from your file explorer directly into markdown files
📋 Paste from Clipboard: Copy images from anywhere (screenshots, browsers, image editors) and paste into your document
⌨️ Command Palette: Use the command palette to select and upload images
🔗 Auto Markdown Links: Automatically inserts properly formatted markdown image links
⚡ Progress Notifications: Real-time upload progress feedback
🎯 Markdown-Only: Smart activation only in markdown files

🚀 Built with Windsurf: This extension was developed using Windsurf and AI assistance to accelerate development.

📦 Installation

From Marketplace

VSCode Marketplace (for VSCode):

Open VSCode
Go to Extensions (Ctrl+Shift+X or Cmd+Shift+X)
Search for "Cloudflare Images Upload"
Click Install

Open VSX Registry (for Windsurf, VSCodium, and other VSCode alternatives):

Open your editor (Windsurf, VSCodium, etc.)
Go to Extensions
Search for "Cloudflare Images Upload"
Click Install

Or install directly from:

From VSIX

Download the .vsix file from Releases
Open your editor
Go to Extensions → ... menu → Install from VSIX
Select the downloaded file

⚙️ Configuration

Before using the extension, you need to configure your Cloudflare credentials:

Open VSCode Settings (Ctrl+, or Cmd+,)
Search for "Cloudflare Images Upload"
Configure the following:

Setting	Description	How to Get It
Account ID	Your Cloudflare Account ID	Dashboard → Any domain → Overview (right sidebar)
API Token	API token with Images:Edit permission	Dashboard → My Profile → API Tokens → Create Token
Account Hash	Your Cloudflare Images account hash	Dashboard → Images → Copy from URL: `/images/[HASH]`
Default Variant	Image variant for URLs (optional)	Default: `/public`

Getting Your API Token

Go to Cloudflare Dashboard
Click on your profile → API Tokens
Click "Create Token"
Use the "Edit Cloudflare Images" template
Or create a custom token with Account.Cloudflare Images:Edit permission
Copy the token and paste it in the extension settings

🚀 Usage

Method 1: Drag & Drop

Open a markdown file (.md)
Drag an image file from your file explorer
Drop it where you want the image
✨ Done! The image uploads and a markdown link is inserted

Method 2: Paste from Clipboard

Copy an image to your clipboard:
- Take a screenshot (Cmd+Shift+4 on Mac, Win+Shift+S on Windows)
- Copy an image from a browser (right-click → Copy Image)
- Copy from an image editor
Open a markdown file
Paste (Ctrl+V or Cmd+V)
✨ Done! The image uploads and a markdown link is inserted

Method 3: Command Palette

Open a markdown file
Open Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
Type "Upload Image to Cloudflare"
Select an image file
✨ Done! The image uploads and a markdown link is inserted

📸 Supported Image Formats

PNG (.png)
JPEG (.jpg, .jpeg)
GIF (.gif)
WebP (.webp)
BMP (.bmp)
SVG (.svg)

🔧 Requirements

VSCode: Version 1.80.0 or higher
Cloudflare Account: With Cloudflare Images enabled
API Token: With Images:Edit permission

📝 Example Output

When you upload an image, the extension automatically inserts a markdown link:

![image-name.png](https://imagedelivery.net/YOUR_HASH/IMAGE_ID/public)

The image is immediately accessible via Cloudflare's global CDN!

🎯 Use Cases

Documentation: Quickly add screenshots to your README files
Blog Posts: Upload images while writing markdown blog posts
Notes: Add images to your markdown notes
Technical Writing: Include diagrams and screenshots in technical docs
GitHub Issues: Upload images for bug reports

🛠️ Development

Building from Source

# Clone the repository
git clone https://github.com/mcdays94/cloudflare-images-upload-extension.git
cd cloudflare-images-upload-extension

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Package the extension
npm run package

Project Structure

cloudflare-images-upload/
├── src/
│   └── extension.ts       # Main extension code
├── out/                   # Compiled JavaScript
├── extension_icon.png     # Extension icon
├── package.json          # Extension manifest
├── tsconfig.json         # TypeScript config
└── README.md            # This file

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

☕ Support This Project

If you find this extension helpful and it saves you time, consider buying me a coffee! Your support helps keep this project maintained and improved.

📮 Get Help

Issues: GitHub Issues
Discussions: GitHub Discussions

📊 Release Notes

0.1.0 (Initial Release)

✅ Drag & drop image upload
✅ Paste image from clipboard
✅ Command palette upload
✅ Automatic markdown link insertion
✅ Progress notifications
✅ Support for PNG, JPG, GIF, WebP, BMP, SVG

Made with ❤️ by Miguel Caetano Dias

Note

While I work at Cloudflare, this is a personal side project I built independently. It's not an official Cloudflare product and isn't affiliated with, endorsed by, or supported by Cloudflare, Inc.

Cloudflare Images Upload

miguelcaetanodias