🚀 Pixeldrain URL Uploader

Ever wanted to upload files to Pixeldrain but thought "Man, I wish I could just drag and drop or paste a URL"? Well, your prayers have been answered! This is the most fabulous file uploader since the invention of the floppy disk! 🎉

🎯 How to Use (It's Stupidly Simple)

1. Get your Pixeldrain API key from pixeldrain.com
2. Paste your API key in the input field
3. Either:
   • Drag & drop a file
   • OR paste a file URL
4. Click upload
5. That's it! No rocket science here 🚀

🌟 Features

• Drag & Drop Magic: Just drag your files like you're playing Tetris!
• URL Upload: Got a file URL? Paste it and watch the magic happen! ✨
• Progress Bar: Because watching paint dry is more exciting than waiting for an upload without a progress bar
• API Key Storage: Saves your API key in your browser's localStorage (only on your device, not on any server)
• Beautiful UI: Made with Tailwind CSS because we're fancy like that 💅

⚠️ Important Notes

File Size Limits

Since this runs on Cloudflare Workers, there are some limitations:

• Maximum file size: 100MB (Cloudflare Workers limit)
• Maximum request size: 100MB
• Maximum response size: 100MB

If you need to upload larger files, you might want to look into other solutions or consider splitting your files. Sorry, we're not magic! 🪄

🛠️ How It Works

Frontend (The Pretty Part)

• Built with vanilla JavaScript because we're old school cool
• Uses Tailwind CSS for that sweet, sweet styling
• Features a drag-and-drop zone that's more responsive than your ex
• Progress bar that actually shows progress (revolutionary, I know!)

Backend (The Brains)

• Handles two types of uploads:
  1. Direct File Upload: When you drag & drop or select a file
  2. URL Upload: When you paste a URL and expect magic to happen
• Securely communicates with Pixeldrain's API
• Handles errors gracefully (unlike some people we know)

🚀 Getting Started

1. Clone this repo (or download it, we're not picky)
2. Deploy to Cloudflare Workers:

   # Install Wrangler if you haven't already
   npm install -g wrangler
   
   # Login to Cloudflare
   wrangler login
   
   # Deploy!
   wrangler deploy

3. Get your Pixeldrain API key (because we're not mind readers)
4. Start uploading like there's no tomorrow!

🔧 Technical Details

The code is split into two main parts:

1. HTML/UI: A beautiful interface with:

   • API key input (stored in localStorage)
   • URL upload input
   • Drag & drop zone
   • Progress indicators
   • Success/error messages

2. JavaScript Logic:

   • File handling for both direct uploads and URL uploads
   • Progress tracking
   • Error handling
   • API communication with Pixeldrain

📚 API Documentation

This project is built on top of the Pixeldrain API. Here's what we use:

Endpoints Used

• PUT /api/file/{filename} - Upload files directly
• GET /api/file/{id} - Get file information
• GET /api/user - Get user information (for API key validation)

Authentication

• Uses Basic Authentication with API key
• Format: Authorization: Basic :{api_key}

Rate Limits

• 100 requests per minute
• 1000 requests per hour
• 10000 requests per day

For more details, check out the official Pixeldrain API documentation.

💭 Discussion

Why Cloudflare Workers?

• Fast as lightning ⚡
• Global CDN
• Free tier is generous
• Perfect for this kind of application

How Simple Is This? 🤔

Literally just:

1. Add your Pixeldrain API key (it's saved only in your browser, like your cat's favorite napping spot 🐱)
2. Upload files by dragging & dropping or pasting URLs
3. That's it! No complex setup, no database, no backend server to maintain!

It's so simple, even your cat could use it! 🐱 (Well, maybe not, but you get the point)

Common Use Cases

• Quick file sharing
• Backup small files
• Share images and documents
• Temporary file hosting

Limitations

• File size limits (see above)
• Worker execution time limit (30 seconds)
• Memory limits (128MB)

Alternatives

If you need to handle larger files:

• Direct upload to Pixeldrain
• Split files into smaller chunks
• Use a different hosting solution

🤝 Contributing

Found a bug? Want to add a feature? Feel free to:

1. Fork it
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

📝 License

WTFPL - See LICENSE file for details.

🙏 Acknowledgments

• Thanks to Pixeldrain for being awesome
• Thanks to Tailwind CSS for making us look good
• Thanks to Cloudflare for the free hosting
• Thanks to coffee for keeping us awake while coding this

---

Made with ❤️ and probably too much backpain