PHPackages                             gheith3/filament-file-view-entry - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [File & Storage](/categories/file-storage)
4. /
5. gheith3/filament-file-view-entry

ActiveLibrary[File & Storage](/categories/file-storage)

gheith3/filament-file-view-entry
================================

A Filament plugin for displaying file attachments with type-specific icons and modal preview

v1.3.1(2mo ago)3149↓46.2%1MITBladePHP ^8.2CI passing

Since Feb 19Pushed 2mo agoCompare

[ Source](https://github.com/gheith3/FileViewEntryPlugin)[ Packagist](https://packagist.org/packages/gheith3/filament-file-view-entry)[ Docs](https://github.com/gheith3/FileViewEntryPlugin)[ RSS](/packages/gheith3-filament-file-view-entry/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (12)Versions (8)Used By (0)

Filament File View Entry
========================

[](#filament-file-view-entry)

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

 [![File View Entry - Grid Layout with File Type Icons](screenshots/gheith3-file-view-entry.jpg)](screenshots/gheith3-file-view-entry.jpg)

Features
--------

[](#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
------------

[](#installation)

```
composer require gheith3/filament-file-view-entry
```

Quick Start
-----------

[](#quick-start)

### Register the Plugin

[](#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)

[](#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

[](#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
-------------

[](#configuration)

### Data Structure Mapping

[](#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

[](#available-methods)

MethodDescription`grid(int $columns)`Set grid columns (1-6, auto-responsive)`titleKey(string $key)`Key for file title`pathKey(string $key)`Key for file path`dateKey(?string $key)`Key for date (null to hide)`asModal(bool $enabled)`Show content in modal (default: true)`withModalEye(bool $enabled)`Add eye button for modal preview when asModal(false)`showAsLink(bool $enabled)`Show as compact list (default: false)`contained(bool $enabled)`Show background/border (default: true)`lazyLoad(bool $enabled)`Lazy load images (default: false)`showFileSize(bool $enabled)`Show file size (default: false)`showFileCount(bool $enabled)`Show file count badge (default: false)`loadingSkeleton(bool $enabled)`Show loading skeleton (default: false)`copyable(bool $enabled)`Add copy link button (default: false)`customIcons(array $icons)`Custom icons for file types/extensions`disk(string $disk)`Storage disk name`downloadable(bool $enabled)`Show download button`previewHeight(int|string $height)`Modal height (default: 300px)### Grid Columns Reference

[](#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
--------

[](#examples)

### With Eloquent Relationship

[](#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

[](#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

[](#display-modes)

The plugin supports three display modes:

#### 1. Card Grid (Default)

[](#1-card-grid-default)

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

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

#### 2. Compact List

[](#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

[](#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

[](#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

[](#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

[](#additional-features)

#### Lazy Loading Images

[](#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

[](#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

[](#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

[](#loading-skeleton)

Show skeleton placeholders while files are loading:

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

#### Copy Link Button

[](#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

[](#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
-------------

[](#customization)

### Publish Views

[](#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
-----------

[](#screenshots)

### Grid Layout with File Type Icons

[](#grid-layout-with-file-type-icons)

 [![File View Entry - Grid Layout](screenshots/1.png)](screenshots/1.png)

### Modal Preview - Image

[](#modal-preview---image)

 [![Image Preview Modal](screenshots/2.png)](screenshots/2.png)

### Modal Preview - Text Files

[](#modal-preview---text-files)

 [![Text File Preview Modal](screenshots/3.png)](screenshots/3.png)

### Modal Preview - Audio

[](#modal-preview---audio)

 [![Audio Preview Modal](screenshots/4.png)](screenshots/4.png)

Supported File Types
--------------------

[](#supported-file-types)

TypeExtensionsPreviewImagejpg, jpeg, png, gif, bmp, svg, webp✓Videomp4, mov, avi, mkv, webm, flv, wmv✓Audiomp3, wav, ogg, flac, aac, m4a✓PDFpdf✓Texttxt, md✓Other\*Opens in new tabRequirements
------------

[](#requirements)

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

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

Credits
-------

[](#credits)

- Created by [Gheith](https://github.com/gheith3)
- Inspired by the Filament community

Support
-------

[](#support)

- 🐛 [Report Issues](https://github.com/gheith3/FileViewEntryPlugin/issues)
- 💡 [Request Features](https://github.com/gheith3/FileViewEntryPlugin/discussions)

###  Health Score

44

—

FairBetter than 92% of packages

Maintenance87

Actively maintained with recent releases

Popularity19

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity51

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~3 days

Total

7

Last Release

65d ago

PHP version history (2 changes)v1.0.0PHP ^8.1

v1.0.1PHP ^8.2

### Community

Maintainers

![](https://www.gravatar.com/avatar/40fb690c7a72b7c851271f59a713bed5a01050044c4c89ca86e0c4760dba72b1?d=identicon)[gheith3](/maintainers/gheith3)

---

Top Contributors

[![gheith3](https://avatars.githubusercontent.com/u/12110656?v=4)](https://github.com/gheith3 "gheith3 (19 commits)")

---

Tags

laravelfilamentfilament-plugininfolistfile-view

###  Code Quality

TestsPest

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/gheith3-filament-file-view-entry/health.svg)

```
[![Health](https://phpackages.com/badges/gheith3-filament-file-view-entry/health.svg)](https://phpackages.com/packages/gheith3-filament-file-view-entry)
```

###  Alternatives

[bezhansalleh/filament-shield

Filament support for `spatie/laravel-permission`.

2.8k2.9M88](/packages/bezhansalleh-filament-shield)[spatie/laravel-google-cloud-storage

Google Cloud Storage filesystem driver for Laravel

2408.9M13](/packages/spatie-laravel-google-cloud-storage)[croustibat/filament-jobs-monitor

Background Jobs monitoring like Horizon for all drivers for FilamentPHP

254255.2k6](/packages/croustibat-filament-jobs-monitor)[andrewdwallo/filament-companies

A comprehensive Laravel authentication and authorization system designed for Filament, focusing on multi-tenant company management.

34450.0k2](/packages/andrewdwallo-filament-companies)[mwguerra/filemanager

A full-featured file manager package for Laravel and Filament v5 with dual operating modes, drag-and-drop uploads, S3/MinIO support, and comprehensive security features.

718.5k1](/packages/mwguerra-filemanager)[caresome/filament-neobrutalism-theme

A neobrutalism theme for FilamentPHP admin panels

303.2k](/packages/caresome-filament-neobrutalism-theme)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)