Appearance

Asset Details Page ​

File Information ​

  • Path: pages/_workspace_id/dam/files/_id.vue
  • Route: /:workspace_id/dam/files/:id
  • Middleware: authCheck, checkWorkspace, check-if-suspended, can-access-dam-module
  • Layout: damLayout

Purpose ​

The Asset Details Page displays comprehensive information about a digital asset, including metadata, version history, analytics, and management options. Users can view, edit, rename, download, convert, and manage asset versions and collages.

Key Features ​

  1. Asset Display

    • High-quality asset preview
    • Asset metadata (name, type, size, dimensions)
    • Upload information (uploader, date)
    • File type and format details

  2. Asset Editing

    • In-browser image editing (JPG, JPEG, PNG)
    • Crop, resize, rotate, flip operations
    • Download edited version
    • Reset to original

  3. Version Management

    • View version history
    • Upload new versions
    • Restore previous versions
    • Delete old versions

  4. Collage Management

    • Add asset to collages
    • Remove from collages
    • View all collages containing the asset

  5. Analytics & Insights

    • View count
    • Download count
    • Share count
    • Weekly insights visualization

  6. Tag Management

    • Add custom tags
    • Remove tags
    • Tag suggestions from dropdown

  7. File Operations

    • Download original file
    • Convert to different resolutions
    • Convert to different formats
    • Archive/unarchive asset

Components Used ​

  • breadCrumbs - Breadcrumb navigation
  • AssetContainer - Main asset display
  • WeeklyInsights - Analytics visualization
  • FileConversionDialog - Format/resolution selection
  • ShareAssetDialog - Share asset dialog
  • SaveToCollage - Add to collage dialog
  • DeleteDialog - Confirmation dialogs
  • Skeleton loaders for loading states

Data Properties ​

javascript
{
  asset: object,              // Asset data
  loading: boolean,           // Loading state
  editing: boolean,          // Edit mode state
  renaming: boolean,         // Renaming state
  assetVersions: array,      // Version history
  collages: array,          // Collages containing asset
  insights: object,         // Analytics data
  tags: array,             // Asset tags
  canEdit: boolean,        // Edit permission
  canConvert: boolean,     // Conversion permission
  storageFull: boolean     // Storage status
}

Computed Properties ​

  • canEditinBrowser - Check if asset can be edited in browser
  • otherResolutions - Available resolution options
  • aspectRatio - Asset aspect ratio
  • downloadableFormats - Supported download formats
  • breadcrumbChildLnk - Breadcrumb navigation links
  • menuItems - Context menu options
  • tabMenuItems - Sidebar tab items
  • assetInfoItems - Asset metadata items

Methods ​

fetchFile(flag = 'default') ​

Fetches asset details from API

fileNameEdit(flag, field_name) ​

Handles asset name/description editing

downloadAndConvertFile() ​

Opens conversion dialog or downloads file

convertResolution(width, height, quality) ​

Converts asset to specified resolution

downloadFile() ​

Downloads asset without conversion

archiveAsset() ​

Archives or unarchives the asset

changeVersion(assetVersion) ​

Restores a previous version

reloadAssetData() ​

Refreshes asset data after operations

openAdd2Collage() ​

Opens dialog to add asset to collage

refreshCollages() ​

Refreshes collage data

API Endpoints ​

  • GET /dam/files/:id - Fetch asset details
  • PUT /dam/files/:id - Update asset
  • POST /dam/files/:id/versions - Upload new version
  • PUT /dam/files/:id/versions/:version_id - Restore version
  • DELETE /dam/files/:id/versions/:version_id - Delete version
  • GET /dam/files/:id/download - Download asset
  • POST /dam/files/:id/convert - Convert asset
  • POST /dam/files/:id/tags - Add/remove tags
  • GET /dam/files/:id/analytics - Get analytics data

User Interactions ​

  1. View Asset

    • View high-quality preview
    • View metadata and information
    • Navigate via breadcrumbs

  2. Edit Asset

    • Click edit button
    • Use editing tools (crop, resize, rotate, flip)
    • Download or reset changes

  3. Manage Versions

    • View version history
    • Upload new version
    • Restore previous version
    • Delete old versions

  4. Manage Collages

    • Add to existing collage
    • Create new collage
    • Remove from collage

  5. Download & Convert

    • Download original
    • Select resolution/format
    • Convert and download