MyClub/DOCS/FILE_PREVIEW_QUICK_GUIDE.md

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

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!