Upload dan Download File di Laravel dengan Progress Bar

Kamu pernah merasa bingung saat upload atau download file di aplikasi web, tapi nggak ada tanda-tanda prosesnya jalan atau nggak? Rasanya kayak nungguin angkot yang nggak kunjung datang—bikin was-was dan nggak nyaman. Nah, di artikel ini, kita bakal belajar bareng cara bikin fitur upload dan download file di Laravel yang dilengkapi progress bar, supaya pengguna tahu persis apa yang sedang terjadi di balik layar. Yuk, kita mulai dari awal banget, step-by-step, biar kamu bisa langsung praktik!

Kenapa Progress Bar Itu Penting?

Bayangin kamu lagi upload file besar, tapi nggak ada indikator apapun. Bisa-bisa pengguna mikir aplikasinya error atau malah tutup tab sebelum proses selesai. Progress bar itu kayak penunjuk jalan—bikin pengguna tenang karena tahu prosesnya berjalan.

Persiapan Project Laravel dari Nol

Sebelum mulai, pastikan kamu sudah punya Laravel terinstall. Kalau belum, kita mulai dari setup paling dasar:

composer create-project laravel/laravel file-progress
cd file-progress
php artisan serve

Laravel versi terbaru (pastikan cek dokumentasi Laravel untuk versi yang kamu pakai).

Membuat Fitur Upload File dengan Progress Bar

Supaya progress bar bisa update secara real-time tanpa reload, kita pakai kombinasi Livewire dan Alpine.js. Tenang, dua tools ini ramah banget buat pemula!

1. Install Livewire

composer require livewire/livewire

2. Tambahkan Livewire ke Layout

Edit file layout utama kamu (misal: resources/views/welcome.blade.php):

<head>
    @livewireStyles
</head>
<body>
    @livewire('file-upload')
    @livewireScripts
</body>

3. Buat Komponen Livewire

php artisan make:livewire FileUpload

Edit file app/Http/Livewire/FileUpload.php:

// Komponen Livewire untuk upload file dengan validasi
namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;

class FileUpload extends Component
{
    use WithFileUploads;

    public $file;

    public function save()
    {
        $this->validate([
            'file' => 'required|file|max:10240', // max 10MB
        ]);

        $this->file->store('uploads');

        session()->flash('message', 'File uploaded successfully!');
    }

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

4. Blade View dengan Progress Bar

Buat atau edit file resources/views/livewire/file-upload.blade.php:

<div x-data="{ isUploading: false, progress: 0 }"
     x-on:livewire-upload-start="isUploading = true"
     x-on:livewire-upload-finish="isUploading = false"
     x-on:livewire-upload-error="isUploading = false"
     x-on:livewire-upload-progress="progress = $event.detail.progress">

    <form wire:submit.prevent="save">
        <input type="file" wire:model="file">
        <div x-show="isUploading" class="my-2">
            <progress max="100" x-bind:value="progress" class="w-full"></progress>
            <p class="text-sm text-gray-600">Progress: <span x-text="progress"></span>%</p>
        </div>
        <button type="submit">Upload</button>
    </form>

    @if (session()->has('message'))
        <p class="text-green-600 mt-2">{{ session('message') }}</p>
    @endif
</div>

Tips Debugging Upload

Pastikan folder storage/app/uploads sudah ada dan permission-nya benar.
Jika upload gagal, cek pesan error di browser dan di log Laravel (storage/logs/laravel.log).
Untuk file besar, cek juga limit upload di php.ini (upload_max_filesize dan post_max_size).

Membuat Fitur Download File dengan Progress Bar

Secara default, download file di browser nggak ada indikator progress. Kita bisa tambahkan progress bar dengan sedikit JavaScript.

1. Route Download di Laravel

Tambahkan di routes/web.php:

use Illuminate\Support\Facades\Response;

Route::get('/download/{filename}', function ($filename) {
    $path = storage_path("app/uploads/{$filename}");
    if (!file_exists($path)) {
        abort(404);
    }
    return response()->download($path);
});

2. HTML + JavaScript untuk Progress Bar Download

Tambahkan di Blade view kamu:

<div>
    <button onclick="downloadFile('sample_file.pdf')">Download File</button>
    <div id="downloadProgress" style="width: 100%; background: #eee; height: 20px; margin-top: 10px;">
        <div id="bar" style="height: 100%; width: 0%; background: #4caf50;"></div>
    </div>
</div>

<script>
    function downloadFile(filename) {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", `/download/${filename}`, true);
        xhr.responseType = "blob";
        xhr.onprogress = function (event) {
            if (event.lengthComputable) {
                let percent = (event.loaded / event.total) * 100;
                document.getElementById('bar').style.width = percent + "%";
            }
        };
        xhr.onload = function () {
            const blob = new Blob([xhr.response]);
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = filename;
            link.click();
        };
        xhr.send();
    }
</script>

Troubleshooting Download

Pastikan file yang ingin di-download benar-benar ada di folder storage/app/uploads.
Jika download gagal, cek error di console browser dan permission file.
Untuk file besar, proses download bisa lebih lama—progress bar akan sangat membantu!

Struktur Folder Project (Contoh)

file-progress/
├── app/
│   └── Http/
│       └── Livewire/
│           └── FileUpload.php
├── resources/
│   └── views/
│       └── livewire/
│           └── file-upload.blade.php
├── routes/
│   └── web.php
├── storage/
│   └── app/
│       └── uploads/

Ringkasan & Langkah Selanjutnya

Sekarang kamu sudah bisa bikin fitur upload dan download file di Laravel yang user-friendly, lengkap dengan progress bar real-time. Fitur ini nggak cuma bikin aplikasi kamu kelihatan lebih profesional, tapi juga meningkatkan pengalaman pengguna secara signifikan.

Selanjutnya, kamu bisa eksplorasi: