Media Library with Livewire

I'm trying to create a Media Library component using livewire. that whenever a user is going to add an image (possibly available for videos in the future), this component shows a modal with all the images that the current user has uploaded and then selects one of them and inserts the info (id or url) in the corresponded field. the component is being called from multiple parts of the app (also livewire components). What should be the best approach??

viktort1t0

4 years ago

Level 24

Is not done yet but what i did was when calling the component use the $emitTo directive this way, pasing the full name of the component that calls the media library modal:

<button class='mt10 py10 px30 button-rounded txt-1-5 txt-white bebas-neue bg-light-green b0 cursor-pointer' wire:click="$emitTo('modal-media', 'openModal', 'campgrounds.profile-form-videos')">Add @if(count($videos) > 0) Another @endif Video</button>

received the data with a listener as it should be

protected $listeners = [
        'openModal' => 'modalOpenClose'
    ];

open the modal

public function modalOpen($test)
    {
        $this->modalIsOpen = true;
        $this->parent = $test;
    }

The modal for now is just a button that send some info

public function addImage()
    {
        $this->emitTo($this->parent, 'receivedMedia', $this->selectedImage);

        $this->modalOpenClose(null);

    }

The component that call the modal should have a listener

protected $listeners = [
        'receivedMedia' => 'changeImage'
    ];

public function changeImage($data)
    {
        $this->testData = $data;
    }

And last the part of the view where the data will be

<p>{{ $testData }}</p>

It's still just text and dummy data but it works. Now i will test it calling the media Library from another component and I let you know if works. If you have suggestion I'm all ears.