Cara Upload File Livewire Laravel

Untuk melakukan upload file di Livewire Laravel sebenarnya cukup mudah, dengan hanya menambahkan module Livewire\WithFileUploads.

Ketika module tersebut ditambahkan, cukup menyeret file ke dalam input form file, maka secara otomatis berkas tersebut tersimpan dalam folder livewire-tmp.

Folder livewire-tmp dapat kita atur melalui konfigurasi livewire.

config/liwewire.php

<?php

return [
    ...
    
    'temporary_file_upload' => [
        'disk' => null, // Example: 'local', 's3'
        'directory' => null, // Example: 'tmp'
    ],
    
    ...
];

Lokasi 📁 tmp mengikuti jenis disk. Jika disk di set ke 🗄️ ‘local‘ maka lokasinya berada di 📁 ‘storage/app/liwewire-tmp‘ jika di set ke 🗄️ ‘public‘ maka 📁 ‘storage/app/public/livewire-tmp‘ atau 📁 ‘public/livewire-tmp‘.

Mengatur folder tmp ini berguna jika ingin melakukan pratinjau file yang di upload. Dengan menggunakan fungsi ⏳ temporaryUrl() pada html;

Baik kita mulai.

Pertama

Buat Class Component livewire baru. Disini saya membuat class component bernama upload dalam folder Demo.

php artisan make:livewire demo.upload

Dengan perintah di atas, dibuatkan 2 file baru berupa class component dan view.

Kedua

Modifikasi komponen yang tadi dibuat. Tambahkan dukungan upload file.

app/Livewire/Demo/Upload.php

<?php

namespace App\Livewire\Demo;

use Livewire\Component;
use Livewire\WithFileUploads; // 1

class Upload extends Component
{
    use WithFileUploads; // 1.2

    public $file; // 3 model file mixed

    public function render()
    {
        return view('livewire.demo.upload');
    }
}

Ketiga

Buat rute upload.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('demo/upload', \App\Livewire\Demo\Upload::class)->name('demo.upload');

Keempat

Modifikasi view upload.

resources/views/livewire/demo/upload.blade.php

@slot('title')
    Demo Upload File
@endslot

<div>
    <div wire:loading wire:target="file">
        <span>Menyimpan file sementara..</span>
    </div>
    
    <form>
        @csrf
        <div>
            <input type="file" wire:model="file">
        </div>
    </form>
</div>

Disana saya menambahkan wire:loading supaya menampilkan indikator sejauh mana file diproses. Juga menambahkan wire:target agar lebih spesifikasi kapan aksi ini dieksekusi.

model="file" yang saya target. Sehigga ketika model tersebut terisi / menerima request. Otomatis indikator ini dijalankan.

Ya, dengan langkah pertama, kedua dan ketiga. Kita sudah berhasil dan dapat melakukan upload file di livewire.

Tetapi, bila ingin sesuatu yang lain ikuti langkah di bawah.

Kelima

Buat fungsi baru pada class component langkah kedua, penamaanya bisa disesuaikan dengan selera.

app/Livewire/Demo/Upload.php

<?php

namespace App\Livewire\Demo;

use Livewire\Component;
use Livewire\WithFileUploads;

class Upload extends Component
{
    use WithFileUploads;

    public $file;
    
    /** fungsi upload.store */
    public function UploadStore()
    {
        $berkas = $this->file;

        /** Untuk mendapatkan nama file orsinil beserta ekstensinya */
        $name = $berkas->getClientOriginalName();

        /** Untuk mendapatkan nama file tanpa ekstensi */
        $filename = pathinfo($name)['filename'];

        /** Untuk mendapatkan extensi file */
        $ext = $berkas->getClientOriginalExtension();

        /** Untuk mendapatkan jenis mime file */
        $mime = $berkas->getMimeType();

        /** Untuk mendapatkan ukuran file dalam byte */
        $size = $berkas->getSize();

        /**
         * Upload file kedalam folder uploads
         * namai file tersebut sesuai nama asli dan ekstensinya
         * disk di set ke 'public' sehingga file akan diunggah
         * kedalam folder 'public/storage/uploads'
        */
        $this->file->storeAs(path: 'uploads', name: $name);

        /**
         * Sesi atau pesan status setelah proses upload
         */
        session()->flash('upload_store', [
            'name' => $name,
            'judul' => $filename,
            'ekstensi' => $ext,
            'mime' => $mime,
            'size' => $size,
            'file' => '/storage/uploads/' . $name
        ]);

        /**
         * Mengarahkan ke halaman saat ini
         */
        return back();
    }

    public function render()
    {
        return view('livewire.demo.upload');
    }
}

Keenam

Perbarui view blade.

resources/views/livewire/demo/upload.blade.php

@slot('title')
    Demo Upload File
@endslot

<div>
    <div wire:loading wire:target="file">
        <span>Menyimpan file sementara..</span>
    </div>

    {{-- sessi setelah upload --}}
    @session('upload_store')
    <div>
        <span>Nama File: {{ session()->get('upload_store')['name'] }}</span>
        <br>
        <span>Judul: {{ session()->get('upload_store')['judul'] }}</span>
        <br>
        <span>Mime: {{ session()->get('upload_store')['mime'] }}</span>
        <br>
        <span>Ekstensi: {{ session()->get('upload_store')['ekstensi'] }}</span>
        <br>
        <span>Ukuran: {{ session()->get('upload_store')['size'] }}</span>
        <br>
        <img src="{{ session()->get('upload_store')['file'] }}">
    </div>
    @endsession

    {{-- form upload --}}
    <form wire:submit.prevent="UploadStore">
        @csrf

        <div>
            <input id="file" type="file" wire:model="file">
        </div>

        <div>
            <button type="submit">Upload</button>
        </div>
    </form>

    {{-- Indikator ketika button upload di klik --}}
    <div wire:loading wire:target="UploadStore">
        <span>Proses upload mohon tunggu...</span>
    </div>
</div>

Hasilnya

Semoga bermanfaat 🙏

YaomiID