Appearance

Zip Shot Mixin ​

File Information ​

  • Path: mixins/zipShot.js
  • Purpose: ZIP file thumbnail generation by extracting and rendering ZIP contents

Overview ​

The Zip Shot mixin provides functionality for generating thumbnail previews of ZIP files by extracting their contents, rendering them in an iframe, and converting the rendered content to a PNG image. This creates a visual preview of ZIP file contents without requiring the user to download and extract the file.

Key Features ​

  1. ZIP Extraction

    • Extracts ZIP file contents via API
    • Gets file list and structure
    • Handles directory structure

  2. Visual Rendering

    • Renders file list in iframe
    • Creates visual representation
    • Applies icons for file types

  3. Image Generation

    • Converts rendered content to PNG
    • Uses html-to-image library
    • Returns data URL

Methods ​

getZipShot(options) ​

Generates thumbnail preview for ZIP file:

  • Validates file is ZIP
  • Extracts ZIP contents
  • Renders file list
  • Converts to PNG image
  • Returns data URL

Parameters:

  • options (Object): Options object
    • ext (string): File extension (must be 'zip')
    • blob (Blob): ZIP file blob

Returns: Promise resolving to data URL string or undefined

Throws: TypeError if extension is not 'zip'

Process Flow ​

  1. Validation

    • Checks if extension is 'zip'
    • Throws error if not ZIP

  2. ZIP Extraction

    • Sends ZIP file to /zip/extract endpoint
    • Receives file list with structure
    • Handles empty ZIP files

  3. Iframe Creation

    • Creates hidden iframe
    • Sets up document structure
    • Calculates optimal width

  4. File List Rendering

    • Sorts files (directories first, then alphabetically)
    • Creates rows for each file/folder
    • Applies appropriate icons
    • Styles for display

  5. Image Generation

    • Uses html-to-image library
    • Converts rendered content to PNG
    • Calculates optimal dimensions
    • Returns data URL

  6. Cleanup

    • Removes iframe from DOM
    • Cleans up resources

File List Structure ​

The API returns array of file objects:

javascript
[
  {
    name: "folder/file.txt",
    directory: false,
    size: 1024
  },
  {
    name: "folder/",
    directory: true
  }
]

Icon Selection ​

The mixin selects icons based on file type:

  • Directories: Folder icon
  • Images: Image icon
  • Audio: Audio icon
  • Video: Video icon
  • Other: File type icon or general icon

Usage Examples ​

Basic Usage ​

vue
<script>
import zipShot from '~/mixins/zip-shot'

export default {
  mixins: [zipShot],
  methods: {
    async generateZipThumbnail(file) {
      if (file.file_type !== 'zip') return
      
      try {
        const blob = await this.getFileBlob(file)
        const thumbnail = await this.getZipShot({
          ext: 'zip',
          blob: blob
        })
        
        if (thumbnail) {
          this.zipThumbnail = thumbnail
        }
      } catch (error) {
        console.error('Failed to generate ZIP thumbnail:', error)
      }
    }
  }
}
</script>

With File Upload ​

vue
<script>
import zipShot from '~/mixins/zip-shot'

export default {
  mixins: [zipShot],
  methods: {
    async handleZipUpload(file) {
      if (file.type === 'application/zip') {
        const thumbnail = await this.getZipShot({
          ext: 'zip',
          blob: file
        })
        
        // Use thumbnail for preview
        this.previewImage = thumbnail
      }
    }
  }
}
</script>

API Integration ​

  • POST /zip/extract - Extract ZIP file contents
    • Request: FormData with ZIP file
    • Response: Array of file objects with structure

Dependencies ​

  • html-to-image - Library for converting HTML to image
  • axios - HTTP client for API calls

Styling ​

The rendered file list uses inline styles:

  • Flexbox layout
  • Icon sizing (35x35px)
  • Text overflow handling
  • Responsive width calculation

Error Handling ​

  • Validates ZIP extension
  • Handles empty ZIP files
  • Catches image generation errors
  • Cleans up iframe on error
  • Returns undefined on failure

Performance Considerations ​

  • Iframe is hidden and removed after use
  • Image generation is async
  • File list is sorted efficiently
  • Optimal dimensions calculated
  • Cache busting for image generation

Notes for Development ​

  • Mixin only works with ZIP files
  • Requires html-to-image library
  • Iframe is created temporarily
  • File list is sorted for better display
  • Icon selection uses file type detection
  • Thumbnail dimensions are calculated dynamically