Cara Upload Photo Dengan Laravel Vue Js

Cara Upload Photo Dengan Laravel Vue Js – Halo semua nya, Assalaamualaikum Wr Wb..

Untuk artikel kali ini sebetulnya adalah lanjutan dari artikel sebelumnya.. Yang mana pada artikel sebelumnya kita sudah berhasil membuat CRUD dengan menggunakan Laravel dan Vue js..

Kurang lengkap rasanya jika kita tidak menambahkan modul untuk upload photo siswa nya..

Daftar Isi

Toggle

Cara Upload Photo Dengan Laravel Vue Js

Sekarang yang perlu kita lakukan yaitu menambahkan inputan dengan type file untuk upload photo nya terlebih dahulu..

Pada inputan tersebut kita juga menambahkan sebuah direktif event yaitu v-on:change yang mengarah ke method inputFile() dengan membawa parameter $event..

Parameter $event digunakan untuk membawa isi dari inputan tersebut..

Sekarang di vue js nya kita buatkan atribut baru dan juga method baru seperti berikut:

Buat atribut baru dengan nama file seperti berikut:

Kemudian, kita buatkan juga method baru dengan nama inputFile seperti berikut:

....
inputFile: function(event) {
    this.file = event.target.files[0];
}
....

Isi dari method inputFile diatas yaitu hanya untuk mengisi atribut file dengan object file yang nilai nya kita ambil dari inputan file nya..

Kemudian kita juga melakukan sedikit modifikasi pada bagian method storeSiswa nya seperti berikut:

Coba kalian perhatikan yang bertanda panah, kita turut meng-append kan atribut file ke dalam variable form_data..

Maka nanti di Controller nya, kita tinggal tangkap atribut file nya seperti berikut:

....
public function store_siswa()
{
    $id_edit = request('id_edit');
    $photo = request('file');

    if ($id_edit != "null") {
        $data = Siswa::find($id_edit);
        $data->nama = request('nama');
        $data->alamat = request('alamat');

        if ($photo) {
            $nama_file = $photo->getClientOriginalName();
            $photo->move('uploads', $nama_file);

            $data->photo = 'uploads/' . $nama_file;
        }

        $data->save();
    } else {
        $data = new Siswa;
        $data->nama = request('nama');
        $data->alamat = request('alamat');

        if ($photo) {
            $nama_file = $photo->getClientOriginalName();
            $photo->move('uploads', $nama_file);

            $data->photo = 'uploads/' . $nama_file;
        }

        $data->save();
    }

    return response()->json('sukses', 200);
}
....

Coba kalian perhatikan script diatas, pada baris ke-5 kita memanggil atribut file dengan menggunakan request seperti biasa..

Kemudian pada baris ke-12 kita memberikan kondisi, jika variable photo ada isi nya, atau ada nilai nya, maka kita menjalankan perintah yang ada didalam kondisi tersebut..

Baris ke-13 adalah perintah untuk nge-get nama asli dari file yang di upload tersebut, kemudian pada baris ke-14 kita menyimpan photo tersebut kedalam folder uploads..

Kemudian pada baris ke-16, kita menyimpan path photo nya kedalam Column photo yang ada di table siswas nya..

Kalo kalian belum punya kolom tersebut, silahkan langsung tambahkan saja dari phpmyadmin nya seperti berikut:

Membuat Preview Gambar Sebelum di Upload

Kurang lengkap rasanya jika kita tidak menambahkan fitur preview Image sebelum gambar tersebut benar-benar di upload kedalam sistem nya..

Caranya, pertama yaitu kita perlu menambahkan atribut baru dengan nama url_preview seperti berikut:

Kemudian pada method inputFile nya, kalian isi atribut url_preview nya seperti berikut:

....
inputFile: function(event) {
    this.file = event.target.files[0];
    this.url_preview = URL.createObjectURL(this.file);
}
....

Kemudian di html nya, kalian tinggal buatkan aja sebuah element yang berisi tag <img> yang mana src nya adalah nilai dari atribut url_preview nya, sebagai contoh seperti berikut:

....
<div class="form-group">
    <label for="exampleInputPassword1">Photo</label>
    <input type="file" v-on:change="inputFile($event)">

    <br>
    <div>
        <img v-if="url_preview" v-bind:src="url_preview" alt="" style="width: 100%">
    </div>
    <br>
    
</div>
....

Coba kalian perhatikan script diatas..

Pada baris ke-7 sampai ke-9 kita membuat element div baru untuk menampung preview gambar nya..

Kemudian pada baris ke-8, terdapat tag img yang mana src nya adalah nilai dari atribut url_preview nya.. Kita menggunakan perintah v-bind untuk memasukkan atribut pada vue js ke dalam atribut html..

Kemudian di elemet tersebut juga terdapa Conditional vue js, yaitu v-if=”url_preview”, yang artinya adalah element img tersebut hanya akan muncul jika atribut url_preview memiliki nilai..

Sekarang coba kalian masukkan gambar pada inputan nya, maka nanti otomatis akan muncul gambar preview nya seperti dibawah ini:

Menampilkan Photo Pada Table List Siswa

Kalo photo nya sudah berhasil terupload, sekarang kita akan coba untuk menampilkan photo nya pada table list siswa nya..

Pada vue js, kita tidak bisa memanggil langsung source gambar pada halaman view nya, url image nya harus kita define dulu pada backend nya baru kemudian kita lempar ke view nya berupa data json..

Untung nya pada laravel kita bisa menambahkan atribut pada model nya, kemudian atribut tersebut bisa kita append, sehingga nanti akan ikut terbawa pada response json nya..

Kalian modifikasi sedikit pada bagian model siswa nya menjadi seperti berikut:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Siswa extends Model
{
    use HasFactory;

    protected $appends = ['photo_siswa'];

    public function getPhotoSiswaAttribute()
    {
        //
        return asset($this->photo);
    }
}

Coba kalian perhatikan script diatas, pada baris ke-14 kita membuat sebuah atribut baru, yang mana dalam pembuatan atribut baru sudah memiliki format penulisan khusus, agar lebih jelas nya bisa kalian buka dokumentasi resmi laravel nya disini..

Kemudian pada baris ke-12, kita meng append atribut baru nya.. tujuan nya agar atribut tersebut dapat terbawa ketika kita melakukan return berupa json.. agar lebih jelas nya bisa kalian buka halaman resmi nya disini..

Maka nanti akan muncul atribut baru tersebut seperti gambar berikut:

Nah kemudian untuk menampilkan di list table siswa nya, tinggal tambahkan kolom baru saja seperti berikut, dan kita memanggil atribut photo_siswa nya dengan menggunakan perintah v-bind..

Sekarang kalo kamu refresh halaman list siswa nya, maka seharusnya akan tampil seperti berikut:

Sekian untuk tutorial kali ini, semoga bisa bermanfaat.. Trims

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..