File Upload

This component is powered by Livewire`s file upload, including all features like file size and type validation. Please, first check Livewire docs to proper setup file uploads before using this component.

For multiple image upload see Image Library component.

Single file

Livewire itself triggers real time validation for single file upload.

Receipt

Only PDF

@php                            
    $file = $this->file;      
@endphp                         
<x-file wire:model="file" label="Receipt" hint="Only PDF" accept="application/pdf" />

You can use validation rule from Laravel.

#[Rule('required|max:10')]
public $file;

Multiple files

Livewire itself does not trigger real time validation for multiple file upload, like single file upload. So, remember to call $this->validate() before saving the files.

Documents

@php                               
    $photos = $this->photos;      
@endphp                           
<x-file wire:model="photos" label="Documents" multiple />

Here is a validation trick for multiple file upload.

#[Rule(['photos' => 'required'])]          // A separated rule to make it required
#[Rule(['photos.*' => 'image|max:100'])]   // Notice `*` syntax for validate each file
public array $photos = [];

Image preview

It only works for single image. For multiple image upload see Image Library component.

Use a html img as placeholder with the CSS that works best for you. In the following example we use fallback urls to cover scenarios like create or update.

Click on image to change it.

@php                            
    $photo = $this->photo;      
    $user = $this->user;        
@endphp                         
<x-file wire:model="photo" accept="image/png, image/jpeg">
    <img src="{{ $user->avatar ?? '/empty-user.jpg' }}" class="h-40 rounded-lg" />
</x-file>

Image Crop

It only works for single image. For multiple image upload see Image Library component.

First, add Cropper.js library.

<head>
    ...
    {{-- Cropper.js --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css" />
</head>

Now you can use the crop-after-change property.

@php                            
    $photo2 = $this->photo2;      
    $user = $this->user;        
@endphp                         
<x-file wire:model="photo2" accept="image/png" crop-after-change>
    <img src="{{ $user->avatar ?? '/empty-user.jpg' }}" class="h-40 rounded-lg" />
</x-file>

You can set or override any Cropper.js option.

@php
    $config = ['guides' => false];
@endphp
 
<x-file ... :crop-config="$config">
    ...
</x-file>

Once Cropper.js does not offer an easy way to customize its CSS, just inspect browser console to hack the CSS that works best for you. We are using the following on this page.

.cropper-point {
    width: 10px !important;
    height: 10px !important;
}

Labels

Here are all default labels.

@php                            
    $photo5 = $this->photo5;      
    $user = $this->user;        
@endphp                         
<x-file
    ...
    change-text="Change"
    crop-text="Crop"
    crop-title-text="Crop image"
    crop-cancel-text="Cancel"
    crop-save-text="Crop"
>
    ...
</x-file>

maryUI

Sponsor