Filemanager - Standalone or Editor

[achatzi78]

Hello.

I created a filemanager for one of my projects and I thought I post it here in case it helps someone or maybe the flux team want to use it for a starting point for when they make their own.

It can be used as a standalone filemanager (as gallery) or to select single file and get the url or it can be used with the flux editor as well.

Here is the code (obviously you would need some changes for your case)

The config file (flux-file-manager.php)

return [
    'disk' => env('FLUX_FILE_MANAGER_DISK', 'filemanager'),

    'folders' => [
        'file' => [
            'folder_name' => 'files',
            'max_size' => 50000, // size in KB
            'valid_mimes' => [
                'application/pdf',
                'text/plain',
            ],
        ],
        'image' => [
            'folder_name' => 'images',
            'max_size' => 50000, // size in KB
            'valid_mimes' => [
                'jpeg',
                'jpg',
                'png',
                'gif',
            ],
        ],
    ],
];

the blade view (flux-file-manager.blade.php)

<div
    x-data="{
        viewMode: 'grid',
        renamePath: @entangle('rename_path'),
        renameName: @entangle('rename_name'),
    }"
>
    <div class="w-full">
        {{-- Top Toolbar --}}
        <div class="flex justify-between items-end gap-4 mb-4">
            <div>
                <flux:button.group class="mb-0">
                    <flux:button wire:loading.attr="disabled" wire:target="upload"  type="button" size="sm" icon="arrow-up-tray" @click="$refs.upload.click()" tooltip="upload file" class="mb-0" />
                    <flux:modal.trigger name="createFolderModal">
                        <flux:button type="button" size="sm" icon="folder-plus" tooltip="create folder" class="mb-0 rounded-none border-s-none" />
                    </flux:modal.trigger>
                    <flux:button type="button" size="sm" icon="squares-2x2" tooltip="grid view" class="mb-0" @click="viewMode = 'grid'" />
                    <flux:button type="button" size="sm" icon="bars-4" tooltip="list view" class="mb-0" @click="viewMode = 'list'" />

                    <flux:dropdown>
                        <flux:button type="button" size="sm" icon="bars-arrow-down" tooltip="sort" class="rounded-s-none border-s-none mb-0" />
                        <flux:menu>
                            <flux:menu.item :icon="$sort_by == 'name' ? 'check' : null" wire:click="sortBy('name')">{{ __('filename') }}</flux:menu.item>
                            <flux:menu.item :icon="$sort_by == 'last_modified_at' ? 'check' : null" wire:click="sortBy('last_modified_at')">{{ __('date') }}</flux:menu.item>
                            <flux:menu.item :icon="$sort_by == 'size' ? 'check' : null" wire:click="sortBy('size')">{{ __('size') }}</flux:menu.item>
                            <flux:menu.item :icon="$sort_by == 'type' ? 'check' : null" wire:click="sortBy('type')">{{ __('type') }}</flux:menu.item>
                        </flux:menu>
                    </flux:dropdown>
                </flux:button.group>
            </div>

            <div>
                <div wire:loading wire:target="upload_files">
                    <flux:icon.loading class="inline" /> {{ __('uploading files') }}...
                </div>

                <flux:error name="upload_files" />
            </div>

            <div>
                <flux:input wire:model.live.debounce.250ms="search_term" size="sm" icon="magnifying-glass" placeholder="{{ __('search') }}..." />
            </div>
        </div>

        {{-- hidden file input --}}
        <input
            wire:model="upload_files"
            x-ref="upload"
            type="file"
            multiple
            class="hidden"
        />

        {{-- breadcrumbs --}}
        <div class="rounded-md p-1 bg-zinc-100 border border-zinc-800/10 dark:bg-white/10 dark:border-white/20">
            <flux:breadcrumbs>
                <flux:breadcrumbs.item>
                    <flux:button type="button" size="sm" variant="ghost" icon="home" wire:click="setPath('{{ $home_path }}')" />
                </flux:breadcrumbs.item>
                @foreach($this->breadcrumbs as $breadcrumb_name => $breadcrumb_path)
                    <flux:breadcrumbs.item>
                        <flux:button type="button" size="sm" variant="ghost" wire:click="setPath('{{ $breadcrumb_path }}')">
                            {{ $breadcrumb_name }}
                        </flux:button>
                    </flux:breadcrumbs.item>
                @endforeach
            </flux:breadcrumbs>
        </div>

        {{-- loader --}}
        <div class="w-full h-[4px] mt-1 mb-4">
            <div wire:loading class="w-full bg-red-200 h-[4px] overflow-hidden">
                <div class="bg-red-600 rounded-full h-[4px] animate-[swing_1s_infinite_linear] overflow-hidden origin-[0%_50%]"></div>
            </div>
        </div>

        {{-- grid --}}
        <div :class="viewMode === 'grid' ? 'flex flex-wrap items-stretch gap-4' : 'divide-y divide-zinc-800/10 dark:divide-white/20'">
            <div x-show="viewMode === 'list'" class="flex bg-zinc-100 dark:bg-white/10 flex-row w-full">
                <flux:text class="grow capitalize font-semibold p-1">{{ __('filename') }}</flux:text>
                <flux:text class="w-32 capitalize font-semibold p-1">{{ __('filetype') }}</flux:text>
                <flux:text class="w-32 capitalize font-semibold p-1">{{ __('size') }}</flux:text>
                <flux:text class="w-36 capitalize font-semibold p-1">{{ __('date') }}</flux:text>
                <flux:text class="w-28 capitalize font-semibold p-1"></flux:text>
            </div>

            @foreach($items as $item)
                <div
                    wire:key="item_{{ $item['id'] }}"
                    id="item_{{ $item['id'] }}"
                    class="flex"
                    :class="viewMode === 'grid' ? 'flex-col justify-between gap-1 border rounded text-center w-36 bg-zinc-100 dark:bg-white/10 border-zinc-800/10 dark:border-white/20' : 'flex-row w-full'"
                >
                    <div x-show="viewMode === 'grid'">
                        @if ($item['type'] == 'folder')
                            <div wire:click="setPath('{{ $item['path'] }}')" class="mb-1 cursor-pointer">
                                <flux:icon.folder class="size-20 mx-auto" />
                            </div>
                        @else
                            <div
                                class="mb-1 cursor-pointer"
                                @if ($mode != 'gallery')
                                    wire:click="select('{{ $item['path'] }}')"
                                @endif
                            >
                                @if (Str::startsWith($item['type'], 'image/'))
                                    <img
                                        src="{{ $item['url'] }}"
                                        class="w-full h-auto mx-auto"
                                        alt="Image file"
                                    />
                                @else
                                    <flux:icon.document class="size-20 mx-auto" />
                                @endif
                            </div>
                        @endif

                        <flux:text class="truncate px-1" title="{{ $item['name'] }}">{{ $item['name'] }}</flux:text>
                    </div>

                    @if ($item['type'] == 'folder')
                        <div x-show="viewMode !== 'grid'" class="flex flex-row items-center p-1 grow cursor-pointer hover:bg-zinc-100 dark:hover:bg-white/10" wire:click="setPath('{{ $item['path'] }}')">
                            <div class="px-1">
                                <flux:icon.folder class="size-4" />
                            </div>
                            <flux:text class="grow">{{ $item['name'] }}</flux:text>
                        </div>
                    @else
                        <div
                            x-show="viewMode !== 'grid'"
                            class="p-1 grow cursor-pointer flex flex-row items-center hover:bg-zinc-100 dark:hover:bg-white/10"
                            @if ($mode != 'gallery')
                                wire:click="select('{{ $item['path'] }}')"
                            @endif
                        >
                            <div class="px-1">
                                @if (Str::startsWith($item['type'], 'image/'))
                                    <img
                                        src="{{ $item['url'] }}"
                                        class="w-4 h-auto mx-auto"
                                        alt="Image file"
                                    />
                                @else
                                    <flux:icon.document class="size-4" />
                                @endif
                            </div>
                            <flux:text class="grow">{{ $item['name'] }}</flux:text>
                        </div>
                    @endif

                    <flux:text x-show="viewMode !== 'grid'" class="p-1 w-32 truncate" title="{{ $item['type'] }}">{{ $item['type'] }}</flux:text>
                    <flux:text x-show="viewMode !== 'grid'" class="p-1 w-32">{{ $item['size'] ?? '0' }}KB</flux:text>
                    <flux:text x-show="viewMode !== 'grid'" class="p-1 w-36">{{ $item['last_modified_at'] ?? '' }}</flux:text>
                    <div class="flex flex-wrap gap-2" {{--:class="{'w-28 justify-end': viewMode === 'list'}"--}} :class="viewMode === 'grid' ? 'justify-center' : 'w-28 justify-end'">
                        @if ($item['type'] != 'folder')
                            <flux:button wire:key="downloadItemBtn_{{ $item['id'] }}" size="xs" variant="ghost" icon="arrow-down-tray" tooltip="{{ __('download') }}" wire:click="download('{{ $item['path'] }}')" />
                        @endif
                        <flux:button
                            wire:key="renameItemBtn_{{ $item['id'] }}"
                            size="xs"
                            variant="ghost"
                            icon="pencil"
                            tooltip="{{ __('rename') }}"
                            x-on:click="
                                renamePath = '{{ $item['path'] }}';
                                renameName = '{{ $item['name'] }}';

                                $flux.modal('renameModal').show();
                            "
                        />
                        <flux:button wire:key="deleteItemBtn_{{ $item['id'] }}" size="xs" variant="ghost" icon="trash" tooltip="{{ __('delete') }}" wire:click="delete('{{ $item['path'] }}')" wire:confirm="{{ __('are you sure?') }}" />
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    {{-- create folder modal --}}
    <flux:modal name="createFolderModal" class="md:w-96">
        <div class="space-y-6">
            <div>
                <flux:heading size="lg" class="capitalize">{{ __('create folder') }}</flux:heading>
            </div>

            <flux:field>
                <flux:input wire:model="new_folder_name" label="{{ __('name') }}" class="required" />
                <flux:description>{{ __('no spaces, only letters, numbers, dashes or underscores') }}</flux:description>
            </flux:field>


            <div class="flex">
                <flux:spacer />
                <flux:button wire:click="createFolder" type="button" variant="primary" icon="check">{{ __('create folder') }}</flux:button>
            </div>
        </div>
    </flux:modal>

    {{-- renamer modal --}}
    <flux:modal name="renameModal" class="md:w-96">
        <div class="space-y-6">
            <div>
                <flux:heading size="lg" class="capitalize">{{ __('rename item') }}</flux:heading>
            </div>

            <flux:field>
                <flux:input
                    x-model="renameName"
                    wire:model="rename_name"
                    label="{{ __('new name') }}"
                    class="required"
                />
                <flux:description>{{ __('no spaces, only letters, numbers, dashes or underscores') }}</flux:description>
            </flux:field>

            <div class="flex">
                <flux:spacer />
                <flux:button wire:click="rename" type="button" variant="primary" icon="check">{{ __('rename item') }}</flux:button>
            </div>
        </div>
    </flux:modal>
