PHPackages kukux/modern-file-upload - 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. kukux/modern-file-upload ActiveLibrary[File & Storage](/categories/file-storage) kukux/modern-file-upload ======================== This is Modern File Upload v1.0.16(2w ago)046MITJavaScriptPHP ^8.2 Since Feb 28Pushed 5mo agoCompare [ Source](https://github.com/cortejojicoy/modern-file-upload)[ Packagist](https://packagist.org/packages/kukux/modern-file-upload)[ RSS](/packages/kukux-modern-file-upload/feed)WikiDiscussions main Synced 1w ago READMEChangelogDependencies (18)Versions (18)Used By (0) Modern File Upload for Filament =============================== [](#modern-file-upload-for-filament) [![Latest Version on Packagist](https://camo.githubusercontent.com/8a97364ead0bc4416db8ac006df423e60a67ad52148422b6e76c60aaccca925a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6b756b75782f6d6f6465726e2d66696c652d75706c6f61642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/kukux/modern-file-upload)[![Total Downloads](https://camo.githubusercontent.com/a2a06f63814bb5ab056b995136001db12b314e962084b911c3cb89e9c8437325/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6b756b75782f6d6f6465726e2d66696c652d75706c6f61642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/kukux/modern-file-upload)[![License](https://camo.githubusercontent.com/f5fe2cc256f089b630044e6222740c6decec3407139d963842974eae8900b0aa/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6b756b75782f6d6f6465726e2d66696c652d75706c6f61643f7374796c653d666c61742d737175617265)](LICENSE.md) A modern, React-powered file upload and file viewer plugin for [Filament](https://filamentphp.com). Supports Filament `^3.0`, `^4.0`, and `^5.0` with image previews, PDF thumbnails, gallery and list views, dark mode, and an optional document action system (verify/return) as a drop-in Filament form field and infolist entry. --- Features -------- [](#features) - **Custom file upload field** with drag & drop, progress tracking, and multi-file support - **PDF thumbnail rendering** using `pdfjs-dist` - **Image & file viewer** with zoom, pan, and page navigation - **Dark mode** support out of the box - **Gallery and list view** modes - **Optional file actions** — attach verify/return controls per file (e.g. for document approval workflows) - Assets loaded **on demand** — JS only loads on pages that use the components --- Requirements ------------ [](#requirements) - PHP `^8.2` - Laravel version compatible with your chosen Filament major - Filament `^3.0`, `^4.0`, or `^5.0` - Node.js (only needed if contributing or publishing changes) --- Installation ------------ [](#installation) Install via Composer: ``` composer require kukux/modern-file-upload ``` Important This plugin ships pre-built JS assets. After installation or package updates, run `php artisan filament:assets` in your app so Filament can publish the package assets. ### 1. Add Plugin Views to Your Tailwind Config [](#1-add-plugin-views-to-your-tailwind-config) If you are using a custom Filament theme (recommended), add the plugin's source paths so Tailwind includes its utility classes: ``` // tailwind.config.js export default { darkMode: 'class', content: [ // ... your existing paths './vendor/kukux/modern-file-upload/resources/views/**/*.blade.php', './vendor/kukux/modern-file-upload/resources/js/**/*.jsx', ], } ``` Then rebuild your theme: ``` npm run build ``` ### 2. Publish Filament Assets [](#2-publish-filament-assets) Run: ``` php artisan filament:assets ``` ### 3. Temporary Preview Behavior [](#3-temporary-preview-behavior) Fresh uploads are previewed in the browser before the form is saved, so no extra Livewire page trait is required for normal image or PDF previews. If your app still uses Livewire temporary preview configuration for PDFs, make sure the `preview_mimes` entry uses the extension format: ``` 'temporary_file_upload' => [ 'preview_mimes' => [ 'png', 'gif', 'bmp', 'svg', 'wav', 'mp4', 'mov', 'avi', 'wmv', 'mp3', 'm4a', 'jpg', 'jpeg', 'mpga', 'webp', 'wma', 'pdf', ], ], ``` Use `'pdf'`, not `'application/pdf'`. Usage ----- [](#usage) ### File Upload Field (Form) [](#file-upload-field-form) ``` use Kukux\ModernFileUpload\Forms\Components\FileUpload; public static function form(Form $form): Form { return $form->schema([ FileUpload::make('attachment') ->label('Upload File') ->disk('public') ->directory('uploads/attachments') ->accept('application/pdf') ->multiple() ]); } ``` ### File Viewer Entry (Infolist) [](#file-viewer-entry-infolist) ``` use Kukux\ModernFileUpload\Infolists\Components\FileViewer; public static function infolist(Infolist $infolist): Infolist { return $infolist->schema([ FileViewer::make('attachment') ->label('Attached File') ->showDownload() ->showPdfThumbnails(), ]); } ``` --- Optional: File Actions (Verify / Return) ---------------------------------------- [](#optional-file-actions-verify--return) For document approval workflows, you can attach per-file action controls (verify and return buttons) to any upload field. These only appear on **already saved** files — not on fresh temporary uploads. ### 1. Add a Livewire method to your resource or page [](#1-add-a-livewire-method-to-your-resource-or-page) ``` public function updateAction(int $fileId, string $action, ?string $remarks = null): void { $file = Attachment::findOrFail($fileId); $file->update([ 'status' => $action, 'remarks' => $remarks, ]); } ``` ### 2. Attach the action to your field [](#2-attach-the-action-to-your-field) ``` FileUpload::make('attachment') ->disk('public') ->directory('uploads/attachments') ->accept('application/pdf') ->fileAction(function ($record) { return [ 'method' => 'updateAction', // your Livewire method name 'fileId' => $record?->id, 'status' => $record?->status, // "verified" | "returned" | null ]; }) ``` The verify/return buttons will appear on each saved PDF thumbnail. A confirmation modal is shown before any action is taken. Returned documents require a remarks/reason field before confirming. --- Available Methods ----------------- [](#available-methods) ### `FileUpload` [](#fileupload) MethodDescription`->disk(string $disk)`Storage disk (default: `public`)`->directory(string $path)`Upload directory`->accept(string $mime)`Accepted MIME types (e.g. `application/pdf`, `image/*`)`->multiple(bool $condition)`Allow multiple file uploads`->fileAction(\Closure $callback)`Attach verify/return action controls### `FileViewer` [](#fileviewer) MethodDescription`->showDownload(bool $condition)`Show download button (default: `true`)`->showPdfThumbnails(bool $condition)`Render PDF first-page thumbnails (default: `true`)--- Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for what has changed in each release. Contributing ------------ [](#contributing) Contributions are welcome! Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. Security -------- [](#security) If you discover a security vulnerability, please review our [Security Policy](.github/SECURITY.md). Credits ------- [](#credits) - [cortejojicoy](https://github.com/cortejojicoy) - [All Contributors](../../contributors) --- License ------- [](#license) The MIT License (MIT). Please see the [License File](LICENSE.md) for more information. ### Health Score 42 — FairBetter than 88% of packages Maintenance83 Actively maintained with recent releases Popularity10 Limited adoption so far Community8 Small or concentrated contributor base Maturity56 Maturing project, gaining track record Bus Factor1 Top contributor holds 68% 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 ~9 days Recently: every ~33 days Total 17 Last Release 20d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/34363543?v=4)[cortejojicoy](/maintainers/cortejojicoy)[@cortejojicoy](https://github.com/cortejojicoy) --- Top Contributors [![cortejojicoy](https://avatars.githubusercontent.com/u/34363543?v=4)](https://github.com/cortejojicoy "cortejojicoy (17 commits)")[![Jicoy](https://avatars.githubusercontent.com/u/108109666?v=4)](https://github.com/Jicoy "Jicoy (8 commits)") --- Tags laravelfilament-pluginfilamentphpmodern-file-upload ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/kukux-modern-file-upload/health.svg) ``` [![Health](https://phpackages.com/badges/kukux-modern-file-upload/health.svg)](https://phpackages.com/packages/kukux-modern-file-upload) ``` ### Alternatives [backstage/mails View logged mails and events in a beautiful Filament UI. 16429.7k](/packages/backstage-mails)[rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3915.5k](/packages/rawilk-profile-filament-plugin)[marcelweidum/filament-passkeys Use passkeys in your filamentphp app 6758.2k2](/packages/marcelweidum-filament-passkeys)[bezhansalleh/filament-language-switch Zero config Language Switch(Changer/Localizer) plugin for filamentphp admin 3591.4M41](/packages/bezhansalleh-filament-language-switch)[stephenjude/filament-two-factor-authentication Filament Two Factor Authentication: Google 2FA + Passkey Authentication 85240.3k9](/packages/stephenjude-filament-two-factor-authentication)[relaticle/custom-fields User Defined Custom Fields for Laravel Filament 16461.2k](/packages/relaticle-custom-fields) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)