Modelable to bind a parent property to a child property

Hello,

I have a Livewire (version 3) application with a parent Livewire component and a child Livewire component. Is it possible to use the Modelable attribute in the child component to bind an uploaded file to the parent component ?

When I do so, the uploaded file passed to the parent component looks like this.

<livewire:components.upload-image-component wire:model="form.image" imageUrl="{{ $form->application->first_media_url }}"></livewire:components.upload-image-component>

livewire-file:g6UgtWw3tPQacJ2LxS7hpzE9ta9pTD-metaaG9tZS5wbmc=-.png

I have losed all informations about the file object.

How is it possible to bind the file object to the parent component ?

Do you have any suggestions ?

Thanks a lot.

martinbean

2 years ago

Level 80

@vincent15000 I’ve found Alpine’s v-model directive doesn’t really play nicely with file inputs, and you have to instead just set a property on change:

<form x-data="{ file: null }">
  <input name="file" type="file" x-on:change="file = $event.target.files[0]">
</form>

1 like

vincent15000

2 years ago

Best Answer

Level 63

@martinbean

I don't really understand how you suggestion is a solution to my problem. Can you explain me ?

For the moment I have this solution and it works.

public function updatedImage()
{
    $this->displayedImage = $this->image->temporaryUrl();
    $this->dispatch('image-updated', $this->image);
}

To retrieve the file object instead of a simple string like livewire-file:g6UgtWw3tPQacJ2LxS7hpzE9ta9pTD-metaaG9tZS5wbmc=-.png, I just have to unserialize the string.

$this->image = TemporaryUploadedFile::unserializeFromLivewireRequest($this->image);

Please or to participate in this conversation.