Предпросмотр файла в Livewire

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

Пока файл ещё не лежит в папке, у временного объекта есть метод temporaryUrl: он даёт адрес картинки для тега img. Так можно показать только изображения, не документы.

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

php artisan make:livewire PostShot --class

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

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

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

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

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

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

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

Создайте компонент EmployeeShot. Выбранное фото работника видно на странице до сохранения.