</div>

The component (FluxFileManager.php)

namespace App\Livewire\Backend\Generic;

use Arr;
use Flux;
use Illuminate\Contracts\View\View;
use Illuminate\Support\Carbon;
use Illuminate\Validation\ValidationException;
use Livewire\Attributes\Computed;
use Livewire\Attributes\Locked;
use Livewire\Component;
use Livewire\Features\SupportFileUploads\TemporaryUploadedFile;
use Livewire\WithFileUploads;
use Storage;
use Str;
use Symfony\Component\HttpFoundation\StreamedResponse;
use Symfony\Component\Mime\MimeTypes;
use Throwable;

class FluxFileManager extends Component
{
    use WithFileUploads;

    #[Locked]
    public ?string $name = null;

    #[Locked]
    public string $mode = 'picker';    // 'picker' or 'gallery'

    #[Locked]
    public string $category = 'image'; // image or file

    public string $current_path = '';

    #[Locked]
    public array $items = [];

    public ?string $sort_by = null;

    public string $sort_direction = 'asc';

    public string $new_folder_name = '';

    public array $upload_files = [];

    #[Locked]
    public string $home_path = '/';

    #[Locked]
    public array $allowed_types = [];

    #[Locked]
    public int $max_size = 0;

    #[Locked]
    public string $disk;

