File Uploads
Handle file uploads with progress tracking and previews.
Basic Usage
Component
use LiVue\Features\SupportFileUploads\WithFileUploads;
class PhotoUpload extends Component
{
use WithFileUploads;
public $photo;
public function save()
{
$this->photo->store('photos');
}
}
Template
<input
type="file"
@change="livue.upload('photo', $event)"
/>
<button v-click:save>
Save Photo
</button>Multiple Files
<input
type="file"
multiple
@change="livue.uploadMultiple('photos', $event)"
/>Upload Progress
<!-- Show uploading state -->
<div v-if="livue.uploading">
Uploading: {{ livue.uploadProgress }}%
<div class="bg-vue h-2 rounded" :style="{ width: livue.uploadProgress + '%' }"></div>
</div>Validation
public function fileRules(): array
{
return [
'photo' => ['image', 'max:5120'], // 5MB max
'document' => ['mimes:pdf,doc,docx', 'max:10240'],
];
}Image Preview
@if($photo)
<img src="{{ $photo->temporaryUrl() }}" />
@endifStorage Options
// Store with auto-generated name
$this->photo->store('photos');
// Store with custom name
$this->photo->storeAs('photos', 'profile.jpg');
// Store to a specific disk
$this->photo->store('photos', 's3');