Множественная загрузка файлов

Для множественной загрузки файлов в Livewire используется свойство-массив с атрибутом #[Validate] или трейт WithFileUploads. В Blade-шаблоне к полю ввода добавляется атрибут multiple, а в атрибуте wire:model указывается имя свойства-массива. Livewire автоматически обрабатывает массив загруженных файлов как временные объекты TemporaryUploadedFile.

Синтаксис

<input type="file" wire:model="photos" multiple>

Пример

Создадим компонент для загрузки нескольких изображений. Свойство $photos будет массивом файлов.

<?php

	namespace App\Livewire;

	use Livewire\Component;
	use Livewire\WithFileUploads;

	class PhotoUpload extends Component
	{
		use WithFileUploads;

		public $photos = [];

		public function save()
		{
			foreach ($this->photos as $photo) {
				$photo->store('photos', 'public');
			}
		}

		public function render()
		{
			return view('livewire.photo-upload');
		}
	}
?>

<form wire:submit.prevent="save">
	<input type="file" wire:model="photos" multiple>

	@error('photos.*')
		<span>{{ $message }}</span>
	@enderror

	<button type="submit">Upload</button>
</form>

Пример

Выведем превью каждого загруженного файла с помощью директивы @foreach:

<form wire:submit.prevent="save">
	<input type="file" wire:model="photos" multiple>

	@if ($photos)
		<div>
			@foreach ($photos as $photo)
				<img src="{{ $photo->temporaryUrl() }}">
			@endforeach
		</div>
	@endif

	<button type="submit">Upload</button>
</form>

Пример

Применим валидацию к каждому загружаемому файлу с помощью правила image и ограничим размер максимум 1024 килобайта:

<?php

	namespace App\Livewire;

	use Livewire\Component;
	use Livewire\WithFileUploads;

	class PhotoUpload extends Component
	{
		use WithFileUploads;

		#[Validate([
			'photos.*' => 'image|max:1024',
		])]
		public $photos = [];

		public function save()
		{
			$this->validate();

			foreach ($this->photos as $photo) {
				$photo->store('photos', 'public');
			}
		}

		public function render()
		{
			return view('livewire.photo-upload');
		}
	}
?>

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

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