File View Entry

• Features
• Installation
• Quick Start
  • Register the Plugin
  • CSS Configuration (Custom Theme)
  • Basic Usage
• Configuration
  • Data Structure Mapping
  • Available Methods
  • Grid Columns Reference
• Examples
  • With Eloquent Relationship
  • Custom Data Array
  • Display Modes
    • 1. Card Grid (Default)
    • 2. Compact List
    • 3. Inline Display
    • 4. Inline with Modal Preview Button
    • 5. Remove Background and Border
  • Additional Features
    • Lazy Loading Images
    • Show File Size
    • File Count Badge
    • Loading Skeleton
    • Copy Link Button
    • Custom Icons
• Customization
  • Publish Views
• Screenshots
  • Grid Layout with File Type Icons
  • Modal Preview - Image
  • Modal Preview - Text Files
  • Modal Preview - Audio
• Supported File Types
• Requirements
• License
• Credits
• Support

A Filament plugin that provides a beautiful file attachment viewer for Infolists with type-specific icons, modal previews, and responsive grid layout.

#Features

• 🎨 Beautiful card layout with file type icons
• 🔍 Modal preview for images, videos, audio, PDFs, and text files
• 📱 Responsive grid - auto-adjusts columns based on screen size
• 🌙 Dark mode support
• 📥 Download option
• 🔧 Customizable data keys - works with any data structure
• 📦 Collection support - works with Eloquent relationships

#Installation

composer require gheith3/filament-file-view-entry

#Quick Start

#Register the Plugin

In your panel provider:

use gheith3\FileViewEntryPlugin\FileViewEntryPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugin(FileViewEntryPlugin::make());
}

#CSS Configuration (Custom Theme)

If your panel uses a custom theme registered in vite.config.js, add the following line to your theme's CSS file:

@source '../../../../vendor/gheith3/filament-file-view-entry/resources/views/**/**';

Then recompile your assets:

npm run dev

Note: This step is only required when using a custom Vite theme. The plugin works out of the box with Filament's default setup.

#Basic Usage

use gheith3\FileViewEntryPlugin\Infolists\Components\FileViewEntry;

// Single file - opens in modal when clicked
FileViewEntry::make('file_path')
    ->downloadable();

// Multiple files in grid layout
FileViewEntry::make('attachments')
    ->grid(4)
    ->downloadable();

#Configuration

#Data Structure Mapping

If your data uses different keys:

FileViewEntry::make('documents')
    ->grid(3)
    ->titleKey('title')        // Default: 'name'
    ->pathKey('path')          // Default: 'file_path'
    ->dateKey('uploaded_at')   // Default: null (hidden)
    ->downloadable();

#Available Methods

#Grid Columns Reference

FileViewEntry::make('files')
    ->grid(2)  // 2 columns on all screens
    ->grid(3)  // 2 cols mobile, 3 cols tablet+
    ->grid(4)  // 2 cols mobile, 3 tablet, 4 desktop
    ->grid(5)  // 2 cols mobile, 3 tablet, 4 desktop, 5 xl
    ->grid(6)  // 2 cols mobile, 3 tablet, 4 desktop, 6 xl

#Examples

#With Eloquent Relationship

// In your resource
public static function infolist(Infolist $infolist): Infolist
{
    return $infolist
        ->schema([
            FileViewEntry::make('uploadedFiles') // relationship name
                ->label('Attachments')
                ->grid(6)
                ->downloadable(),
        ]);
}

#Custom Data Array

$data = [
    ['title' => 'Contract.pdf', 'document_path' => 'docs/contract.pdf'],
    ['title' => 'Photo.jpg', 'document_path' => 'images/photo.jpg'],
];

FileViewEntry::make('customData')
    ->titleKey('title')
    ->pathKey('document_path')
    ->grid(2);

#Display Modes

The plugin supports three display modes:

#1. Card Grid (Default)

Files displayed as cards in a grid. Click to open modal.

FileViewEntry::make('attachments')
    ->grid(4)
    ->downloadable();

#2. Compact List

Files displayed as a simple list (icon + filename). Click to open modal.

FileViewEntry::make('attachments')
    ->showAsLink(true)         // Compact list view
    ->downloadable();

#3. Inline Display

Files displayed directly on the page with full preview.

FileViewEntry::make('attachments')
    ->asModal(false)           // Display content inline
    ->downloadable()
    ->grid(2);

#4. Inline with Modal Preview Button

When using asModal(false), you can add an eye button that opens a modal preview:

FileViewEntry::make('attachments')
    ->asModal(false)           // Display content inline
    ->withModalEye(true)       // Add eye button for modal preview
    ->downloadable()
    ->grid(2);

This shows the file content directly on the page, but adds an 👁️ (eye) icon next to the download button. Clicking the eye opens the file in a modal for larger preview.

#5. Remove Background and Border

Use contained(false) to remove the background and border from cards:

FileViewEntry::make('attachments')
    ->contained(false)         // Remove background/border
    ->grid(4);

This is useful when you want a cleaner look or when nesting inside other containers.

#Additional Features

#Lazy Loading Images

Improve page performance by lazy loading images:

FileViewEntry::make('attachments')
    ->lazyLoad(true)           // Enable lazy loading for images
    ->grid(4);

#Show File Size

Display file size next to the filename:

FileViewEntry::make('attachments')
    ->showFileSize(true)       // Show file size (e.g., "2.5 MB")
    ->grid(4);

#File Count Badge

Show a badge with the total number of files:

FileViewEntry::make('attachments')
    ->showFileCount(true)      // Show "3 files" badge
    ->grid(4);

#Loading Skeleton

Show skeleton placeholders while files are loading:

FileViewEntry::make('attachments')
    ->loadingSkeleton(true)    // Show loading skeleton
    ->grid(4);

#Copy Link Button

Add a copy button to copy the file URL to clipboard:

FileViewEntry::make('attachments')
    ->copyable(true)           // Add copy link button
    ->downloadable()
    ->grid(4);

#Custom Icons

Override default icons for specific file types or extensions:

FileViewEntry::make('attachments')
    ->customIcons([
        'psd' => 'heroicon-o-paint-brush',    // By extension
        'ai' => 'heroicon-o-swatch',
        'image' => 'heroicon-o-camera',       // By file type
        'video' => 'heroicon-o-film',
    ])
    ->grid(4);

Extension-specific icons take precedence over file type icons.

#Customization

#Publish Views

php artisan vendor:publish --tag=file-view-entry-plugin-views

Edit resources/views/vendor/file-view-entry-plugin/infolists/components/file-view-entry.blade.php

#Screenshots

#Grid Layout with File Type Icons

#Modal Preview - Image

#Modal Preview - Text Files

#Modal Preview - Audio

#Supported File Types

#Requirements

• PHP ^8.2
• Laravel ^11.0 || ^12.0
• Filament ^4.0 || ^5.0

#License

The MIT License (MIT). Please see License File for more information.

#Credits

• Created by Gheith
• Inspired by the Filament community

#Support

• 🐛 Report Issues
• 💡 Request Features