Cara Membuat File Upload Livewire – Belajar Laravel Part 5

Tekno Clarity – Cara Membuat File Upload Livewire – Belajar Laravel Part 5, Pada kesempatan kali ini admin akan membahas tentang cara membuat file upload livewire pada projek Framework Laravel.

Artikel Menarik Lainnya :

File Upload pada livewire sendiri sebenarnya sudah sangat jelas dijelaskan pada halaman dokumentasi livewire nih. Pada saat kalian menggunakan livewire sebagai bagian dari fitur file upload projek kalian maka kalian juga bisa memberikan styling yang menarik.

File Upload dengan livewire di laravel dirancang sangat lengkap, dimana kalian juga bisa menggunakan proggressive loading bar pada saat menggunakan inputan file dalam sebuah form.

Kalian dapat melihat semua dokumentasinya pada situs Livewire di sana terdapat penjelasan lengkap terkait fitur menarik yang dapat kalian kombinasikan pada form file upload kalian loh.

Cara Membuat File Upload Livewire

Pada kesempatan ini untuk kalian yang belum mengikuti seri belajar laravel dari nol versi tekno clarity, mungkin ada baiknya kalian simak deh serialnya karena ini merupakan part yang ke 5.

Pada saat kalian ingin membuat fitur file upload sebenarnya caranya sangatlah sederhana, kalian hanya perlu menambahkan statement use Livewire\WithFileUploads; pada file livewire kalian.

Sehingga hasil dari kode inputan livewire kalian akan seperti berikut ini :

use Livewire\WithFileUploads;

class UploadPhoto extends Component

{
    use WithFileUploads;
    public $photo;

    public function save()
    {
        $this->validate([
            'photo' => 'image|max:1024', // 1MB Max
        ]);
        $this->photo->store('photos');
    }
}

Sedangkan pada bagian file formulir inputan kalian, harus menggunakan tag input dengan tipe file dan pastikan pada inputan tipe file tersebut kalian sudah menggunakan wire:model yang sesuai dengan variabel pada file livewire kalian. Sehingga contohnya dapat kalian lihat seperti dibawah ini:

<form wire:submit.prevent="save">
    <input type="file" wire:model="photo">
    @error('photo') <span class="error">{{ $message }}</span> @enderror
    <button type="submit">Save Photo</button>
</form>

Sampai sini seharusnya aplikasi laravel kalian sudah dapat menyelesaikan tugas pengunggahan file ke dalam folder storage. Pastikan pula kalian menentukan format file yang boleh diupload pada bagian validasi di file livewire kalian yah.

Pastikan kalian juga mengeksekusi perintah php artisan storage:link agar dapat mengakses folder storage secara publik atau melalui folder publik projek laravel kalian.

Bila kalian tidak memberikan batasan, bisa saja sang user melakukan uploading file dengan ukuran yang sangat besar. Hal ini dapat membuat penyimpanan di hosting kalian akan cepat penuh atau membengkak dengan cepat.

6 Lokasi Penyimpanan File Upload

Setelah kalian berhasil mengupload file, maka kalian pasti ingin mengecek dimana lokasi penyimpanan dari file tersebut. Pada contoh di atas kita membuat validasi file yang dapat diupload adalah file gambar dengan ukuran maksimal 1MB.

Secara default seperti contoh yang ditunjukkan oleh kode diatas, file akan disimpan pada folder public/storage/photos nah kalian juga bisa mengubah penyimpanan dan nama file-nya loh dengan cara berikut :

// Menyimpan foto pada folder "photos" kalian bisa merubah nama folder sesuai kebutuhan kalian.
$this->photo->store('photos');

// Store in the "photos" directory in a configured "s3" bucket.
$this->photo->store('photos', 's3');

// Menyimpan foto pada folder "photos" dan memberikan nama file "avatar" terlebih dahulu, kalian bisa mengubahnya.
$this->photo->storeAs('photos', 'avatar');

// Store in the "photos" directory in a configured "s3" bucket with the filename "avatar.png".
$this->photo->storeAs('photos', 'avatar', 's3');

// Store in the "photos" directory, with "public" visibility in a configured "s3" bucket.
$this->photo->storePublicly('photos', 's3');

// Store in the "photos" directory, with the name "avatar.png", with "public" visibility in a configured "s3" bucket.
$this->photo->storePubliclyAs('photos', 'avatar', 's3');

Gimana cara membuat file upload livewire di laravel itu mudah bukan ? Untuk kalian yang ingin membuat fitur multiple file upload kalian akan merasa sangat terbantu pastinya dengan adanya livewire ini.

Video Cara Membuat File Upload Livewire di Laravel

Bila kalian mengikuti seri belajar laravel yang telah tekno clarity buat, berikut ini adalah sebuah video yang menunjukkan pembuatan fitur file upload menggunakan livewire di projek laravel, silahkan ditonton yah:

Nah jadi itulah yang dapat admin sampaikan pada artikel Cara Membuat File Upload Livewire – Belajar Laravel Part 5 kali ini, semoga bermanfaat terima kasih telah berkunjung.

Sekian dan Wassalamualaikum Warahmatullahi Wabarakatu.