Laravel 11 Livewire 3 Download File

Websolutionstuff | Mar-04-2025 | Categories : Laravel

In this guide, I will show you how to implement file downloading in Laravel 11 using Livewire 3. Livewire makes it easy to trigger file downloads without requiring complex JavaScript. Whether you need to download PDFs, images, or other files, this guide will help you set it up step by step.

Step-by-Step Guide to File Downloading in Laravel 11 with Livewire 3

Step 1: Install Laravel 11

If Laravel 11 is not already installed, I install it using:

composer create-project laravel/laravel livewire-file-download
cd livewire-file-download

Step 2: Install Livewire 3

Next, I install Livewire 3:

composer require livewire/livewire

Step 3: Create a Livewire Component

I generate a Livewire component for handling file downloads:

php artisan make:livewire FileDownload

This creates two files:

app/Livewire/FileDownload.php (Component class)
resources/views/livewire/file-download.blade.php (Component view)

Step 4: Add File Download Logic in Livewire Component

I open app/Livewire/FileDownload.php and update it:

namespace App\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Storage;
use Symfony\Component\HttpFoundation\StreamedResponse;

class FileDownload extends Component
{
    public function downloadFile()
    {
        $filePath = 'downloads/sample.pdf'; // Change to your file path

        if (!Storage::disk('public')->exists($filePath)) {
            session()->flash('error', 'File not found!');
            return;
        }

        return Storage::disk('public')->download($filePath);
    }

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

Step 5: Create the File Download Button in the Blade View

I open resources/views/livewire/file-download.blade.php and add a button for downloading files:

<div>
    @if (session()->has('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif

    <button wire:click="downloadFile" class="btn btn-primary">Download File</button>
</div>

Step 6: Store a Sample File in the Public Disk

I make sure a sample file exists in storage/app/public/downloads/sample.pdf. If it doesn’t exist, I create it and move it to this directory.

To make sure the public storage is accessible, I run:

php artisan storage:link

Step 7: Include Livewire Component in a Blade Template

I include the Livewire component inside resources/views/welcome.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel Livewire File Download</title>
    @livewireStyles
</head>
<body>
    <div class="container">
        <h1>Laravel 11 Livewire 3 File Download</h1>
        <livewire:file-download />
    </div>
    @livewireScripts
</body>
</html>

Step 8: Run Laravel Development Server

Finally, I start the Laravel development server: