# 📤 Fitur Upload Image - Dashboard HaikzBot

## ✨ Fitur Baru: Upload Image Otomatis

Sekarang kamu **tidak perlu** upload gambar ke Imgur/CDN manual lagi! Dashboard bisa upload gambar langsung dan otomatis convert jadi Discord CDN URL.

---

## 🎯 Cara Pakai

### 1. **Announcement dengan Upload Image**

1. Buka dashboard → tab **📢 Announcement**
2. Scroll ke bagian **"Image URL"**
3. Klik tombol **"📤 Upload Image"**
4. Pilih file gambar dari komputer (PNG, JPG, GIF, WEBP)
5. Tunggu upload selesai (muncul toast "✅ Image uploaded")
6. URL otomatis terisi di input field
7. Preview gambar muncul di bawah
8. Kirim announcement seperti biasa

**Atau** tetap bisa paste URL manual kalau sudah punya.

---

### 2. **Product dengan Upload Image**

1. Buka dashboard → tab **🛒 Products**
2. Klik **"+ New Product"** atau edit produk existing
3. Di form, scroll ke **"Image URL"**
4. Klik tombol **"📤 Upload Image"**
5. Pilih gambar produk
6. URL otomatis terisi + preview muncul
7. Save product

**Contoh:** Upload gambar Nitro, Discord Premium, VPN, dll.

---

### 3. **Store Panel dengan Upload Banner**

1. Buka dashboard → tab **🎨 Store Panels**
2. Klik **"+ New Panel"** atau edit panel existing
3. Di form, scroll ke **"Image URL (banner)"**
4. Klik tombol **"📤 Upload Image"**
5. Pilih banner/header image
6. URL otomatis terisi + preview muncul
7. Save panel

**Contoh:** Upload banner toko dengan logo/design custom.

---

## 📋 Spesifikasi

### Format yang Didukung:
- ✅ PNG
- ✅ JPG / JPEG
- ✅ GIF (animated)
- ✅ WEBP

### Ukuran File:
- **Max:** 8 MB per file
- **Recommended:** < 2 MB untuk loading cepat

### Teknologi:
- Upload via Discord CDN (gratis, unlimited bandwidth)
- URL format: `https://cdn.discordapp.com/emojis/...`
- Permanent URL (tidak expire)

---

## 🔧 Cara Kerja (Technical)

1. **User pilih file** → browser baca file jadi base64
2. **Dashboard kirim** ke API `/api/upload-image`
3. **Bot upload** file sebagai temporary emoji ke Discord server
4. **Discord return** CDN URL permanent
5. **Bot delete** temporary emoji (URL tetap valid)
6. **Dashboard terima** URL dan auto-fill input field

**Keuntungan:**
- ✅ Tidak perlu akun Imgur/hosting eksternal
- ✅ Bandwidth unlimited (Discord CDN)
- ✅ URL permanent (tidak expire)
- ✅ Fast loading (Discord CDN global)

---

## 💡 Tips & Tricks

### 1. Compress Gambar Dulu
Kalau file > 2 MB, compress dulu pakai:
- **TinyPNG** - https://tinypng.com
- **Squoosh** - https://squoosh.app
- **ImageOptim** (Mac)

### 2. Aspect Ratio untuk Embed
- **Banner/Panel:** 16:9 atau 2:1 (landscape)
- **Product:** 1:1 (square) atau 4:3
- **Announcement:** bebas, tapi 16:9 paling bagus

### 3. Animated GIF
- Max 8 MB (Discord limit)
- Kalau terlalu besar, reduce frame rate atau resize
- Tool: **ezgif.com**

### 4. Transparent Background
- Pakai PNG untuk logo/icon dengan background transparan
- JPG tidak support transparency

---

## 🐛 Troubleshooting

### Upload gagal: "Image too large"
**Solusi:** Compress gambar sampai < 8 MB

