Appearance

File Type Mixin ​

File Information ​

  • Path: mixins/fileType.js
  • Purpose: File type detection and icon generation utilities

Overview ​

The File Type mixin provides computed properties and methods for detecting file types and generating appropriate icons for display. It's used throughout the application to determine file types (PDF, Image, Video, Document, etc.) and select the correct preview icons or thumbnails.

Key Features ​

  1. File Type Detection

    • PDF detection
    • Image detection
    • Video detection
    • Document detection
    • Text file detection
    • Audio detection
    • HTML detection

  2. Icon Generation

    • Preview icon selection
    • Detail icon selection
    • Thumbnail fallback logic
    • File type-specific icons

  3. Computed Properties

    • File extension access
    • URL access
    • Thumbnail access
    • Type detection flags

Computed Properties ​

__file_ext ​

Returns file extension:

  • Extracts file_type from file object
  • Used for type detection

__url ​

Returns file URL:

  • Returns display_file or compress_file
  • Used for file display

__thumb ​

Returns thumbnail:

  • Returns preview_image from file object
  • Used for preview display

__image_thumb ​

Returns image thumbnail:

  • Returns thumbnail_file from file object
  • Used for image preview

__compressed_preview ​

Returns compressed preview:

  • Returns compress_file from file object
  • Used for optimized preview

isPdf ​

Checks if file is PDF:

  • Uses $isPdf utility function
  • Returns boolean

isImage ​

Checks if file is image:

  • Uses $isImage utility function
  • Returns boolean

isVideo ​

Checks if file is video:

  • Uses $isVideo utility function
  • Returns boolean

isDoc ​

Checks if file is document:

  • Uses $isDoc utility function
  • Returns boolean

isTxt ​

Checks if file is text:

  • Uses $isTxt utility function
  • Returns boolean

isAudio ​

Checks if file is audio:

  • Uses $isAudio utility function
  • Returns boolean

isHtml ​

Checks if file is HTML:

  • Uses $isHtml utility function
  • Returns boolean

previewImage ​

Returns preview image based on route:

  • If on files route: Returns detail icon
  • Otherwise: Returns preview icon
  • Uses route name to determine context

Methods ​

getPreviewIcon(ext, thumb, imageThumb, compressedImage, url) ​

Gets preview icon for file:

  • Determines file type
  • Returns appropriate icon based on type
  • Uses fallback logic for thumbnails

Parameters:

  • ext (string): File extension (defaults to __file_ext)
  • thumb (string): Thumbnail URL (defaults to __thumb)
  • imageThumb (string): Image thumbnail URL (defaults to __image_thumb)
  • compressedImage (string): Compressed image URL (defaults to __compressed_preview)
  • url (string): File URL (defaults to __url)

Returns: Icon URL or path string

Icon Selection Logic:

  1. PDF: imageThumb → compressedImage → thumb
  2. Document: imageThumb → compressedImage → thumb
  3. HTML: imageThumb → compressedImage → thumb
  4. Audio: Audio icon SVG
  5. Video: imageThumb → Video icon SVG
  6. Image/Text: imageThumb → compressedImage → thumb
  7. Other: File type icon SVG → thumb → General icon

getDetailIcon(ext, thumb, imageThumb, compressedImage, url) ​

Gets detail icon for file (used on file details page):

  • Similar to getPreviewIcon but with different priority
  • GIF files use original URL
  • Optimized for detail view

Parameters: Same as getPreviewIcon

Returns: Icon URL or path string

Icon Selection Logic:

  1. PDF: compressedImage → imageThumb → thumb
  2. Document: compressedImage → imageThumb → thumb
  3. HTML: compressedImage → imageThumb → thumb
  4. Audio: Audio icon SVG
  5. Video: Video icon SVG
  6. Image (GIF): Original url
  7. Image (other): compressedImage → imageThumb → thumb
  8. Other: File type icon SVG → thumb → General icon

Usage Examples ​

Basic Usage ​

vue
<template>
  <div>
    <img :src="previewImage" :alt="file.display_file_name" />
    <span v-if="isPdf">PDF Document</span>
    <span v-else-if="isImage">Image File</span>
    <span v-else-if="isVideo">Video File</span>
  </div>
</template>

<script>
import fileType from '~/mixins/fileType'

export default {
  mixins: [fileType],
  props: {
    file: {
      type: Object,
      required: true
    }
  }
}
</script>

Custom Icon Selection ​

vue
<script>
import fileType from '~/mixins/fileType'

export default {
  mixins: [fileType],
  computed: {
    customIcon() {
      return this.getPreviewIcon(
        this.file.file_type,
        this.file.preview_image,
        this.file.thumbnail_file,
        this.file.compress_file,
        this.file.display_file
      )
    }
  }
}
</script>

Type-Specific Logic ​

vue
<script>
import fileType from '~/mixins/fileType'

export default {
  mixins: [fileType],
  methods: {
    handleFileClick() {
      if (this.isPdf) {
        this.openPdfViewer()
      } else if (this.isVideo) {
        this.openVideoPlayer()
      } else if (this.isImage) {
        this.openImageViewer()
      } else {
        this.downloadFile()
      }
    }
  }
}
</script>

Icon Fallback Logic ​

The mixin uses a sophisticated fallback system:

  1. First Priority: Type-specific optimized images (compressed/thumbnail)
  2. Second Priority: General thumbnails
  3. Third Priority: File type SVG icons
  4. Final Fallback: General file icon

File Type Detection ​

The mixin relies on utility functions (likely in utils/index.js):

  • $isPdf(ext) - PDF detection
  • $isImage(ext) - Image detection
  • $isVideo(ext) - Video detection
  • $isDoc(ext) - Document detection
  • $isTxt(ext) - Text detection
  • $isAudio(ext) - Audio detection
  • $isHtml(ext) - HTML detection

Integration Points ​

  • Asset List Components: File display
  • Asset Details Pages: File preview
  • Search Results: Result display
  • Upload Components: File preview
  • Utils: File type detection functions

Notes for Development ​

  • Mixin provides computed properties for easy access
  • Icon selection prioritizes optimized images
  • GIF files use original URL for animation
  • Route context affects icon selection
  • Fallback logic ensures icons always display
  • File type detection uses utility functions