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?
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!
Please or to participate in this conversation.