# 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)

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

### Method 3: Auto-Upload (Existing)

```bash
./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

```bash
# 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:
```bash
./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