Временная загрузка файлов

Временная загрузка файлов в Livewire реализована через трейт WithFileUploads. Когда пользователь выбирает файл через поле input type="file" с директивой wire:model, Livewire автоматически загружает этот файл во временное хранилище на сервере. Объект загруженного файла в компоненте представлен классом TemporaryUploadedFile, который расширяет стандартный IlluminateHttpUploadedFile. Этот механизм позволяет выполнять валидацию, предпросмотр и манипуляции с файлами до того, как они будут окончательно сохранены.

Синтаксис

Для использования временной загрузки необходимо подключить трейт LivewireWithFileUploads в компоненте. Сама загрузка происходит автоматически при обновлении свойства, связанного с полем файла через wire:model. Объект файла доступен в свойстве компонента и может быть сохранен с помощью методов трейта.

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireWithFileUploads;
	
	class UploadForm extends Component
	{
		use WithFileUploads;
		
		public $photo;
		
		public function save()
		{
			$path = $this->photo->store('photos');
		}
		
		public function render()
		{
			return view('livewire.upload-form');
		}
	}
?>

<form wire:submit.prevent="save">
	<input type="file" wire:model="photo">
	<button type="submit">Upload</button>
</form>

Пример

Давайте создадим компонент для загрузки одного файла и выведем информацию о нем после загрузки:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireWithFileUploads;
	
	class FileUploader extends Component
	{
		use WithFileUploads;
		
		public $file;
		public $fileName = '';
		
		public function upload()
		{
			$this->validate([
				'file' => 'required|file|max:1024',
			]);
			
			$this->fileName = $this->file->getClientOriginalName();
			$path = $this->file->store('uploads');
		}
		
		public function render()
		{
			return view('livewire.file-uploader');
		}
	}
?>

<div>
	@if ($fileName)
		<p>Uploaded: {{ $fileName }}</p>
	@endif
	
	<form wire:submit.prevent="upload">
		<input type="file" wire:model="file">
		@error('file')
			<span>{{ $message }}</span>
		@enderror
		<button type="submit">Upload</button>
	</form>
</div>

Результат выполнения кода после выбора файла:

<div>
	<p>Uploaded: document.pdf</p>
	<form>
		<input type="file">
		<button type="submit">Upload</button>
	</form>
</div>

Пример

Теперь рассмотрим пример с множественной загрузкой файлов. Для этого свойство должно быть массивом, а в поле ввода добавляется атрибут multiple. Валидация также будет применена к каждому файлу:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireWithFileUploads;
	
	class MultiUploader extends Component
	{
		use WithFileUploads;
		
		public $files = [];
		public $uploadedFiles = [];
		
		public function upload()
		{
			$this->validate([
				'files.*' => 'required|file|max:2048|mimes:jpg,png,pdf',
			]);
			
			foreach ($this->files as $file) {
				$path = $file->store('public/uploads');
				$this->uploadedFiles[] = $file->getClientOriginalName();
			}
		}
		
		public function render()
		{
			return view('livewire.multi-uploader');
		}
	}
?>

<div>
	@if ($uploadedFiles)
		<ul>
			@foreach ($uploadedFiles as $name)
				<li>{{ $name }}</li>
			@endforeach
		</ul>
	@endif
	
	<form wire:submit.prevent="upload">
		<input type="file" wire:model="files" multiple>
		@error('files.*')
			<span>{{ $message }}</span>
		@enderror
		<button type="submit">Upload All</button>
	</form>
</div>

Результат выполнения кода после загрузки двух файлов:

<div>
	<ul>
		<li>image1.jpg</li>
		<li>image2.png</li>
	</ul>
	<form>
		<input type="file" multiple>
		<button type="submit">Upload All</button>
	</form>
</div>

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

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