Поле файла в Livewire

Пусть к посту нужно приложить картинку, а на форме для неё нет места. Обычное текстовое поле файл не принимает, и после отправки вложение просто теряется.

В класс компонента подключают трейт WithFileUploads, а выбранный файл кладут во временное свойство. Поле типа file связывают с этим свойством через wire:model, и имя файла можно вывести сразу после выбора.

Давайте создадим компонент PostPick:

php artisan make:livewire PostPick --class

Давайте добавим маршрут и страницу:

<?php
	Route::get('/posts/photo', function () {
		return view('posts-photo');
	});
?>

<x-layout>
	<livewire:post-pick />
</x-layout>

Давайте подключим трейт и свойство для файла:

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

Давайте в шаблоне добавим поле и вывод имени файла:

<div>
	<input
		type="file"
		wire:model="photo"
	>
	@if ($photo)
		{{ $photo->getClientOriginalName() }}
	@endif
</div>

Создайте компонент EmployeePick. Человек выбирает файл работника, и на странице появляется его имя.