jeffemmett
/
obs-r2-uploader
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
obs-r2-uploader/UPLOAD_FEATURE.md

5.1 KiB
Raw Permalink Blame History

Manual Upload Feature - Admin Panel

What's New

The admin panel now includes a manual video upload feature with drag-and-drop support!

New Features

  1. 📤 Upload Button - Click the green "Upload Video" button in the admin header
  2. Drag & Drop Upload - Drop video files directly into the upload modal
  3. Progress Tracking - Real-time upload progress bar
  4. Empty State - When no videos exist, shows a helpful message with upload button
  5. Auto-Refresh - Video list automatically reloads after successful upload

Upload Methods

Method 1: Admin Panel Upload (NEW!)

  1. Login to admin panel: https://videos.jeffemmett.com/admin
  2. Click "📤 Upload Video" button
  3. Either:
    • Drag and drop a video file into the upload area
    • Click the upload area to browse files
  4. Watch the progress bar
  5. Video appears in your list automatically!

Method 2: Command Line Upload (Existing)

./scripts/upload.sh /path/to/video.mp4

Method 3: Auto-Upload (Existing)

./scripts/start-watcher.sh /path/to/obs/recordings

Supported Formats

  • MP4 (.mp4)
  • MKV (.mkv)
  • MOV (.mov)
  • AVI (.avi)
  • WebM (.webm)
  • FLV (.flv)
  • WMV (.wmv)

Default Settings

Videos uploaded via admin panel:

  • ✅ Default visibility: Shareable
  • ✅ Stored in R2 bucket: obs-videos
  • ✅ Accessible via: videos.jeffemmett.com/{filename}
  • ✅ Can change visibility after upload

Empty State Improvements

When no videos are stored, the admin panel now shows:

  • 🎥 Empty state icon
  • "No videos yet" message
  • Helpful "Upload your first video" text
  • Upload button for easy access

Instead of just "No videos found"

Technical Details

Upload Flow

  1. Client Side:

    • User selects video file
    • JavaScript validates file type
    • Creates FormData with video file
    • Uses XMLHttpRequest for progress tracking
    • Shows progress bar with percentage

  2. Server Side (Cloudflare Worker):

    • Receives multipart form data
    • Validates file extension
    • Uploads to R2 bucket with proper content-type
    • Creates metadata entry (visibility: shareable)
    • Returns success response

  3. After Upload:

    • Admin panel reloads video list
    • New video appears with thumbnail
    • Default visibility is "Shareable"
    • Ready to share immediately

API Endpoint

POST /admin/api/upload
Content-Type: multipart/form-data
Authentication: Required (admin cookie)

Form data:
- video: File object

Response (200 OK):
{
  "success": true,
  "filename": "my-video.mp4",
  "url": "/my-video.mp4"
}

Deployment

Update Your Worker

# Rebuild worker with new features
python3 scripts/build-worker.py

# Deploy to Cloudflare
cd worker
wrangler deploy

Verify Deployment

  1. Visit: https://videos.jeffemmett.com/admin
  2. Login with your admin password
  3. Look for the green "📤 Upload Video" button
  4. If no videos exist, you should see the nice empty state

Advantages of Admin Upload

vs Command Line:

  • ✅ No terminal needed
  • ✅ Visual progress tracking
  • ✅ Drag and drop support
  • ✅ Works from any device
  • ✅ Instant visibility management

vs Auto-Upload:

  • ✅ Upload any video file (not just OBS recordings)
  • ✅ Upload from anywhere
  • ✅ No file watcher needed
  • ✅ Immediate feedback
  • ✅ Can upload multiple files sequentially

Use Cases

Quick Sharing

  1. Record video on phone
  2. Upload via admin panel
  3. Share link immediately

Mixed Content Sources

  • OBS recordings (auto-upload)
  • Screen captures (manual upload)
  • Downloaded videos (manual upload)
  • Edited videos (manual upload)

Emergency Uploads

  • Network issues with auto-upload
  • Need to upload from different device
  • Quick share from public computer

Limitations

  • One file at a time: Can't upload multiple files simultaneously
  • Browser memory: Very large files (>2GB) may cause browser issues
  • No resume: If upload fails, must restart
  • Timeout: Very large files may timeout (Cloudflare 100MB request limit on free plan)

For Large Files

Use the command-line upload instead:

./scripts/upload.sh /path/to/large-video.mp4

The CLI supports:

  • Multipart uploads for files >100MB
  • Resume capability
  • Better progress tracking for large files

Troubleshooting

Upload Button Not Visible

  • Clear browser cache
  • Verify worker deployment: cd worker && wrangler deploy
  • Check browser console for errors

Upload Fails

  • Check file size (Cloudflare free tier: 100MB request limit)
  • Verify file format is supported
  • Check network connection
  • Try command-line upload for large files

Empty State Not Showing

  • Refresh the page
  • Check browser console for errors
  • Verify KV namespace is configured

Progress Bar Stuck

  • Network issue - check connection
  • File too large - use CLI upload
  • Refresh page and try again

Future Enhancements

Potential improvements:

  • Multiple file upload
  • Upload queue
  • Resume failed uploads
  • Chunked uploads for large files
  • Thumbnail preview before upload
  • Custom filename on upload
  • Set visibility before upload
  • Bulk upload via zip file

Updated: 2024-11-22 Version: 1.1