Uploading Files with Laravel Livewire: A Step-By-Step Guide

Laravel Livewire is a powerful framework that enables you to build dynamic web applications with minimal effort. One of the features that Livewire offers is file uploads. In this blog post, we will explore how to upload files using Livewire in Laravel.

Step 1: Set up the Livewire Component

Firstly, we need to create a Livewire component that will handle the file upload. You can use the following command to create a new Livewire component:

php artisan make:livewire FileUpload

This command will create a new Livewire component called FileUpload in the app/Http/Livewire directory. Open the newly created component file and add the following code:

use Livewire\Component;
use Livewire\WithFileUploads;

class FileUpload extends Component
{
    use WithFileUploads;

    public $file;

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

    public function save()
    {
        $this->validate([
            'file' => 'required|mimes:jpg,png,jpeg,gif|max:2048',
        ]);

        $path = $this->file->store('public');

        // Do something with the file path
    }
}

In this code, we have added the WithFileUploads trait to our component, which provides us with a simple way to handle file uploads. We have also added a public $file property, which will hold the uploaded file. The render() method returns the view for the component, which we will create in the next step. Finally, we have added a save() method, which will handle the file upload and validation.

Step 2: Create the View

Next, we need to create a view for our Livewire component. Create a new view file called file-upload.blade.php in the resources/views/livewire directory and add the following code:

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

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

In this code, we have added a simple form with an input field for the file and a submit button. We have also used the wire:model directive to bind the file property to the input field, which means that any changes to the input field will automatically update the file property in the Livewire component. Finally, we have added an error message for the file property, which will be displayed if there are any validation errors.

Step 3: Add the Livewire Component to Your Route

Finally, we need to add the Livewire component to our route. Open your web.php file and add the following code:

Route::get('/file-upload', \App\Http\Livewire\FileUpload::class);

This code will create a new route that will display our Livewire component when visited. Now you can visit http://localhost:8000/file-upload and you should see the file upload form.

Conclusion

In this blog post, we have explored how to upload files using Laravel Livewire. With just a few lines of code, we were able to create a Livewire component that handles file uploads and validation. Livewire makes it easy to build dynamic web applications without sacrificing the simplicity and elegance of Laravel.