Frequently asked questions

What is darvis/livewire-flux-editor-filemanager?

It is a free Laravel package (MIT) that connects Laravel Filemanager to the rich text editor of Flux Pro in a Livewire application. It adds an image button and a file link button to the toolbar, a resize and align menu and an edit modal for images, and drop and paste of image files. It does not upload, store or serve files itself, Laravel Filemanager does that.

How do I add a file manager with image upload to the Flux editor in Laravel Livewire?

Run composer require darvis/livewire-flux-editor-filemanager and php artisan flux-filemanager:install, then use <x-flux-filemanager-editor wire:model="content" /> where you would use <flux:editor>. The toolbar gets an image button and a file link button that open Laravel Filemanager in a popup. Run php artisan flux-filemanager:check to verify the installation.

Which versions of PHP, Laravel, Livewire and Flux does it support?

PHP 8.2 or higher, Laravel 11, 12 and 13, Livewire 3 and 4, Flux and Flux Pro 2.0.2 or newer, and Laravel Filemanager 2.

Do I need Flux Pro, and what does the package cost?

The package is free, but the editor it extends is a Flux Pro component, and Flux Pro needs a paid licence from fluxui.dev. Your application must have the Flux composer repository and your licence set up, for example with php artisan flux:activate, before you require this package.

Is it safe to let users upload files with it?

The package adds no protection of its own. Who may open the file manager is decided by middlewares in config/lfm.php, and file types and sizes are checked on the server by Laravel Filemanager. The limits for dropped images in config/flux-filemanager.php are checked in the browser only, and the HTML from the editor is not sanitised, so give the editor to trusted users or sanitise the HTML before you print it.

Can editors drag images into the Flux editor or paste screenshots?

Yes. Image files dropped on the editor or pasted from the clipboard are inserted at that place. By default they are embedded as base64; set drag_drop.method to upload to post them to Laravel Filemanager instead.

How do I resize or align an image in the Flux editor?

Click the image once for a menu with the preset widths, a custom percentage and left, center and right alignment. Double-click it for a modal with alt text, title, width, alignment, extra CSS classes and inline styles.

Click the file link button in the toolbar, pick the file in Laravel Filemanager and set the link text, target, classes and styles in the modal. Click an existing link to edit it. With the default public disk the file is a public URL that anyone with the address can open.

Nothing happens when I click the image button in the Flux editor. What now?

Run php artisan flux-filemanager:check. It checks Laravel Filemanager, config/lfm.php, the routes, the authentication, the storage link, the TipTap npm packages, your app.js and the build, and prints a fix for each problem. If it passes, open the browser console, because one failing import stops all of app.js, and restart npm run dev after an update of the package.

How do I show the saved editor content on my site?

The content is HTML, so print it unescaped, and only when you trust the editors. Style .tiptap-image, .align-left, .align-center and .align-right in your own CSS, because the package’s stylesheets only cover the editor. Store the content in a longText column, because a pasted image is base64 text.