    public ?string $selected_path = null;

    public ?string $rename_path = null;

    public ?string $rename_name = null;

    public ?string $search_term = null;
    
    /**
     * @throws Throwable
     */
    public function mount(string $mode = 'browse', string $path = '', string $category = 'image', string $name = null): void
    {
        $allowed_modes = [
            'picker',
            'gallery',
        ];
        $allowed_categories = [
            'image',
            'file',
        ];

        throw_unless(in_array($mode, $allowed_modes), \Exception::class, 'Invalid mode');
        throw_unless(in_array($category, $allowed_categories), \Exception::class, 'Invalid category');

        $this->disk = config('flux-file-manager.disk', 'filemanager');
        $this->mode = $mode;
        $this->current_path = $path;
        $this->home_path = $path;
        $this->category = $category;
        $this->allowed_types = config("flux-file-manager.folders.{$category}.valid_mimes", []);
        $this->max_size = config("flux-file-manager.folders.{$category}.max_size", 0);
        $this->name = $name ?? Str::uuid()->toString();

        $this->ensureDefaultFolders();
        $this->loadDirectory();
    }

    #[Computed]
    public function breadcrumbs(): array
    {
        $base = $this->home_path;
        $path = Str::after($this->current_path, $this->home_path);
        $segments = explode('/', $path);
        $breadcrumbs = [];

        foreach ($segments as $segment) {
            if (empty($segment)) {
                continue;
            }
            $breadcrumbs[$segment] = $base .= "/{$segment}";
        }

        return $breadcrumbs;
    }

    public function updatedSearchTerm(): void
    {
        $this->loadDirectory();
    }

    /**
     * @throws ValidationException
     */
    public function updatedUploadFiles(): void
    {
        $this->upload();
    }

