vincent15000's avatar

Upload an image via a Livewire child component

Hello,

I have a form in a Livewire component. In this form, I include a Livewire component to manage the upload of an image.

In my child controller I emit an event when the image is uploaded.

And here in my child component in which I emit an event when the image is uploaded.

public function updatedImage()
{
    $this->deleteImage = false;
    $this->url = $this->image->temporaryUrl();
    $this->uploadedImageTempUrl = $this->image->temporaryUrl();
    $this->emitUp('mediaUpdated', $this->image);
}

In my parent component view.

@livewire('upload-image')

In my parent component controller.

protected $listeners = ['mediaUpdated' => 'setMedia'];

public function setMedia($media)
{
    $this->publisher->logo = $media;
	dd($this->publisher->logo);
}

The dd() is not an file object but a simple array.

array:1 [▼
  "disk" => "local"
]

While in my child component a dd($media) gives this.

Livewire\TemporaryUploadedFile {#1217 ▼
  #storage: Illuminate\Filesystem\FilesystemAdapter {#1416 ▶}
  #path: "livewire-tmp/XJsgDBTQEkQOX5CxVl7hT7TGQAdEh2-metabnVkZS02MjU5OTMxXzE5MjAuanBn-.jpg"
  -test: false
  -originalName: "XJsgDBTQEkQOX5CxVl7hT7TGQAdEh2-metabnVkZS02MjU5OTMxXzE5MjAuanBn-.jpg"
  -mimeType: "application/octet-stream"
  -error: 0
  #hashName: null
  +"disk": "local"
  path: "/home/vincent/Documents/PRO/DEV/PERSO/boardgames/storage/app/livewire-tmp"
  filename: "XJsgDBTQEkQOX5CxVl7hT7TGQAdEh2-metabnVkZS02MjU5OTMxXzE5MjAuanBn-.jpg"
  basename: "phpzsnIoH"
  pathname: "/tmp/phpzsnIoH"
  extension: ""
  realPath: "/home/vincent/Documents/PRO/DEV/PERSO/boardgames/storage/app/livewire-tmp/XJsgDBTQEkQOX5CxVl7hT7TGQAdEh2-metabnVkZS02MjU5OTMxXzE5MjAuanBn-.jpg"
  aTime: 2021-11-03 10:16:58
  mTime: 2021-11-03 10:16:58
  cTime: 2021-11-03 10:16:58
  inode: 396438
  size: 396753
  writable: false
  readable: false
  executable: false
  file: false
  dir: false
  link: false
}

I don't understand why ... I'd like to save the image from the parent component. But it's perhaps not the best pratice.

What do you suggest me ?

Thanks for you help ;).

Vincent

0 likes
4 replies
Snapey's avatar

I think, don't try and emit a php object

1 like
vincent15000's avatar

@Snapey Ok thank you ... so you suggest me to manage the image and save it directly from the child component ? Why isn't it a good pratice to emit a php object ?

Snapey's avatar
Snapey
Best Answer
Level 122

work out what you need to pass to the other component and put it in an array, eg, maybe just the filepath

1 like

Please or to participate in this conversation.