Klippy

Asset uploads

Klippy stores media locally in your browser (IndexedDB). You can upload by using the Media panel or drag‑and‑drop into the editor. Files never leave your device unless you explicitly use stock media APIs (proxied via server).

1) How to add files

  • Use the Media panel “Upload Media” button to select files.
  • Or drag files onto the editor; the Media panel and the desktop preview accept drops.
  • Accepted types: video/*, audio/*, image/*, plus .gif, .webp, .apng.

2) Limits & validation

  • Per‑file limit: 500MB; total batch limit: 2GB (see Media panel uploader).
  • Storage check: the app estimates available quota and suggests cleanup if you’re low on space.
  • Uploads show a per‑batch progress bar; failed files are reported with toasts.

3) Where uploads go

  • Files are stored in IndexedDB (klippy-files) via storageManager.
  • Project JSON stores references by fileId; the physical blob stays local.
  • Utilities in app/store/index.ts: storeFile, getFile, listFiles, deleteFile.

4) Library and timeline

  • After upload, items appear in the Media panel (library) with a file count.
  • Drag from library to timeline. Drops determine row/position using snap and row logic.
  • Deleting from the library updates the filesID list and allows cleanup via the Storage page.

5) Stock media (optional)

Stock sources are proxied by Next.js so keys stay server‑side.

  • Pexels images/videos: /api/pexels/*
  • Tenor GIFs/Stickers/Clips: /api/tenor/search and /api/tenor/proxy
  • Meme videos/sounds: /api/meme/videos, /api/meme/sounds

6) Privacy & security

  • Local uploads are never sent to a server; they remain in your browser storage.
  • API routes enforce origin validation and rate limiting; allowed domains are configured in middleware.ts.
  • Service Worker caches static assets/WASM (not user uploads) in production for faster loads.

7) Troubleshooting

“Insufficient storage” or quota errors

Use /storage to clear caches/old projects or reduce batch size. Browsers cap per‑origin storage.

File too large

Per‑file limit is 500MB in the uploader. For longer content, split files first or upload in parts.

Drag‑and‑drop not working

Ensure you drop onto the editor (not the browser chrome). If using an iframe, open the editor directly.

8) Related files

  • Media panel: app/components/editor/MediaPanel.tsx
  • Uploader button: app/components/editor/AssetsPanel/AddButtons/UploadMedia.tsx
  • Global drag & drop: app/(pages)/projects/[id]/hooks/useGlobalDragAndDrop.ts
  • Storage manager and quota: app/utils/storageManager.ts, app/hooks/useStorageManager.ts