Configuration
Publish the config file
The installer publishes config/flux-filemanager.php. If you skipped that step:
php artisan vendor:publish --tag=flux-filemanager-config
Without a published file the package uses the defaults below. After a change, run php artisan config:clear if your application caches its config.
Every option and its default
| Key | Default | What it does |
|---|---|---|
checklist_url | /darvis/filemanager-checklist | The page the checklist toolbar button opens in a new tab. Env variable FLUX_FILEMANAGER_CHECKLIST_URL |
custom_width.min, custom_width.max | 1, 100 | Limits of the custom percentage in the resize menu |
demo_routes | false | Registers the demo page and the checklist page. Env variable FLUX_FILEMANAGER_DEMO_ROUTES. The pages have no authentication; keep this off in production |
drag_drop.method | base64 | base64 embeds dropped and pasted images in the HTML. upload posts them to drag_drop.upload_url |
drag_drop.upload_url | /filemanager/upload | The upload endpoint for the upload method. This is Laravel Filemanager’s upload route |
drag_drop.max_file_size | 5242880 (5 MB) | Bytes. A larger dropped or pasted image is refused. Checked in the browser only |
drag_drop.allowed_types | image/jpeg, image/png, image/gif, image/webp, image/svg+xml | MIME types that may be dropped or pasted. Checked in the browser only |
messages.popup_blocked | Popup was blocked by your browser. Please allow popups for this site. | Alert shown when the browser blocks the file manager popup |
messages.filemanager_not_found | Laravel Filemanager could not be loaded. Please check your installation. | Alert shown when opening the popup throws an error |
messages.no_images_selected | No images were selected. | Not used by the package. It is not passed to the JavaScript |
popup.width, popup.height | 900, 600 | Size of the file manager popup in pixels |
resize_presets | 25%, 50%, 75%, 100% | The buttons in the resize menu and the width options in the edit modal |
url | /filemanager | Where the editor opens Laravel Filemanager. Must match url_prefix in config/lfm.php, or the URL of your own route |
The drag_drop limits only apply to images dropped on or pasted into the editor. Files uploaded inside the file manager popup are limited by config/lfm.php. See Uploads and security.
The two messages come from the config, not from the language files. They stay English in every locale until you change them here.
The checklist button
No toolbar preset contains the checklist button. It renders when checklist is in the toolbar string, for example toolbar="full | checklist" while you set up locally, and opens checklist_url in a new tab. That page only exists while demo_routes is on, so in production the button opens a 404 page unless checklist_url points at a page of your own.
How the settings reach the JavaScript
The component renders url, popup, resize_presets, custom_width, the two messages and the translations as a <script type="application/json" data-flux-filemanager-config> tag, once per page, and the drag_drop settings as data attributes on the editor element. A change in the config needs no rebuild of app.js.
If your application defines window.fluxFilemanagerConfig before the first button is used, the JavaScript reads that object instead of the JSON tag, as a whole. Keys you leave out of it fall back to the JavaScript’s built-in English defaults.
The component attributes
resources/views/livewire/page-form.blade.php:
<x-flux-filemanager-editor wire:model="content" toolbar="full" id="content" />
| Attribute | Default | What it does |
|---|---|---|
toolbar | default | A preset name (minimal, default, full), a Flux toolbar string, or false to render your own toolbar in the slot; see Toolbar buttons |
id | none | Passed to <flux:editor> |
rows | 12 | Rendered as a rows attribute on the editor element. Flux’s editor has no rows prop (checked against Flux Pro 2.20), so it does not change the height |
Every other attribute goes to <flux:editor>. wire:model, wire:model.blur and class work as they do on the Flux component.
To change the height, use the class the Flux editor documentation gives for it:
<x-flux-filemanager-editor wire:model="content" class="**:data-[slot=content]:min-h-[300px]!" />
A custom toolbar
The toolbar attribute takes a Flux toolbar string, such as toolbar="heading | bold italic | image link file-link", and with :toolbar="false" the component prints your own <flux:editor.toolbar> from the slot. Toolbar buttons has the syntax, the three presets, every button and the Blade form.
Publish the views or the translations
php artisan vendor:publish --tag=flux-filemanager-views
php artisan vendor:publish --tag=flux-filemanager-lang
Published views live in resources/views/vendor/flux-filemanager. They no longer receive updates from the package, so publish them only when you change them. A published toolbar button, such as flux/editor/image.blade.php, is used by the presets, by the toolbar string and by <flux:editor.image /> as well as by @include. Translations are covered in Localization.
The JavaScript and the stylesheets
resources/js/laravel-filemanager.js exports two functions:
initLaravelFilemanager(): connects the toolbar buttons, the resize menu, the edit modal and link editing for every Flux editor on the page, including editors that Livewire renders later, and disables the table menu in an editor whose table extensions are off. Call it once.createImageDropPastePlugin(): the ProseMirror plugin that handles dropped and pasted image files. The setup block adds it to the Image extension inaddProseMirrorPlugins().
initLaravelFilemanagerForAllEditors() still exists as a deprecated alias of initLaravelFilemanager().
The stylesheets resources/css/tiptap-image.css and resources/css/file-link-modal.css style the images in the editor, the resize menu and the modals. tiptap-image.css imports resources/css/tiptap-table.css, which holds the two table rules Flux’s own editor stylesheet lacks (no margin on the paragraph in a cell, left-aligned header cells), so that file needs no import line of its own; Tables says what Flux styles itself. Override the classes in your own CSS after importing them.