Cara Preview image Pada Livewire

Pada dasarnya ketika melakukan upload gambar akan muncul preview gambar terlebih dahulu sebelum melakukan save atau submit, untuk memastikan gambar sudah benar untuk diupload. Tutorial kali ini saya akan membagikan cara menampilkan gambar preview menggunakan Livewire tanpa refresh page apabila anda menggunakan Livewire sebagai tambahan frontend pada website anda. Berikut skripnya

Livewire menyediakan fitur "preview URL" yang dapat digunakan untuk melihat tampilan component Livewire secara terpisah tanpa perlu menambahkannya ke halaman web yang ada. Berikut adalah langkah-langkah sederhana untuk menggunakan fitur preview URL pada Livewire:

1. Pastikan Anda sudah membuat component Livewire dengan menjalankan perintah php artisan make:livewire [nama_component].
2. Pada file PHP yang terdapat pada direktori app/Http/Livewire, tambahkan method mount ke dalam class component Livewire Anda. Method ini akan dijalankan saat component di-mount pada halaman web.

public function mount() { // Inisialisasi data atau logika lainnya di sini. }

3. Selanjutnya, buka file Blade yang terdapat pada direktori resources/views/livewire dan tambahkan kode berikut pada bagian paling atas file:

Livewire membuat script yang sangat efisien menggunakan temporaryUrl() metode untuk file upload.

Keterangan: variabel $image ialah variabel penampung image pada controller.

                       Untuk lebih jelas bisa baca dokumentasi Livewire dengan klik disini.