Правило image

Правило image используется в методе rules компонента Livewire для валидации загружаемых файлов. Оно проверяет, что файл является допустимым изображением (JPEG, PNG, GIF, BMP, SVG или WebP). Правило можно комбинировать с другими правилами валидации, такими как max, mimes или required.

Синтаксис

use Livewire\WithFileUploads;

public function rules()
{
	return [
		'photo' => 'image',
	];
}

Пример

Давайте создадим компонент для загрузки аватара и проверим, что файл является изображением:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	use Livewire\WithFileUploads;
	
	class AvatarUpload extends Component
	{
		use WithFileUploads;
		
		public $avatar;
		
		public function rules()
		{
			return [
				'avatar' => 'image',
			];
		}
		
		public function updated($property)
		{
			if ($property === 'avatar') {
				$this->validateOnly($property);
			}
		}
		
		public function render()
		{
			return view('livewire.avatar-upload');
		}
	}
?>

<div>
	<form wire:submit.prevent>
		<input type="file" wire:model="avatar">
		@error('avatar')
			<span style="color: red;">{{ $message }}</span>
		@enderror
	</form>
</div>

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

<div>
	<form>
		<input type="file">
	</form>
</div>

Пример

Давайте добавим ограничение на размер изображения и тип файла:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	use Livewire\WithFileUploads;
	
	class AvatarUpload extends Component
	{
		use WithFileUploads;
		
		public $avatar;
		
		public function rules()
		{
			return [
				'avatar' => 'image|max:2048|mimes:jpeg,png',
			];
		}
		
		public function updated($property)
		{
			if ($property === 'avatar') {
				$this->validateOnly($property);
			}
		}
		
		public function render()
		{
			return view('livewire.avatar-upload');
		}
	}
?>

Пример

Давайте сохраним изображение после успешной валидации:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	use Livewire\WithFileUploads;
	
	class AvatarUpload extends Component
	{
		use WithFileUploads;
		
		public $avatar;
		public $success = false;
		
		public function rules()
		{
			return [
				'avatar' => 'image|max:2048',
			];
		}
		
		public function upload()
		{
			$this->validate();
			
			$path = $this->avatar->store('avatars', 'public');
			$this->success = true;
		}
		
		public function render()
		{
			return view('livewire.avatar-upload');
		}
	}
?>

<div>
	<form wire:submit.prevent="upload">
		<input type="file" wire:model="avatar">
		@error('avatar')
			<span style="color: red;">{{ $message }}</span>
		@enderror
		
		<button type="submit">Upload</button>
		
		@if ($success)
			<p>Uploaded successfully!</p>
		@endif
	</form>
</div>

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

<div>
	<form>
		<input type="file">
		<button type="submit">Upload</button>
	</form>
</div>

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

правило file,
которое проверяет, что загруженный файл существует
правило mimes,
которое ограничивает типы загружаемых файлов
правило max,
которое проверяет максимальный размер файла
трейт WithFileUploads,
который добавляет функциональность для работы с файлами