Pixeldrain URL Uploader 🚀

Ever wanted to upload files to Pixeldrain without actually downloading them first? Well, you're in luck! This little app does exactly that - it's like having a magical file transporter that takes files from anywhere on the internet and plops them right into your Pixeldrain account. ✨

What's the Deal? 🤔

This is a web app that lets you:

• 🔗 Grab files from any URL and upload them to Pixeldrain
• 🌓 Switch between dark and light mode (because we're not savages)
• 📱 Use it on your phone, tablet, or that ancient laptop from 2010
• 📊 Watch the upload progress in real-time (no more guessing games!)
• 📋 Keep track of all your uploaded files
• 🎨 Look at pretty monospace fonts while you wait

Before You Start 🛠️

You'll need:

• Node.js (v14 or newer) - because we're not living in the past
• npm or yarn (pick your poison)
• A Pixeldrain API key (this is NOT optional - we need it to talk to Pixeldrain!)

Let's Get This Party Started! 🎉

1. Clone this bad boy:

git clone https://github.com/sh13y/Pixeldrain-URL-Uploader.git
cd Pixeldrain-URL-Uploader

2. Install the dependencies (this is where the magic happens):

npm install
# or if you're a yarn person
yarn install

3. Create a .env file in the root directory (this is where you put your secret sauce):

PIXELDRAIN_API_KEY=your_api_key_here

💡 Pro Tip: You can get your API key from your Pixeldrain account. No API key = no uploads. It's like trying to enter a club without a VIP pass! 🎫

4. Fire up the development server:

npm start
# or
yarn start

5. Open your browser and head to http://localhost:3000 - you're in business! 🎉

How to Use This Thing 🎮

1. Find a file URL you want to upload (you know, that thing that starts with http:// or https://)
2. (Optional) Give it a fancy name if you want to be extra
3. Hit that "Upload to Pixeldrain" button
4. Watch the progress bar do its thing (it's like watching paint dry, but more exciting!)
5. Copy the Pixeldrain link when it's done (because sharing is caring)

The Codebase Explained 🧐

Frontend (public/ directory)

• index.html: The main webpage. It's like the blueprint of a house, but for a website.
• app.js: The brain of the operation. It handles:
  • File uploads (the magic part)
  • Progress tracking (so you know what's happening)
  • Theme switching (dark/light mode)
  • File history management (keeping track of your stuff)
  • Copy-to-clipboard functionality (for sharing)
• styles.css: Makes everything look pretty. We use:
  • Tailwind CSS for the heavy lifting
  • Custom CSS for the special effects
  • JetBrains Mono font for that sweet monospace look

Backend (server.js)

• Express server that:
  • Handles file uploads to Pixeldrain
  • Manages API communication
  • Serves the frontend files
  • Handles errors gracefully (because stuff happens)

Key Features in Detail

File Upload Process

1. User enters a URL
2. Backend downloads the file (streaming, so it's memory efficient)
3. File gets uploaded to Pixeldrain
4. Progress is tracked in real-time
5. Success/error messages are shown

Theme System

• Uses CSS variables for colors
• Supports system preference detection
• Persists user preference in localStorage
• Smooth transitions between themes

File History

• Shows all uploaded files
• Displays file size, type, and name
• Provides quick copy buttons
• Calculates total storage used

What's Inside? 🏗️

pixeldrain-uploader/
├── public/              # The frontend stuff
│   ├── app.js          # Where the magic happens
│   ├── styles.css      # Making things pretty
│   └── index.html      # The webpage itself
├── server.js           # The backend wizardry
├── package.json        # Dependencies and scripts
├── LICENSE            # The legal stuff
└── README.md          # You're reading this right now!

Want to Help? 🤝

Found a bug? Want to add a feature? Here's how to contribute:

1. Fork this repo (make your own copy)
2. Create a new branch (git checkout -b feature/your-awesome-idea)
3. Make your changes
4. Push to your branch (git push origin feature/your-awesome-idea)
5. Open a Pull Request (let's see what you've got!)

Legal Stuff ⚖️

This project is licensed under the WTFPL - Do What The Fuck You Want To Public License.

TL;DR: Do whatever the fuck you want with this code. No strings attached, no conditions, no warranty. It's yours to do with as you please! 🎉

The full license text is in the LICENSE file. It's probably the shortest license you'll ever read - just one line that says "You just DO WHAT THE FUCK YOU WANT TO." 😎

Shoutouts! 🙌

• Pixeldrain - For being awesome and letting us use their service
• Express.js - For making the backend less painful
• Tailwind CSS - For making things look good without the headache
• JetBrains Mono - For being the best monospace font ever

Need Help? 🆘

If you're stuck, try:

1. Reading the docs (they're actually helpful!)
2. Checking the issues section
3. Opening a new issue if you can't find your answer

Remember: Google is your friend, but we're here if you need us! 😊