Saya membuat sebuah komponen yang reuseable di project FQ CMS untuk browse media yang bisa digunakan kembali misal di TinyMce, upload logo web, upload site Icon , upload photo profile dan lain-lain.  Jika harus dugunakan di project lain, maka beberapa file yang dibutuhkan adalah :

Pada Folder App :

• app/Livewire/Admin/MediaBrowser.php
• app/Livewire/Admin/MediaLibrary.php
• app/Livewire/Admin/MediaUpload.php

Pada Folder Resources :

• resources/views/livewire/admin/media-browser.blade.php
• resources/views/livewire/admin/media-library.blade.php
• resources/views/livewire/admin/media-upload.blade.php
• resources/views/components/modal.blade.php
• resources/views/components/loading/laoding-label.blade.php

Untuk penjelasan files diatas saya kira sudah bisa dipahami dengan nama filenya. hanya yang perlu menjadi catatan adalah file media-browser.blade.php terdiri dari dua komponen yaitu media-library dan media-upload. konsep ini terinspirasi dari browse media di CMS Wordpress. Terima kasih Wordpress :)

Langkah 1

Copy Semua file diatas ke project baru

Langkah 2

Komponen ini hanya bisa digunakan pada komponen livewire bukan pada blade biasa.

Langkah 3

Pada controller livewire yang menggunakan media browser buat property public dengan nama yang persis seperti di bawah ini :

public bool $showModal = false;

Variabel $showModal berfungsi untuk menampilkan dan menutup modal yang berisi media browser

Langkah 4

Sedangkan di view livewire kita panggil komponen media-browser.blade.php biasanya saya memanggilnya dengan menggunakan modal jadi mirip seperti UI windows saat harus browse file. berikut contohnya :

<x-modal  :id-modal="'modal-media-thumb'" wire:model="showModal" :title="'Select Media'">
       @livewire('admin.media-browser')
</x-modal>

Penjelasan : 

• Komponen modal memiliki 3 parameter yang boleh dirubah hanya parameter :id-modal dan :title
• Sedangkan parameter dari @livewire adalah namespace dari class controller livewire yaitu app/Livewire/Admin/MediaBrowser.php
• Jika nama classnya adalah MediaBrowser maka penulisannya adalah media-browser 
• Sedangkan admin. adalah nama subfolder dari lokasi class livewire
• Perhatikan bahwa walaupun di app/livewire menggunkan huruf besar tetapi saat digunakan di blade menggunakan huruf kecil semua. Mungkin persoalan huruf kecil dan besar tidak berpengaruh di windows tetapi akan error di linux.

Langkah 5

membuat funtion di alpinejs dengan nama persis selectImage() untuk isinya berfungsi untuk memanggil value dari media yang dipilih meliputi mime, id, url . Contohnya :

selectImage(){
    this.imageUrl = window.mediaChoose.url
    this.imageId = window.mediaChoose.id
    @this.set('showModal', false)   // agar modal media browser close
}

Penjelasan :

Function selectImage() dipanggil saat user klik tombol "Select Image" yang ada di komponen browser

Langkah 6

Buat variabel js yang bersifat global yang bisa dipanggil dimana saja. karena value dari variabel ini akan berbagi antara komponen media-browser dan komponen yang menggunakannya.

Saya biasanya membuat variabel bersifat global dan bisa dipanggil di semua layout di file resources/js/app.js  tetapi untuk nama variablenya harus sama persis di bawah ini

window.mediaChoose = ''

lalu di file resources/js/app.js saya membuat function global . Silahkan di modifikasi isi functionnya tapi jangan pernah merubah nama functionnya

window.getMediaChoose = function(mime,id,url) {
    if(mime.includes("image")){
        window.mediaChoose = {
            id: id,
            url: url,
            type: 'image'
        }
    }else if(mime.includes("video")){
        return mime.split('/')[1].toUpperCase()
    }else{
        switch(mime){
            case 'application/pdf': return "PDF"
            case 'application/msword':
            case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': return "MS Word"
            case 'application/vnd.ms-excel':
            case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': return "MS Excel"
            case 'application/zip': return "ZIP"
            case 'application/vnd.rar': return "RAR"
            default: return "Document"
        }
    }
}

Penjelasan : 

Function getMediaChoose() dipanggil saat memilih gambar/video/document di media browser 

Pastikan file resources/js/app.js dipanggil di header layout. Jika menggunakan vite pastikan app.js berada di array milik vite