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
```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!