    public function loadDirectory(): void
    {
        $this->reset('items', 'sort_by', 'sort_direction');

        $disk = Storage::disk($this->disk);

        $folders = $disk->directories($this->current_path);
        foreach ($folders as $folder) {
            $name = basename($folder);

            if (!empty($this->search_term)) {
                if (!Str::contains($name, $this->search_term, true)) {
                    continue;
                }
            }

            $this->items[] = [
                'id' => md5("folder_{$folder}"),
                'name' => $name,
                'path' => $folder,
                'url' => $disk->url($folder),
                'type' => 'folder',
            ];
        }

        $files = $disk->files($this->current_path);
        foreach ($files as $file) {
            $name = basename($file);

            if (!empty($this->search_term)) {
                if (!Str::contains($name, $this->search_term, true)) {
                    continue;
                }
            }

            $this->items[] = [
                'id' => md5($file),
                'name' => $name,
                'path' => $file,
                'url' => $disk->url($file),
                'size' => round($disk->size($file) / 1024, 2),
                'type' => $disk->mimeType($file),
                'last_modified_at' => Carbon::createFromTimestamp($disk->lastModified($file), auth()->user()->timezone)->format('Y-m-d H:i:s'),
            ];
        }

        if (empty($this->sort_by)) {
            usort($this->items, function ($a, $b) {
                // Folders first
                $a_is_folder = $a['type'] === 'folder';
                $b_is_folder = $b['type'] === 'folder';

                // If one is a folder and the other is not, the folder comes first
                if ($a_is_folder && !$b_is_folder) return -1;
                if (!$a_is_folder && $b_is_folder) return 1;

                // Otherwise, sort alphabetically by name
                return strcasecmp($a['name'], $b['name']);
            });
        }
    }

    public function sortBy($sort_by): void
    {
        // 1) Update sortField & sortDirection
        if ($this->sort_by === $sort_by) {
            $this->sort_direction = $this->sort_direction === 'asc' ? 'desc' : 'asc';
        }
        else {
            $this->sort_by = $sort_by;
            $this->sort_direction = 'asc';
        }

        // 2) Sort in-place
        usort($this->items, function (array $a, array $b) {
            $f = $this->sort_by;
            $v1 = $a[$f] ?? '';
            $v2 = $b[$f] ?? '';

            // string vs numeric
            if (is_string($v1) || is_string($v2)) {
                $cmp = strcasecmp((string)$v1, (string)$v2);
            }
            else {
                $cmp = $v1 <=> $v2;
            }

            return $this->sort_direction === 'asc' ? $cmp : -$cmp;
        });
    }

    public function setPath(string $path): void
    {
        $this->current_path = $path;
        $this->loadDirectory();
    }

    public function select($path): void
    {
        $url = Storage::disk($this->disk)->url($path);
        $this->selected_path = $url;
        $this->dispatch('fileSelected', url: $url, filemanager: $this->name ?? $this->id);
    }

    /**
     * @throws ValidationException
     */
    public function upload(): void
    {
        $this->resetValidation('upload_files');

        try {
            $this->validateOnly('upload_files');
        }
        catch (ValidationException $e) {
            Flux::toast(text: implode(', ', Arr::flatten($e->errors())), variant: 'danger');

            throw $e;
        }

        /* @var TemporaryUploadedFile $file */
        foreach ($this->upload_files as $file) {
            $file->storeAs(
                $this->current_path,
                str(pathinfo($file->getClientOriginalName(), PATHINFO_FILENAME))
                    ->slug('_')
                    ->append('.', $file->getClientOriginalExtension()),
                $this->disk
            );
        }

        $this->reset('upload_files');
        $this->loadDirectory();

        Flux::toast(text: __('Upload successful'), variant: 'success');
    }

    public function download(string $path): ?StreamedResponse
    {
        $disk = Storage::disk($this->disk);

        if (!$disk->exists($path)) {
            Flux::toast(text: __('file not found'), variant: 'danger');

            return null;
        }

        return $disk->download($path);
    }

    /**
     * @throws ValidationException
     */
    public function createFolder(): void
    {
        $this->validateOnly('new_folder_name');

        $name = str($this->new_folder_name)->trim()->slug();
        $target = "{$this->current_path}/{$name}";

        Storage::disk($this->disk)->makeDirectory($target);

        $this->current_path = $target;
        $this->reset('new_folder_name');
        $this->loadDirectory();

        $this->modal('createFolderModal')->close();
    }

    public function delete(string $path): void
    {
        $disk = Storage::disk($this->disk);

        if ($disk->exists($path)) {
            // if it's a file, mimeType() returns something; dirs return null
            if ($disk->mimeType($path)) {
                $disk->delete($path);
            }
            else {
                $disk->deleteDirectory($path);
            }

            $this->loadDirectory();
        }
    }

    public function move(string $from, string $to): void
    {
        $destination = trim($to . '/' . basename($from), '/');
        Storage::disk($this->disk)->move($from, $destination);
        $this->loadDirectory();
    }