### Upload gagal: "Format tidak didukung"
**Solusi:** Convert ke PNG/JPG dulu. Pakai tool online atau Photoshop.

### Preview tidak muncul
**Solusi:** 
- Cek URL valid (buka di tab baru)
- Refresh halaman dashboard
- Clear browser cache

### URL tidak auto-fill
**Solusi:**
- Tunggu sampai toast "✅ Image uploaded" muncul
- Kalau masih gagal, cek log: `tail -f /tmp/discord-bot.log`

### Error: "Failed to create emoji"
**Solusi:**
- Bot perlu permission `Manage Emojis and Stickers`
- Cek emoji slot server tidak penuh (max 50 static + 50 animated)
- Bot otomatis delete temporary emoji, tapi kalau error bisa stuck

---

## 🔐 Keamanan

### Apakah aman?
✅ **Ya!** Upload hanya bisa dilakukan oleh user dengan dashboard token.

### Siapa yang bisa lihat gambar?
- URL Discord CDN bersifat **public** (siapa pun dengan URL bisa akses)
- Jangan upload gambar sensitif/private
- Cocok untuk: produk, banner, announcement, logo

### Apakah gambar bisa dihapus?
- URL permanent, tidak bisa dihapus dari Discord CDN
- Tapi bisa ganti URL di dashboard kapan saja

---

## 📊 Perbandingan: Upload vs Manual

| Fitur | Upload Dashboard | Manual (Imgur/CDN) |
|-------|------------------|-------------------|
| Kecepatan | ⚡ Instant (1 klik) | 🐌 Slow (buka web, upload, copy URL) |
| Biaya | 💰 Gratis | 💰 Gratis (tapi ada limit) |
| Bandwidth | ♾️ Unlimited | ⚠️ Limited (Imgur: 1250 upload/hari) |
| Expire | ✅ Permanent | ⚠️ Bisa expire (tergantung hosting) |
| Setup | ✅ Tidak perlu akun | ❌ Perlu akun Imgur/hosting |

**Kesimpulan:** Upload dashboard lebih cepat, mudah, dan reliable.

---

## 🎉 Contoh Penggunaan

### Contoh 1: Announcement Promo dengan Banner
```
1. Buat banner promo di Canva/Photoshop
2. Export PNG (1920x1080)
3. Dashboard → Announcement → Upload Image
4. Tulis message promo
5. Kirim!
```

### Contoh 2: Product Discord Nitro dengan Logo
```
1. Download logo Nitro dari Discord
2. Dashboard → Products → New Product
3. Nama: "Discord Nitro (1 Bulan)"
4. Upload logo Nitro
5. Set harga & kategori
6. Save!
```

### Contoh 3: Store Panel dengan Header Custom
```
1. Buat header banner toko (2000x500)
2. Dashboard → Store Panels → New Panel
3. Upload banner
4. Set title & footer
5. Kirim ke channel #products
```

---

## 📞 Support

Kalau ada masalah dengan upload image:

1. **Cek log bot:**
   ```bash
   tail -50 /tmp/discord-bot.log | grep upload
   ```

2. **Test API manual:**
   ```bash
   # Convert image to base64
   base64 -w 0 image.png > image.b64
   
   # Test upload
   curl -X POST http://localhost:4002/api/upload-image \
     -H "x-dashboard-token: YOUR_TOKEN" \
     -H "Content-Type: application/json" \
     -d '{"guild_id":"YOUR_GUILD_ID","image_data":"data:image/png;base64,..."}'
   ```

3. **Cek permission bot:**
   - Bot perlu `Manage Emojis and Stickers`
   - Cek di Server Settings → Roles → Bot Role

---

**Dashboard URL:** http://localhost:4002  
**Token:** `622e5783c187f3e3da7ad0da3fc34f9b9b47894925476d7fdf29d75b152a880b`

Selamat menggunakan fitur upload image! 🎉
