S3 загрузка в Livewire

Для загрузки файлов в S3 хранилище используется трейт WithFileUploads вместе с конфигурацией диска s3 в файле config/filesystems.php. Livewire автоматически обрабатывает multipart загрузку и временное хранение файлов перед финальной отправкой в S3.

Настройка S3 диска

Перед использованием S3 необходимо настроить диск в конфигурации Laravel. Добавьте настройки в файл config/filesystems.php:

<?php
	return [
		'disks' => [
			's3' => [
				'driver' => 's3',
				'key' => env('AWS_ACCESS_KEY_ID'),
				'secret' => env('AWS_SECRET_ACCESS_KEY'),
				'region' => env('AWS_DEFAULT_REGION'),
				'bucket' => env('AWS_BUCKET'),
				'url' => env('AWS_URL'),
				'endpoint' => env('AWS_ENDPOINT'),
				'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
				'throw' => false,
			],
		],
	];
?>

Компонент с S3 загрузкой

Создайте компонент Livewire с трейтом WithFileUploads и свойством для хранения загружаемого файла:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireWithFileUploads;
	
	class ImageUpload extends Component
	{
		use WithFileUploads;
		
		public $photo;
		
		public function save()
		{
			$path = $this->photo->store('images', 's3');
			
			// Или с использованием метода storeAs для указания имени
			// $path = $this->photo->storeAs('images', 'custom-name.jpg', 's3');
			
			// Для публичной загрузки используйте storePublicly
			// $path = $this->photo->storePublicly('images', 's3');
		}
		
		public function render()
		{
			return view('livewire.image-upload');
		}
	}
?>

<form wire:submit.prevent="save">
	<input type="file" wire:model="photo" />
	
	@error('photo')
		<span class="error">{{ $message }}</span>
	@enderror
	
	<button type="submit">
		Upload to S3
	</button>
</form>

Пример с указанием имени файла

Используйте метод storeAs для сохранения файла с определённым именем в S3 хранилище:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireWithFileUploads;
	
	class FileManager extends Component
	{
		use WithFileUploads;
		
		public $document;
		public $fileName = '';
		
		public function uploadDocument()
		{
			$this->validate([
				'document' => 'required|file|mimes:pdf,doc,docx|max:10240',
				'fileName' => 'required|string|max:100',
			]);
			
			$extension = $this->document->extension();
			$fullName = $this->fileName . '.' . $extension;
			
			$path = $this->document->storeAs(
				'documents',
				$fullName,
				's3'
			);
			
			session()->flash('message', 'File uploaded: ' . $path);
		}
		
		public function render()
		{
			return view('livewire.file-manager');
		}
	}
?>

<form wire:submit.prevent="uploadDocument">
	<div>
		<label>File name:</label>
		<input type="text" wire:model="fileName" />
	</div>
	
	<div>
		<label>Choose file:</label>
		<input type="file" wire:model="document" />
	</div>
	
	@error('document')
		<div>{{ $message }}</div>
	@enderror
	@error('fileName')
		<div>{{ $message }}</div>
	@enderror
	
	<button type="submit">
		Upload to S3
	</button>
	
	@if (session()->has('message'))
		<div>{{ session('message') }}</div>
	@endif
</form>

Публичная загрузка

Для загрузки файлов с публичным доступом используйте метод storePublicly. Файл будет доступен по прямой ссылке:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireWithFileUploads;
	
	class PublicUpload extends Component
	{
		use WithFileUploads;
		
		public $image;
		public $publicUrl = '';
		
		public function uploadImage()
		{
			$this->validate([
				'image' => 'required|image|max:2048',
			]);
			
			$path = $this->image->storePublicly(
				'public/images',
				's3'
			);
			
			$this->publicUrl = Storage::disk('s3')->url($path);
		}
		
		public function render()
		{
			return view('livewire.public-upload');
		}
	}
?>

<form wire:submit.prevent="uploadImage">
	<input type="file" wire:model="image" accept="image/*" />
	
	@error('image')
		<div>{{ $message }}</div>
	@enderror
	
	<button type="submit">
		Upload Publicly
	</button>
</form>

@if ($publicUrl)
	<div>
		<p>Public URL:</p>
		<a href="{{ $publicUrl }}" target="_blank">
			{{ $publicUrl }}
		</a>
	</div>
@endif

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

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