File Downloads

The official Livewire UI kit

Build polished Livewire apps faster.

Explore Flux Pro

File downloads in Livewire work much the same as in Laravel itself. Typically, you can use any Laravel download utility inside a Livewire component, and it should work as expected.

However, behind the scenes, file downloads are handled differently than in a standard Laravel application. When using Livewire, the file's contents are Base64 encoded, sent to the frontend, and decoded back into binary to be downloaded directly from the client.

Basic usage

Triggering a file download in Livewire is as simple as returning a standard Laravel download response.

Below is an example of a show-invoice component that contains a "Download" button to download the invoice PDF:

<?php // resources/views/components/⚡show-invoice.blade.php
 
use Livewire\Component;
use App\Models\Invoice;
 
new class extends Component {
public Invoice $invoice;
 
public function mount(Invoice $invoice)
{
$this->invoice = $invoice;
}
 
public function download()
{
return response()->download(
$this->invoice->file_path, 'invoice.pdf'
);
}
};
<div>
<h1>{{ $invoice->title }}</h1>
 
<span>{{ $invoice->date }}</span>
<span>{{ $invoice->amount }}</span>
 
<button type="button" wire:click="download">Download</button>
</div>

Just like in a Laravel controller, you can also use the Storage facade to initiate downloads:

public function download()
{
return Storage::disk('invoices')->download('invoice.csv');
}

Streaming downloads

Livewire can also stream downloads; however, they aren't truly streamed. The download isn't triggered until the file's contents are collected and delivered to the browser:

public function download()
{
return response()->streamDownload(function () {
echo '...'; // Echo download contents directly...
}, 'invoice.pdf');
}

Testing file downloads

Livewire also provides a ->assertFileDownloaded() method to easily test that a file was downloaded with a given name:

use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Support\Facades\Storage;
use App\Models\Invoice;
use Livewire\Livewire;
 
uses(RefreshDatabase::class);
 
it('can download an invoice', function () {
Storage::fake('invoices');
Storage::disk('invoices')->put('invoice.pdf', 'Invoice contents');
 
$invoice = Invoice::factory()->create([
'file_path' => Storage::disk('invoices')->path('invoice.pdf'),
]);
 
Livewire::test('show-invoice', ['invoice' => $invoice])
->call('download')
->assertFileDownloaded('invoice.pdf');
});

You can also use the ->assertNoFileDownloaded() method to check that rendering the component doesn't trigger a download:

use Illuminate\Foundation\Testing\RefreshDatabase;
use App\Models\Invoice;
use Livewire\Livewire;
 
uses(RefreshDatabase::class);
 
it('does not download an invoice until requested', function () {
$invoice = Invoice::factory()->create();
 
Livewire::test('show-invoice', ['invoice' => $invoice])
->assertNoFileDownloaded();
});