Класс WithFileUploads

Класс WithFileUploads является трейтом Livewire, который подключается к компоненту для работы с загрузкой файлов. Он предоставляет необходимые методы для обработки файлов, загружаемых через форму. Трейт добавляет свойство $photos для хранения экземпляров TemporaryUploadedFile, а также методы для валидации, временного хранения и сохранения файлов.

Подключение трейта

Для начала работы с загрузкой файлов необходимо подключить трейт WithFileUploads в классе компонента:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	use Livewire\WithFileUploads;
	
	class UploadForm extends Component
	{
		use WithFileUploads;
		
		public $photo;
		
		public function render()
		{
			return view('livewire.upload-form');
		}
	}
?>

Синтаксис

Для загрузки файлов используется HTML-элемент input type="file" с директивой wire:model. Livewire автоматически обрабатывает загрузку и сохраняет файл во временное хранилище. Свойство компонента становится экземпляром TemporaryUploadedFile.

<form wire:submit.prevent="save">
	<input type="file" wire:model="photo">
	<button type="submit">Upload</button>
</form>

Пример сохранения файла

Давайте реализуем загрузку файла и его сохранение в директорию storage/app/public/photos:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	use Livewire\WithFileUploads;
	
	class UploadForm extends Component
	{
		use WithFileUploads;
		
		public $photo;
		
		public function save()
		{
			$path = $this->photo->store('photos', 'public');
			
			session()->flash('message', 'File uploaded: ' . $path);
		}
		
		public function render()
		{
			return view('livewire.upload-form');
		}
	}
?>

<form wire:submit.prevent="save">
	<input type="file" wire:model="photo">
	
	@error('photo') <span>{{ $message }}</span> @enderror
	
	<button type="submit">Upload</button>
	
	@if (session()->has('message'))
		<p>{{ session('message') }}</p>
	@endif
</form>

Результат выполнения кода:

"File uploaded: photos/y4C8Qw2rKXlKmQzGJtVqUeK4FhZ9.jpg"

Пример с валидацией

Давайте добавим валидацию для загружаемого файла:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	use Livewire\WithFileUploads;
	
	class UploadForm extends Component
	{
		use WithFileUploads;
		
		public $photo;
		
		public function save()
		{
			$this->validate([
				'photo' => 'required|image|max:1024',
			]);
			
			$path = $this->photo->store('photos', 'public');
			
			session()->flash('message', 'Image uploaded: ' . $path);
		}
		
		public function render()
		{
			return view('livewire.upload-form');
		}
	}
?>

<form wire:submit.prevent="save">
	<input type="file" wire:model="photo">
	
	@error('photo') <span>{{ $message }}</span> @enderror
	
	<button type="submit">Upload</button>
	
	@if (session()->has('message'))
		<p>{{ session('message') }}</p>
	@endif
</form>

Результат выполнения кода при успешной загрузке:

"Image uploaded: photos/qW3rT5yU7iE8oP9aD2fG4hJ6kL1.jpg"

Смотрите также

класс WithFileUploads,
который предоставляет функциональность для загрузки файлов
метод store,
который сохраняет загруженный файл в указанную директорию
метод storeAs,
который сохраняет файл с заданным именем
метод storePublicly,
который сохраняет файл в публичную директорию