221 lines
5.1 KiB
Markdown
221 lines
5.1 KiB
Markdown
# 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
|