Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Darkdawg's avatar

Image upload in child component using modelable?

I'm using Livewire with a form object shared between a parent and a child component via modelable. I'm using the WithFileUploads trait.

class Parent extends Component {
    public ImageForm $form;
    ...


class Child extends Component {
    use WithFileUploads;

    #[Modelable]
    public ImageForm $form;
    ...

// Within the child view
<flux:input wire:model="form.uploadImage" type="file" />

// Within the parent view
<livewire:child wire:model="form" />

Selecting an image in the child component works fine - the prop becomes a TemporaryUploadedFile object, and I can read its size, mime type, etc.

However, when I fire an event that triggers validation on the parent component, the uploadImage property suddenly becomes a string (its temporary file path or something). This breaks my logic that depends on it being an object.

If I try to log it, the prop shows as /tmp/phpdonkjvj8h7kb8qCBGls at first, and afterwards when it is broken it shows as livewire-file:aDuc4cQ4h6pVxw0hWF6vswaLFWb9Fo-metac2VjdG9yLWFsYXJtLWxvZ28ucG5n-.png

Is this a known limitation of using Livewire file uploads with modelable props? Or am I missing something to keep the object type intact?

Any insights or workarounds would be appreciated!

0 likes
2 replies
Darkdawg's avatar

After some tests, it looks like it's due to how properties can be a limited set of types. If I remove #[Modelable] it works internally (but of course I can no longer access it from parent). I sort of expected it to work seeing as the component itself can handle it... Feels like a bug?

Please or to participate in this conversation.