Laravel 9 Livewire Image Upload with Preview

Hello artisan,

After a user chooses a file, you want to show them a preview of that file before they submit the form and actually store the file. Ok, I am here to show you the solution of livewire image upload with preview. I will share with you the source code of livewire image upload with preview. If you do not know livewire image upload with preview, then this example is for you.

There is a simple way to show a preview image before uploading it in laravel livewire. So I will show you complete image upload with preview example with laravel livewire. Livewire makes this trivial with the ->temporaryUrl() method on uploaded files with very easily. So let's see the example code of livewire image upload with preview:

Here's an example of a file upload with an image preview:

use Livewire\WithFileUploads;
 
class UploadPhotoWithPreview extends Component
{
    use WithFileUploads;
 
    public $photo;
 
    public function updatedPhoto()
    {
        $this->validate([
            'photo' => 'image|max:1024',
        ]);
    }
 
    public function save()
    {
        // ...
    }
}

And the form for uploading image with preview in livewire:

Read also: Laravel 9 Livewire Loading Spinner Example

Hope it can help you.