    /**
     * @throws ValidationException
     * @throws Throwable
     */
    public function rename(): void
    {
        $disk = Storage::disk($this->disk);
        $mime = $disk->mimeType($this->rename_path);
        $parent = dirname($this->rename_path) === '.' ? '' : dirname($this->rename_path);

        //check if rename folder
        if (empty($mime)) {
            $this->validate([
                'rename_name' => $this->rules()['new_folder_name'],
            ]);

            $new_path = $parent === '' ? $this->rename_name : "{$parent}/{$this->rename_name}";

            throw_if($disk->exists($new_path), ValidationException::withMessages([
                'rename_name' => __("A folder named “{$this->rename_name}” already exists here."),
            ]));

            $disk->move($this->rename_path, $new_path);
        }
        else {
            $this->validateOnly('rename_name');

            $ext = strtolower(pathinfo($this->rename_name, PATHINFO_EXTENSION));

            $mime_types = MimeTypes::getDefault();
            $valid_mime_extensions = $mime_types->getExtensions($mime) ?: [];

            if (!in_array($ext, $valid_mime_extensions, true)) {
                throw ValidationException::withMessages([
                    'rename_name' => __("The extension “.{$ext}” does not match the file’s MIME type ({$mime}). Valid extensions for this file are: ") . implode(', ', $valid_mime_extensions),
                ]);
            }

            if (!in_array($ext, $this->allowed_types, true)) {
                throw ValidationException::withMessages([
                    'rename_name' => __("The extension “.{$ext}” is not permitted here. Allowed extensions: ") . implode(', ', $this->allowed_types),
                ]);
            }

            throw_if($disk->exists("{$this->current_path}/{$this->rename_name}"), ValidationException::withMessages([
                'rename_name' => __("A file named “{$this->rename_name}” already exists here."),
            ]));

            $disk->move($this->rename_path, "{$this->current_path}/{$this->rename_name}");
        }

        $this->loadDirectory();

        Flux::toast(text: __('rename successful'), variant: 'success');

        $this->modal('renameModal')->close();
    }

    public function render(): View
    {
        return view('livewire.backend.generic.flux-file-manager');
    }

    protected function ensureDefaultFolders(): void
    {
        $disk = Storage::disk($this->disk);

        foreach (config('flux-file-manager.folders', []) as $settings) {
            $folder = $settings['folder_name'];
            if (!$disk->exists($folder)) {
                $disk->makeDirectory($folder);
            }
        }
    }

    protected function rules(): array
    {
        return [
            'new_folder_name' => [
                'required',
                'string',
                'max:30',
                'regex:/^[A-Za-z0-9_-]+$/',
                function ($attribute, $value, $fail) {
                    $reserved = ['CON', 'PRN', 'AUX', 'NUL'];
                    for ($i = 1; $i <= 9; $i++) {
                        $reserved[] = "COM{$i}";
                        $reserved[] = "LPT{$i}";
                    }

                    if (in_array(strtoupper($value), $reserved)) {
                        $fail("The {$value} is a reserved name and cannot be used.");
                    }

                    if (preg_match('/[. ]$/', $value)) {
                        $fail("The {$value} cannot end with a space or dot.");
                    }
                },
            ],
            'upload_files' => [
                'required',
                'array',
                'min:1',
            ],
            'upload_files.*' => [
                'required',
                'file',
                'max:' . $this->max_size,
                'mimes:' . implode(',', $this->allowed_types),
            ],
            'rename_name' => [
                'required',
                'string',
                'max:255',
                'regex:/^[A-Za-z0-9_-]+\.[A-Za-z0-9]+$/',
            ],
        ];
    }
}

Now in order to use it as a standalone (gallery mode), you simple include it in your blade

<livewire:backend.generic.flux-file-manager
    mode="gallery"
    category="image"
    key="flux-gallery"
    path="images/gallery"
/>

To use it for a selector for an input or whatever, I put it in a modal and listen to the events.

In my form blade

<flux:modal.trigger name="documentPickerModal">
    <flux:button variant="ghost" icon="plus" size="xs" />
</flux:modal.trigger>
<flux:modal name="documentPickerModal" class="min-w-9/10 sm:min-w-xl md:min-w-2xl lg:min-w-4xl xl:min-w-6xl 2xl:min-w-7xl">
    <div class="space-y-6 pt-7">
        <livewire:backend.generic.flux-file-manager
            wire:key="documentPicker"
            name="documentPicker"
            mode="picker"
            category="file"
            path="files"
        />
    </div>
</flux:modal>

and in my form component I listen for the event

protected $listeners = [
    'fileSelected' => 'addDocument',
];

public function addDocument(string $url, string $filemanager): void
{
    if ($filemanager == 'documentPicker') {
        if (in_array($url, array_column($this->documents, 'url'))) {
            Flux::toast(
                text: __('validation.exists', ['attribute' => trans_choice('document', 1)]),
                variant: 'danger',
            );
        }
        else {
            $this->documents[] = [
                'name' => basename($url),
                'url' => $url,
            ];
        }

        $this->modal('documentPickerModal')->close();
    }
}

Now, for the editor, a larger setup is needed.
First install the tiptap Image extension npm install @tiptap/extension-image and then register it for the editor. Since we will be modifying various attributes we extend the Image to include these.

In your app.js file

