Несколько файлов в Livewire

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

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

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

php artisan make:livewire PostAlbum --class

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

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

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

Давайте заведём массив для файлов:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	use Livewire\WithFileUploads;
	
	class PostAlbum extends Component
	{
		use WithFileUploads;
		
		public $photos = [];
		
		public function render()
		{
			return view(
				'livewire.post-album'
			);
		}
	}
?>

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

<div>
	<input
		type="file"
		wire:model="photos"
		multiple
	>
	@foreach ($photos as $photo)
		<div wire:key="{{ $photo->getClientOriginalName() }}">
			{{ $photo->getClientOriginalName() }}
		</div>
	@endforeach
</div>

Создайте компонент EmployeeAlbum. Человек выбирает несколько файлов работника, и на странице виден список их имён.