mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-04 18:52:56 +00:00
dev day #63
This commit is contained in:
Tomas Dvorak
@@ -0,0 +1,182 @@
|
||||
# File Preview - Quick Guide
|
||||
|
||||
## What's New? 🎉
|
||||
|
||||
Your file attachments now have **inline preview functionality**! Users can view files directly on the page without downloading them.
|
||||
|
||||
## Supported File Types
|
||||
|
||||
### ✅ **Full Preview (in modal)**
|
||||
- 📷 **Images**: JPG, PNG, GIF, SVG, WebP, BMP
|
||||
- 📄 **PDFs**: Full document viewer
|
||||
- 🎬 **Videos**: MP4, AVI, MOV
|
||||
- 🎵 **Audio**: MP3, WAV, OGG
|
||||
|
||||
### ⚠️ **Online Preview (via Microsoft Office)**
|
||||
- 📊 **PowerPoint**: PPTX, PPT
|
||||
- 📝 **Word**: DOCX, DOC
|
||||
- 📈 **Excel**: XLSX, XLS
|
||||
|
||||
## How It Works
|
||||
|
||||
### For Visitors on Event/Activity Pages
|
||||
|
||||
1. **View Attachments**: Scroll to the "Přílohy" (Attachments) section
|
||||
2. **Preview**: Click "Náhled" button to see the file in a modal
|
||||
3. **Download**: Click "Stáhnout" to download the file
|
||||
4. **Office Docs**: Click "Zobrazit online" to view in browser
|
||||
|
||||
### For Images
|
||||
- Images display inline on the page (max 400px height)
|
||||
- Click the image to see full-size in modal
|
||||
- Zoom and view details
|
||||
|
||||
### For PDFs
|
||||
- Opens in browser's PDF viewer
|
||||
- Scroll through pages
|
||||
- Native browser controls
|
||||
|
||||
### For Videos
|
||||
- HTML5 video player
|
||||
- Play, pause, volume controls
|
||||
- Full-screen option
|
||||
|
||||
### For PowerPoint/Word/Excel
|
||||
- Shows file icon and info
|
||||
- "Stáhnout" - Direct download
|
||||
- "Zobrazit online" - Opens in Microsoft Office Online Viewer
|
||||
- Works without Office installed
|
||||
- View-only mode
|
||||
- Requires internet connection
|
||||
|
||||
## User Experience Examples
|
||||
|
||||
### Example 1: Photo Gallery
|
||||
```
|
||||
[Event Page]
|
||||
├── Photos (shown inline)
|
||||
│ ├── Photo1.jpg [Click to enlarge] [Download]
|
||||
│ ├── Photo2.jpg [Click to enlarge] [Download]
|
||||
│ └── Photo3.png [Click to enlarge] [Download]
|
||||
```
|
||||
|
||||
### Example 2: Meeting Documents
|
||||
```
|
||||
[Event Page]
|
||||
├── Attachments
|
||||
│ ├── 📊 Presentation.pptx [Preview] [Download] [View Online]
|
||||
│ ├── 📄 Minutes.pdf [Preview] [Download]
|
||||
│ └── 📝 Agenda.docx [Download] [View Online]
|
||||
```
|
||||
|
||||
### Example 3: Training Video
|
||||
```
|
||||
[Event Page]
|
||||
├── Attachments
|
||||
│ └── 🎬 Training-Session.mp4 [Preview] [Download]
|
||||
[When previewed: Video player with play/pause controls]
|
||||
```
|
||||
|
||||
## Where to Find It
|
||||
|
||||
### Frontend Pages
|
||||
- **Activity Detail Page** (`/aktivita/{id}`)
|
||||
- Displays all event attachments with previews
|
||||
- Located below the event description
|
||||
|
||||
### Future: Can be added to
|
||||
- News articles with attachments
|
||||
- Gallery pages
|
||||
- Download sections
|
||||
- Resource pages
|
||||
|
||||
## Technical Details
|
||||
|
||||
### Component Path
|
||||
`frontend/src/components/common/FilePreview.tsx`
|
||||
|
||||
### Usage in Code
|
||||
```tsx
|
||||
import FilePreview from '../components/common/FilePreview';
|
||||
|
||||
<FilePreview
|
||||
url="/uploads/2025/10/file.pptx"
|
||||
name="Presentation.pptx"
|
||||
mimeType="application/vnd.openxmlformats-officedocument.presentationml.presentation"
|
||||
size={1900000}
|
||||
showInline={false}
|
||||
/>
|
||||
```
|
||||
|
||||
## Benefits
|
||||
|
||||
### For Users
|
||||
✅ No download required to view content
|
||||
✅ Faster browsing experience
|
||||
✅ View files on any device
|
||||
✅ Office documents without Office installed
|
||||
✅ Better mobile experience
|
||||
|
||||
### For Admins
|
||||
✅ Professional presentation
|
||||
✅ Reduced support requests
|
||||
✅ Better engagement
|
||||
✅ Modern user experience
|
||||
|
||||
## Office Online Viewer
|
||||
|
||||
The "Zobrazit online" feature uses Microsoft's free service:
|
||||
|
||||
**How it works:**
|
||||
1. User clicks "Zobrazit online"
|
||||
2. Opens: `https://view.officeapps.live.com/op/view.aspx?src=[YOUR_FILE_URL]`
|
||||
3. Microsoft servers fetch your file
|
||||
4. Render it in browser
|
||||
5. View-only mode (no editing)
|
||||
|
||||
**Requirements:**
|
||||
- File must be publicly accessible (not password-protected)
|
||||
- Internet connection required
|
||||
- Works on all modern browsers
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### "Image failed to load"
|
||||
- Check file URL is accessible
|
||||
- Verify file permissions
|
||||
- Check file format is supported
|
||||
|
||||
### "PDF won't display"
|
||||
- Try downloading the file
|
||||
- Check browser supports PDF viewing
|
||||
- Clear browser cache
|
||||
|
||||
### "Office document won't open online"
|
||||
- Verify internet connection
|
||||
- Check file is publicly accessible
|
||||
- Try downloading instead
|
||||
- Some firewalls block Microsoft services
|
||||
|
||||
### Video won't play
|
||||
- Check browser supports the video format
|
||||
- Try a different browser
|
||||
- Download and use media player
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. **Test it out**: Go to any event with attachments
|
||||
2. **Upload various file types**: Try images, PDFs, PPTX
|
||||
3. **Check mobile**: Test on phone/tablet
|
||||
4. **Collect feedback**: See what users think
|
||||
|
||||
## Combining with File Tracking
|
||||
|
||||
This preview feature works perfectly with the file tracking system:
|
||||
|
||||
1. **Upload files** via admin panel
|
||||
2. **Attach to events** with proper metadata
|
||||
3. **Files are tracked** (usage count updates)
|
||||
4. **Users get previews** on frontend
|
||||
5. **Admins can manage** files efficiently
|
||||
|
||||
Both systems work together for a complete file management solution!
|
||||
Reference in New Issue
Block a user