import Image from '@tiptap/extension-image';
document.addEventListener('flux:editor', (e) => {
    e.detail.registerExtension(
        Image.configure({
            inline: true,
            HTMLAttributes: {
                //class: 'rounded shadow',
            },
        }).extend({
            addAttributes() {
                return {
                    ...this.parent?.(),
                    src: {
                        default: null,
                    },
                    alt: {
                        default: '',
                    },
                    style: {
                        default: null,
                        parseHTML: element => element.getAttribute('style'),
                        renderHTML: attributes => {
                            return {
                                style: attributes.style,
                            };
                        },
                    },
                }
            }
        })
    );

    e.detail.init(({ editor }) => {
        if (!editor.options.element) return;

        // find the FluxUI editor wrapper
        const wrapper = editor.options.element.closest('[data-flux-editor]');
        if (wrapper) {
            // stash the Editor instance for Alpine later
            wrapper.__editor = editor;
        }
});

Then create a toolbar button for the editor (resources/view/flux/editor/image.blade)

@props(['id'])

@php($picker_key = "picker_{$id}")

{{-- 1) Mount your picker-mode filemanager for this editor --}}
<flux:modal
    name="editorImageFileManagerModal_{{ $picker_key }}"
    class="min-w-9/10 sm:min-w-xl md:min-w-2xl lg:min-w-4xl xl:min-w-6xl 2xl:min-w-7xl h-3/4"
>
    <div class="py-12">
        <livewire:backend.generic.flux-file-manager
            wire:key="{{ $picker_key }}"
            name="{{ $picker_key }}"
            mode="picker"
            category="image"
            path="images"
        />
    </div>
</flux:modal>

{{-- 2) Toolbar button that opens the Image Settings modal --}}
<flux:modal.trigger name="editorImageModal_{{ $picker_key }}">
    <flux:editor.button id="editorImageModalBtn_{{ $picker_key }}" tooltip="{{ __('image') }}">
        <flux:icon.photo class="size-5!"/>
    </flux:editor.button>
</flux:modal.trigger>

{{-- 3) The Image Settings modal --}}
<flux:modal
    wire:key="editorImageModal_{{ $picker_key }}"
    name="editorImageModal_{{ $picker_key }}"
    class="w-9/10 xl:w-8/10"
