File Uploads in Livewire 3.0

December 26, 2024
2:30 pm
No Comments

Step 1: Creating the Livewire Component

We’ll start by creating a new component for handling file uploads:

php artisan make:livewire FileUpload

This command will generate the following files:

				
					
app/Livewire/FileUpload.php – The PHP class for the component logic.
resources/views/livewire/file-upload.blade.php – The Blade file for the file upload UI.

This command will generate the following files:

app/Livewire/RegisterUser.php – The PHP class for the component logic.
resources/views/livewire/register-user.blade.php – The Blade file for the form UI.

Step 2: Setting Up the Component Logic

Open the FileUpload.php file and define the property for managing file uploads:

				
					<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;

class FileUpload extends Component
{
    use WithFileUploads;

    public $file;

    protected $rules = [
        'file' => 'required|mimes:jpg,jpeg,png,pdf|max:1024', // Max size: 1MB
    ];

    public function save()
    {
        $this->validate();

        // Store the file
        $filePath = $this->file->store('uploads', 'public');

        session()->flash('success', 'File uploaded successfully: ' . $filePath);

        // Reset the file input
        $this->reset('file');
    }

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

Key Points:

WithFileUploads : This trait provides the functionality to handle file uploads in Livewire.
Validation Rules: Restricts the file type to JPG, JPEG, PNG, and PDF, with a maximum size of 1MB.
store() Method:: Saves the file to the storage/app/public/uploads directory.
Flash Messages:: Notifies the user of successful uploads.

Step 3: Building the Form UI

Open the file-upload.blade.php file and create the file upload form:

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

    <form wire:submit.prevent="save">
        <div>
            <label for="file">Upload File</label>
            <input type="file" id="file" wire:model="file">
            @error('file') <span class="error">{{ $message }}</span> @enderror
        </div>

        @if ($file)
            <div>
                <p>Preview:</p>
                <img decoding="async" src="{{ $file->temporaryUrl() }}" alt="File Preview" style="max-width: 200px;">
            </div>
        @endif

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

What’s Happening Here?

wire:model="file": Binds the file input to the $file property in the component.
temporaryUrl(): Generates a temporary URL for previewing the uploaded file before saving it.
wire:submit.prevent="save": Prevents the default form submission and triggers the save() method.
Error Messages: Displays validation errors dynamically using @error

Step 4: File Preview

The temporary URL preview is particularly useful for image uploads. It allows users to see the file they are about to upload. This is achieved using:

$file->temporaryUrl()

Note: This feature is only available for local file uploads and will not work if you’re uploading files directly to external storage (e.g., S3).

Step 5: Handling Large Files

For larger file uploads, you may need to:

Update the post_max_size and upload_max_file size values in your php.ini file.
Configure chunked file uploads in Livewire using the WithFileUploads trait.

Step 6: Securing File Uploads

To ensure secure file uploads:

Restrict File Types: Use mimes or mimetypes in the validation rules.
Set File Size Limits: Use the max validation rule to prevent overly large uploads.
Sanitize File Names: Livewire automatically handles this when using store().

Final Output

With the above setup, your file upload component will:

1. Allow users to upload files interactively.
2. Display real-time validation error messages.
3. Preview uploaded files before saving them.
4. Notify users of successful uploads.

Key Features Covered Today