R2
FTP
Overlay
Shopify
Endpoint ini dipakai Shopify Flow. Kirim URL gambar Brandsgateway โ†’ dapat URL baru dengan overlay.
Test endpoint manual
Contoh request dari Shopify Flow
{
  "image_url":  "https://cdn.brandsgateway.com/products/xxx.jpg",
  "product_id": "8012345678901",
  "filename":   "ov_8012345678901.jpg"   โ† opsional
}

โ†’ Response:
{
  "success":      true,
  "original_url": "https://cdn.brandsgateway.com/...",
  "overlay_url":  "https://img.offscript.id/overlay/ov_xxx.png",
  "filename":     "ov_xxx.png",
  "storage":      "r2",
  "processed_at": "2026-06-12T10:00:00Z"
}
Upload PNG overlay frame/border di sini. PNG harus pakai transparent area di mana gambar produk akan kelihatan. File otomatis jadi aktif setelah diupload.
Upload Overlay PNG
๐Ÿ–ผ๏ธ
Drop file PNG overlay
Frame/border branded โ€” harus PNG dengan transparency
Overlay tersimpan
Klik Refresh untuk muat daftar
Overlay settings (programmatic)
๐Ÿ“ Semua file PNG overlay yang tersimpan di server. Klik gambar untuk preview, dan gunakan tombol delete untuk menghapus.
๐ŸŽจ Overlay Files (PNG)
Klik Refresh untuk memuat daftar overlay
โฌ†๏ธ
Upload langsung ke FTP
Tanpa overlay โ€” semua format didukung
๐Ÿ“‚ Direktori Remote
Klik Refresh untuk muat daftar file
Konfigurasi FTP. Host biasanya ftp.img.offscript.id โ€” cek di cPanel โ†’ FTP Accounts.
FTP Server Settings
Folder tujuan upload di server FTP
Dipakai untuk generate link setelah upload & overlay
Cloudflare R2 Settings (Read-Only)
Pengaturan Cloudflare R2 dibaca secara otomatis dari environment variables (.env).
Semua endpoint return HTTP 200. Error dikemas di dalam body JSON (success: false) supaya kompatibel dengan Shopify Flow.
๐Ÿ”‘ API Keys (Untuk Akses Endpoint Tertentu)
MethodEndpointKeterangan
โšก Shopify Flow / Image Processing
POST/api/process-product
Proses semua gambar produk + update Shopify metafield
Dipanggil oleh Shopify Flow. Body: {"product_id": "xxx", "images": [...]}. Otomatis overlay โ†’ upload R2/FTP โ†’ update metafield custom.overlay_images.
POST/api/process
Proses gambar tunggal + overlay โ†’ return URL baru
Body: {"image_url": "...", "product_id": "...", "filename": "..."}. Mendukung penyimpanan R2 / FTP.
POST/api/shopify/bulk-process
Bulk proses overlay untuk banyak produk Shopify
Body: {"product_ids": ["gid://..."]}. Fetch produk via GraphQL, proses overlay gambar pertama tiap produk. Menyimpan ke R2 / FTP.
๐Ÿ–ผ Overlay Management
POST/api/overlay/upload
Upload file PNG overlay ke server
multipart/form-data, field: file. Otomatis jadi overlay aktif.
GET/api/overlay/list
List semua overlay tersimpan
Return array {name, active}
GETapi/list?path=overlay
List semua overlay tersimpan di folder overlay
Return array {name, active}
GET/api/overlay/files
List file overlay dengan detail (size, modified, preview)
POST/api/overlay/activate
Set overlay aktif
Body: {"name": "frame.png"}
POST/api/overlay/delete
Hapus file overlay dari server
Body: {"filename": "frame.png"}
GET/api/overlay/preview/<filename>
Preview gambar overlay (serve file PNG)
Auto-restore dari FTP jika belum ada di lokal
GET/api/config/overlay
Live config overlay aktif (tanpa credential)
Bisa di-poll oleh service lain. Return overlay_config, overlay_ready, dll.
๐Ÿ“ FTP File Management
GET/api/list
List file di FTP server
GET/POST. Query: type, prefix, limit, page, path
POST/api/upload
Upload file langsung ke Storage
multipart/form-data, field: files (multiple). Otomatis diunggah ke R2 jika aktif, fallback ke FTP.
POST/api/delete
Hapus file/folder dari FTP
Body: {"filename": "...", "path": "...", "is_dir": false}
โš™ Configuration
GET/api/config
Baca konfigurasi FTP & R2 metadata
POST/api/config
Set config FTP + overlay (programmatic)
Body JSON: host, port, username, password, remote_dir, public_url, overlay_config
POST/api/test
Test koneksi Storage (R2/FTP)
GET/api/health
Health check โ€” status R2, FTP, Shopify, dan overlay
๐Ÿ”‘ API Keys
POST/api/keys/generate
Generate API key baru
Body: {"label": "shopify-store-1"}
GET/api/keys
List semua API keys (preview only)
POST/api/keys/delete
Hapus API key
Body: {"key_preview": "abc12345..."}
๐Ÿ›’ Shopify Connector
GET/api/shopify/config
Baca config Shopify (store + has_token)
POST/api/shopify/config
Set config Shopify
Body: {"store": "xxx.myshopify.com", "access_token": "shpat_..."}
POST/api/shopify/test
Test koneksi Shopify (GraphQL shop query)
GET/api/shopify/products
List produk dari Shopify store
GET/POST. Query: limit, cursor, all=true
Contoh setup programmatic (sekali jalan)
# 1. Set konfigurasi via API
curl -X POST http://localhost:5000/api/config \
  -H "Content-Type: application/json" \
  -d '{
    "host": "ftp.img.offscript.id",
    "username": "user",
    "password": "pass",
    "remote_dir": "/public_html",
    "public_url": "https://img.offscript.id",
    "overlay_config": {
      "output_size": [1080, 1080],
      "output_subdir": "overlay",
      "output_prefix": "ov_",
      "overlay_opacity": 1.0,
      "bg_color": [255, 255, 255]
    }
  }'

# 2. Upload overlay PNG
curl -X POST http://localhost:5000/api/overlay/upload \
  -F "file=@frame_offscript.png"

# 3. Shopify Flow hit endpoint ini saat ada produk baru (Banyak Gambar)
curl -X POST http://localhost:5000/api/process-product \
  -H "Content-Type: application/json" \
  -d '{
    "product_id": "8012345678901",
    "images": [
      "https://cdn.brandsgateway.com/products/xxx_1.jpg",
      "https://cdn.brandsgateway.com/products/xxx_2.jpg"
    ]
  }'

# 4. Shopify Flow hit endpoint ini untuk memproses gambar tunggal
curl -X POST http://localhost:5000/api/process \
  -H "Content-Type: application/json" \
  -d '{
    "image_url": "https://cdn.brandsgateway.com/products/xxx.jpg",
    "product_id": "8012345678901"
  }'
Koneksikan Shopify store kamu. Buat Custom App di Shopify Admin โ†’ Settings โ†’ Apps โ†’ Develop Apps, aktifkan scope read_products, lalu copy Admin API access token ke sini.
Koneksi Shopify Store
Format: nama-toko.myshopify.com
Dari Shopify Admin โ†’ Settings โ†’ Apps โ†’ Develop Apps โ†’ API credentials
๐Ÿ› Produk dari Store
Klik "Load 50" untuk mulai