Cara Upload Photo Dengan Livewire Beserta Preview nya

Upload Photo Dengan Livewire – Haloo semuanya, Assalaamualaikum wr wb.. Sebetulnya ini adalah serial tutorial lanjutan dari artikel sebelumnya tentang Membuat CRUD dalam 1 halaman dengan Livewire..

Pada artikel tersebut kita sudah berhasil menampilkan data siswa dengan livewire, mengupdate data siswa, dan juga menghapus data siswa..

Nah kemudian ada 1 part yang ketinggalan, yaitu upload photo siswa nya, karena konten pada tutorial sebelumnya sudah terlalu panjang, maka untuk modul upload photo ini kita buatkan didalam artikel yang terpisah..

Daftar Isi

Toggle

Upload Photo Dengan Livewire

Dengan livewire, kita bisa melakukan upload photo dengan sangat mudah, tanpa reload halaman, dan juga dapat melihat preview gambar nya sebelum di upload ke sistem..

Tutorial ini berpedoman langsung dengan yang ada pada halaman resmi nya disini..

Pertama, didalam Component nya kita buatkan property baru, misalkan dengan nama $photo, seperti berikut:

use Livewire\WithFileUploads;

 

class UploadPhoto extends Component

{

    use WithFileUploads;

 

    public $photo;

 

    public function save()

    {
....
....

Perhatikan pada script diatas, pada baris ke-1 kita memanggil namespace dari Class WithFileUploads, kemudian pada baris ke-9 kita use kembali Class nya..

Pada baris ke-13 kita membuat sebuah property baru dengan nama $photo..

Kemudian nanti untuk di view nya, kita membuat sebuah inputan file seperti yang sudah biasa kita gunakan, contoh nya seperti berikut:

<input type="file" wire:model="photo">

Pada inputan tersebut, kita binding datanya terhadap property $photo yang sebelumnya sudah kita buat..

Kemudian untuk proses penyimpanan datanya seperti berikut:

....
$nama_photo = 'nama_photo_nya' . '.' . $this->logo->extension();
$this->logo->storeAs('logos', $nama_photo);

$dt = Siswa::find($this->siswa_id);
$dt->photo = 'logos/' . $nama_photo;
$dt->save();
....

Coba kalian perhatikan script diatas..

Pada baris ke-2 kita membuat nama untuk photo nya..

Kemudian pada baris ke-3 kita menyimpan photo nya didalam folder logos..

Pada baris ke-5 sampai ke-7, kita menyimpan photo tersebut didalam database..

Nah nanti untuk menampilkan gambar nya, tinggal kalian panggil seperti biasa, menggunakan html image, seperti berikut:

<img src="{{ asset($data->photo) }}" alt="Photo Siswa">

Membuat Preview Photo nya.

Dengan livewire, pada saat kita memilih photo mana yang akan di upload pada inputan file nya, nanti dari situ kita bisa langsung menampilkan preview gambar nya terlebih dahulu..

Untuk contoh koding nya adalah seperti berikut:

....
<form wire:submit.prevent="save">

    @if ($photo)

        Photo Preview:

        <img src="{{ $photo->temporaryUrl() }}">

    @endif

 

    <input type="file" wire:model="photo">

 

    @error('photo') <span class="error">{{ $message }}</span> @enderror

 

    <button type="submit">Save Photo</button>

</form>
....

Coba kalian perhatikan pada baris ke-4 sampai ke-10, kita membuat sebuah element untuk preview gambar nya, dengan kondisi property $photo sudah berisi nilai, artinya ketika kita setelah memilih photo pada inputan file nya..

Kemudian untuk menampilkan preview gambar nya, kita tinggal jalankan aja perintah $photo->temporaryUrl()..

Mudah sekali bukan? Semoga bermanfaat yaa.. Terima Kasih..

Support Us

Jika artikel ini bermanfaat untuk kamu, membantu menyelesaikan masalah yang sedang kamu hadapi, kamu juga bisa dukung kami dengan mengunjungi halaman berikut: https://saweria.co/sangcahayaid

Terima kasih..