>
    <div
        x-data="editorImage_{{ $picker_key }}()"
        x-init="init()"
        class="space-y-4 grid grid-cols-1 gap-4"
    >
        {{-- url --}}
        <flux:field>
            <flux:label>{{ __('url') }}</flux:label>
            <flux:input.group>
                <flux:input x-model="src"/>
                <flux:button icon="folder-open" @click="openPicker()">
                    {{ __('browse') }}
                </flux:button>
            </flux:input.group>
        </flux:field>

        {{-- alt text --}}
        <flux:input x-model="alt" label="{{ __('alt text') }}"/>

        {{-- width & height --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <flux:field>
                <flux:label>{{ __('width') }} (px)</flux:label>
                <flux:input.group>
                    <flux:input x-model.number="width" type="number"/>
                    <flux:input.group.suffix>
                        <flux:checkbox x-model="lockRatio" title="{{ __('lock ratio') }}"/>
                    </flux:input.group.suffix>
                </flux:input.group>

                <flux:description x-show="naturalWidth">
                    {{ __('original') }}: <span x-text="naturalWidth"></span>
                </flux:description>
            </flux:field>

            <flux:field>
                <flux:label>{{ __('height') }} (px)</flux:label>
                <flux:input x-model.number="height" type="number"/>
                <flux:description>
                    {{ __('original') }}: <span x-text="naturalHeight"></span>
                </flux:description>
            </flux:field>
        </div>

        {{-- border & radius --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <flux:field>
                <flux:label>{{ __('border width') }} (px)</flux:label>
                <flux:input.group>
                    <flux:input x-model.number="borderWidth" type="number"/>
                    <flux:input.group.suffix>
                        <input x-model="borderColor" type="color" title="{{ __('border color') }}"/>
                    </flux:input.group.suffix>
                </flux:input.group>
            </flux:field>

            <flux:input x-model.number="radius" type="number" label="{{ __('border radius') }} (px)"/>
        </div>

        {{-- alignment --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <flux:select x-model="align" label="{{ __('align') }}">
                <flux:select.option value="none">{{ __('none') }}</flux:select.option>
                <flux:select.option value="left">{{ __('left') }}</flux:select.option>
                <flux:select.option value="right">{{ __('right') }}</flux:select.option>
            </flux:select>
        </div>

        {{-- additional styles --}}
        <div class="grid grid-cols-1 gap-4">
            <flux:input x-model.number="additionalStyles" label="{{ __('additional styles') }}"/>
        </div>

        {{-- Live preview --}}
        <div x-ref="previewContainer" class="p-2 text-center border border-zinc-800/10 dark:border-white/20">
            <img
                :src="src"
                :alt="alt"
                :style="previewStyle()"
                class="inline-block"
            />
        </div>

        {{-- Save --}}
        <div class="flex justify-end">
            <flux:button
                variant="primary"
                icon="check"
                @click="apply()"
                class="capitalize"
            >
                {{ __('save') }}
            </flux:button>
        </div>
    </div>
</flux:modal>

{{-- 4) Alpine component (scoped per-editor via {{ $picker_key }}) --}}
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('editorImage_{{ $picker_key }}', () => ({
            // — State —
            pickerKey: '{{ $picker_key }}',
            src: '',
            alt: '',
            width: null,
            height: null,
            lockRatio: true,
            borderColor: '#000000',
            borderWidth: 0,
            radius: 0,
            align: 'none',
            naturalWidth: null,
            naturalHeight: null,
            additionalStyles: '',

            // — On modal open —
            init() {
                const wrapper = this.$el.closest('[data-flux-editor]');
                const editor = wrapper?.__editor;
                if (!editor) return;

                const {node} = editor.state.selection;
                if (node?.type.name === 'image') {
                    this.initFromImage(node);
                }

                // — Watchers for lockRatio behavior —
                this.$watch('width', newW => {
                    if (!this.lockRatio || !newW || !this.naturalWidth || !this.naturalHeight) return
                    this.height = Math.round(newW * this.naturalHeight / this.naturalWidth)
                });

                this.$watch('height', newH => {
                    if (!this.lockRatio || !newH || !this.naturalWidth || !this.naturalHeight) return
                    this.width = Math.round(newH * this.naturalWidth / this.naturalHeight)
                });

                const pm = wrapper.querySelector('.ProseMirror')
                if (pm) {
                    pm.addEventListener('dblclick', event => {
                        const el = event.target;
                        if (el.tagName === 'IMG') {
                            this.initFromImage(el);

                            Flux.modal('editorImageModal_{{ $picker_key }}').show();
                        }
                    });

                    pm.addEventListener('click', event => {
                        const el = event.target;
                        if (el.tagName === 'IMG') {
                            this.initFromImage(el);

                            document.getElementById('editorImageModalBtn_{{ $picker_key }}').classList.add('text-zinc-800', 'dark:text-white');
                        }
                        else {
                            // clicked outside any image—reset everything
                            this.src = '';
                            this.alt = '';
                            this.width = null;
                            this.height = null;
                            this.borderWidth = 0;
                            this.borderColor = '#000000';
                            this.radius = 0;
                            this.align = 'none';
                            this.additionalStyles = '';
                            this.naturalWidth = null;
                            this.naturalHeight = null;

                            document.getElementById('editorImageModalBtn_{{ $picker_key }}').classList.remove('text-zinc-800', 'dark:text-white');
                        }
                    })
                }
            },

            initFromImage(elementOrNode) {
                // --- pull src, alt, width, height, style string ---
                let src, alt, width, height, style;

                if (elementOrNode.nodeType) {
                    // a real DOM <img>
                    src = elementOrNode.getAttribute('src');
                    alt = elementOrNode.getAttribute('alt') || '';
                    width = elementOrNode.getAttribute('width');
                    height = elementOrNode.getAttribute('height');
                    style = elementOrNode.getAttribute('style') || '';
                }
                else {
                    // a ProseMirror image node
                    src = elementOrNode.attrs.src;
                    alt = elementOrNode.attrs.alt || '';
                    width = elementOrNode.attrs.width;
                    height = elementOrNode.attrs.height;
                    style = elementOrNode.attrs.style || '';
                }

                // normalize numeric attrs
                width = width ? parseInt(width) : null;
                height = height ? parseInt(height) : null;

                const getStyle = prop => {
                    const m = new RegExp(`${prop}:([^;]+)`).exec(style);
                    return m && m[1] ? m[1].trim() : '';
                }

                // if no explicit width/height, look in style: “width:123px;”
                if (!width) {
                    const ws = getStyle('width');
                    if (ws.endsWith('px')) width = parseInt(ws);
                }
                if (!height) {
                    const hs = getStyle('height');
                    if (hs.endsWith('px')) height = parseInt(hs);
                }

                // extract the rest
                const borderColor = getStyle('border-color') || '#000000';
                const borderWidth = parseInt(getStyle('border-width')) || 0;
                const radius = parseInt(getStyle('border-radius')) || 0;
                const align = getStyle('float') || 'none';

                // collect any other styles into additionalStyles
                const knownProps = ['width', 'height', 'border-width', 'border-radius', 'float', 'border-color'];
                let additional = style
                    .split(';')
                    .map(s => s.trim())
                    .filter(s => s)
                    .filter(s => {
                        const key = s.split(':')[0].trim()
                        return key && !knownProps.includes(key)
                    })
                    .join(';');
                if (additional) additional += ';';

                // assign back to Alpine state
                this.src = src;
                this.alt = alt;
                this.width = width;
                this.height = height;
                this.borderColor = borderColor;
                this.borderWidth = borderWidth;
                this.radius = radius;
                this.align = align;
                this.additionalStyles = additional;

                // load natural dimensions if needed
                const img = new Image();
                img.src = src;
                img.onload = () => {
                    this.naturalWidth = img.naturalWidth;
                    this.naturalHeight = img.naturalHeight;

                    // legacy: if still unset, default to natural
                    if (!this.width) this.width = img.naturalWidth;
                    if (!this.height) this.height = img.naturalHeight;
                }
            },

            // — Open the filemanager picker —
            openPicker() {
                Flux.modal('editorImageFileManagerModal_{{ $picker_key }}').show();

                // 4) capture the URL when the user picks a file
                const onSelect = (event) => {
                    const {url, filemanager} = event.detail || {}
                    if (filemanager === this.pickerKey) {
                        this.src = url

                        const img = new Image();
                        img.src = url;
                        img.onload = () => {
                            // only initialize width/height if they’re still unset
                            if (!this.width && !this.height) {
                                this.width = img.naturalWidth;
                                this.height = img.naturalHeight;
                                this.naturalWidth = img.naturalWidth;
                                this.naturalHeight = img.naturalHeight;
                            }
                        };
                        Flux.modal('editorImageFileManagerModal_{{ $picker_key }}').close();
                        window.removeEventListener('fileSelected', onSelect)
                    }
                }

                window.addEventListener('fileSelected', onSelect)
            },

            // — Build inline style for preview/insertion —
            previewStyle() {
                // grab the container’s max width
                const container = this.$refs.previewContainer;
                const maxW = container?.clientWidth;

                // start from the user‐entered values
                let w = this.width;
                let h = this.height;

                // if no dims at all yet, but we know natural, use natural
                if ((!w && !h) && this.naturalWidth && this.naturalHeight) {
                    w = this.naturalWidth;
                    h = this.naturalHeight;
                }

                // apply ratio locking & clamping
                if (this.lockRatio && this.naturalWidth && this.naturalHeight) {
                    const ratio = this.naturalHeight / this.naturalWidth;

                    if (w) {
                        // clamp to container if needed
                        if (maxW && w > maxW) {
                            w = maxW;
                        }
                        h = Math.round(w * ratio);
                    } else if (h) {
                        w = Math.round(h / ratio);
                    }
                }

                // build the style string
                let s = '';
                if (w) s += `width:${w}px;`;
                if (h) s += `height:${h}px;`;
                if (this.borderWidth) {
                    s += `border:${this.borderWidth}px solid ${this.borderColor};`;
                }
                if (this.radius) s += `border-radius:${this.radius}px;`;
                if (this.align !== 'none') s += `float:${this.align};`;

                return s + this.additionalStyles;
            },

            // — Insert or update the image node in Tiptap —
            apply() {
                const wrapper = this.$el.closest('[data-flux-editor]');
                const editor = wrapper?.__editor;
                if (!editor) return;

                const attrs = {
                    src: this.src,
                    alt: this.alt,
                    style: this.previewStyle(),
                };

                // use the high-level commands
                const chain = editor.chain().focus();

                //editor.commands.setImage(attrs);

                // if you’re on an existing <image/>, update its attributes,
                // otherwise insert a brand-new one:
                if (editor.isActive('image')) {
                    chain.updateAttributes('image', attrs);
                } else {
                    chain.setImage(attrs);
                }

                chain.run();

                Flux.modal('editorImageModal_{{ $picker_key }}').close();
            },
        }));
    });
</script>

Now use it with your editor like this

<flux:editor
    toolbar="heading | bold italic strike underline align | bullet ordered blockquote | subscript superscript highlight | link image | code | view-source ~ undo | redo"
    wire:key="descriptionEditor"
    id="descriptionEditor"
    name="description_editor"
    wire:model="description"
    label="{{ __('description') }}"
    :invalid="$errors->has('description')"
/>

Please note that the id attribute in the editor is important because this way the filemanager modal knows with which editor to communicate. You can have multiple editors in the same page, as long as each one has each unique id. When you click the toolbar button, the popup will open and then click on the browse button to open a new modal with the filemanager. When you select an image, the attributes will be populated (src, alt, width, height, border, radius and style). Similarly, when you double click an image in the editor (or single click and then the toolbar button) the attributes will be populated from that.

Obviously a lot of enhancements can be made, a copy and move function, a context menu for various operations and info, etc. But to be honest, for my needs it is enough and since I already spent 3 days for it, I think I will call it a day. I am not very javascript savvy also so the whole alpinejs code took a lot trial and error.

Feel free to use it however you want, no strings attached whatsoever. I just thought I save someone 3 days of pain :)

Cheers

[joffreypersia]

Great !
If you make it a repo, we could have a better look of the design and the functionalities :)

[achatzi78]

@joffreypersia I created a new repo, I don't know if this exactly what you wanted. Hopefully this can help you in any way.

https://github.com/achatzi78/flux-file-manager

Let me know if I can help in any way.

Regards