Composer with File Uploads

[PrinceMinky]

Flux version

v2.9.2

Livewire version

v1.10.1

Tailwind version

4.0.7

Browser and Operating System

Edge on Windows

What is the problem?

I am using Flux Composer and inside of the actionsLeading slot I'm trying to integrate a multiple file uploader.

When a selects images to upload the composer is overridden by a fake URL for one of the images.

Code snippets to replicate the problem

Playground.php

namespace App\Livewire;

use Flux;
use Illuminate\Contracts\View\View;
use Livewire\Attributes\Validate;
use Livewire\Component;
use Livewire\WithFileUploads;

class Playground extends Component
{
    use WithFileUploads;

    #[Validate('required')]
    public $body;

    #[Validate(['photos.*' => 'image|max:1024'])]
    public $photos = [];

    public function send()
    {
        $this->validate();

        $this->save();
    }

    public function removePhoto($index)
    {
        $photo = $this->photos[$index];
        $photo->delete();
        unset($this->photos[$index]);
        $this->photos = array_values($this->photos);
    }

    public function save()
    {
        foreach ($this->photos as $photo) {
            $photo->store(path: 'photos');
        }

        $this->body = '';
        $this->photos = [];

        Flux::toast('Photos uploaded successfully!');
    }

    public function render(): View
    {
        return view('livewire.playground', ['photos' => $this->photos]);;
    }
}

playground.blade.php

    <!-- Test Component -->
    <form wire:submit="send">
        <flux:composer wire:model="body" label="Body" label:sr-only placeholder="How can I help you today?">
            <x-slot name="actionsLeading">
                <flux:file-upload wire:model.live="photos" multiple>
                    <flux:button size="sm" variant="subtle" icon="paper-clip" />
                </flux:file-upload>
            </x-slot>

            <x-slot name="actionsTrailing">
                <flux:button type="submit" size="sm" variant="primary" icon="paper-airplane" />
            </x-slot>
        </flux:composer>

        <!-- Media Previews -->
        <div class="mt-3 flex flex gap-2">
            @foreach ($photos as $index => $photo)
                <flux:file-item
                    :heading="$photo->getClientOriginalName()"
                    :image="$photo->temporaryUrl()"
                    :size="$photo->getSize()"
                >
                    <x-slot name="actions">
                        <flux:file-item.remove wire:click="removePhoto({{ $index }})" aria-label="{{ 'Remove file: ' . $photo->getClientOriginalName() }}" />
                    </x-slot>
                </flux:file-item>
            @endforeach
        </div>
    </form>
</div>

Screenshots/ screen recordings of the problem

Screenshot 1
This is before I click on the uploader and I have started typing my post.

Screenshot 2
Once I select the files I want to upload it overrides the value of the composer.

How do you expect it to work?

The intention is that if a user starts typing a message then decides to upload an image, the body of the message is retained so the user can continue to update their messages.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.