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 in addProseMirrorPlugins().

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.