Feature Request: Support non-image files (documents, PDFs, etc.) in file browser and selection

[smartlabsAT]

✨ Feature Request

Description

Currently, the file browser and file selection in the inline editor only supports image files. Users cannot select or link other file types such as documents, PDFs, presentations, spreadsheets, or other non-image assets. This severely limits the functionality for users who need to manage document libraries, resource collections, or mixed media content.

Current Limitation

• ❌ Can only select image files (jpg, png, gif, etc.)
• ❌ Documents (PDF, DOCX, XLSX, PPTX) are not selectable
• ❌ Other files (ZIP, CSV, TXT, etc.) cannot be linked
• ❌ File browser filters out non-image content

Proposed Enhancement

Enable full file type support in the file browser and selection interface, allowing users to link and manage any file type stored in Directus.

Use Cases

1. Document Management

   • Link technical documentation (PDF)
   • Attach contracts or agreements
   • Reference user manuals

2. Resource Libraries

   • Educational materials (PPTX, DOCX)
   • Downloadable templates (XLSX)
   • Code snippets or scripts (JS, PY)

3. Mixed Media Projects

   • Marketing materials (AI, PSD, SKETCH)
   • Video files (MP4, MOV)
   • Audio files (MP3, WAV)

4. Data Files

   • CSV exports/imports
   • JSON configuration files
   • XML data files

Implementation Requirements

File Type Detection

// Current (limited)
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'];

// Proposed (comprehensive)
const fileCategories = {
  images: ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'bmp', 'ico'],
  documents: ['pdf', 'doc', 'docx', 'odt', 'rtf', 'txt'],
  spreadsheets: ['xls', 'xlsx', 'csv', 'ods'],
  presentations: ['ppt', 'pptx', 'odp'],
  archives: ['zip', 'rar', '7z', 'tar', 'gz'],
  videos: ['mp4', 'avi', 'mov', 'wmv', 'webm'],
  audio: ['mp3', 'wav', 'ogg', 'flac', 'm4a'],
  code: ['js', 'ts', 'py', 'java', 'cpp', 'html', 'css', 'json', 'xml'],
  design: ['psd', 'ai', 'sketch', 'figma', 'xd']
};

function getFileType(filename) {
  const ext = filename.split('.').pop().toLowerCase();
  for (const [category, extensions] of Object.entries(fileCategories)) {
    if (extensions.includes(ext)) return category;
  }
  return 'other';
}

Display Components

File Icon Mapping

const fileIcons = {
  pdf: 'picture_as_pdf',
  doc: 'description',
  docx: 'description',
  xls: 'table_chart',
  xlsx: 'table_chart',
  ppt: 'slideshow',
  pptx: 'slideshow',
  zip: 'folder_zip',
  default: 'insert_drive_file'
};

File Preview Component

<template>
  <div class="file-preview">
    <div v-if="isImage" class="image-preview">
      <img :src="fileUrl" :alt="file.filename_disk" />
    </div>
    <div v-else class="file-icon-preview">
      <v-icon :name="getFileIcon(file.type)" large />
      <div class="file-info">
        <span class="filename">{{ file.filename_download }}</span>
        <span class="file-size">{{ formatFileSize(file.filesize) }}</span>
        <span class="file-type">{{ file.type.toUpperCase() }}</span>
      </div>
    </div>
  </div>
</template>

User Interface Enhancements

File Browser Improvements

┌────────────────────────────────────────┐
│ Select File                            │
├────────────────────────────────────────┤
│ Filter: [All Files ▼]                  │
│         • All Files                    │
│         • Images                       │
│         • Documents                    │
│         • Spreadsheets                 │
│         • Presentations                │
│         • Archives                     │
│                                        │
│ Files:                                 │
│ ┌──────┐ ┌──────┐ ┌──────┐           │
│ │ 📄   │ │ 📊   │ │ 🖼️   │           │
│ │ PDF  │ │ XLSX │ │ JPG  │           │
│ └──────┘ └──────┘ └──────┘           │
│ report   budget   photo               │
│ .pdf     .xlsx    .jpg                │
│ 2.3 MB   156 KB   3.1 MB             │
│                                        │
│ [Cancel]              [Select]         │
└────────────────────────────────────────┘

Cell Display for Files

• Show file icon based on type
• Display filename (truncated if needed)
• Optional: Show file size
• Click to download or preview

Technical Implementation

Components to Update

• src/components/FileBrowserContent.vue - Remove image-only filter
• src/components/EditableCellRelational.vue - Support all file types
• src/components/CellRenderers/ImageCell.vue - Rename to FileCell.vue or create new

New Features Needed

1. File Type Icons: Map file extensions to appropriate icons
2. File Info Display: Show name, size, type in cells
3. Preview Options: Different preview for different file types
4. Filter System: Allow filtering by file type in browser
5. Download Links: Enable file downloads from table

Configuration Options

// Layout options
{
  fileDisplay: {
    showIcon: true,
    showFilename: true,
    showSize: false,
    showType: false,
    truncateLength: 30,
    allowDownload: true,
    allowPreview: true
  },
  fileTypeFilters: ['all', 'images', 'documents', 'custom...'],
  supportedExtensions: ['*'] // or specific list
}

Benefits

1. Complete Asset Management: Handle all file types, not just images
2. Document Workflows: Support for document-centric applications
3. Flexibility: One field type for all file needs
4. Consistency: Unified interface for all file types
5. Professional Use: Essential for business applications

Acceptance Criteria

• File browser shows all file types, not just images
• Can select and link any file type from Directus Files
• Appropriate icons displayed for different file types
• File information (name, size, type) visible in cells
• Filter options to show specific file types
• Download functionality for non-previewable files
• Maintains backward compatibility with existing image fields
• Performance remains good with mixed file types

Priority

High - This is a critical feature gap that limits the extension's usefulness for many common business scenarios where document management is essential.

Additional Considerations

• Security: Respect Directus file permissions
• Performance: Lazy load file information
• Accessibility: Proper ARIA labels for file types
• Mobile: Touch-friendly file selection
• Drag & Drop: Support for file uploads
• Bulk Operations: Select multiple files

---

Note: This enhancement would make the Super Table extension suitable for a much wider range of use cases, particularly document management systems, resource libraries, and mixed-media content management.