Created
April 16, 2021 22:41
-
-
Save snellingio/5c85ee03a2456e4ebba1416ad4be328d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
namespace App\Http\Livewire\Sections; | |
use Livewire\Component; | |
use Livewire\TemporaryUploadedFile; | |
use Livewire\WithFileUploads; | |
class Photo extends Component | |
{ | |
use WithFileUploads; | |
/* @var $temporaryUploadedFiles TemporaryUploadedFile[] */ | |
public $temporaryUploadedFiles = []; | |
/* @var $files TemporaryUploadedFile[] */ | |
public $files = []; | |
public function save() | |
{ | |
// ... | |
} | |
public function removeFile(string $filename) | |
{ | |
foreach ($this->files as $index => $file) { | |
if ($file->getFilename() === $filename) { | |
unset($this->files[$index]); | |
return; | |
} | |
} | |
} | |
public function updatedTemporaryUploadedFiles() | |
{ | |
$this->files = array_merge($this->files, $this->temporaryUploadedFiles); | |
$this->temporaryUploadedFiles = []; | |
} | |
public function render() | |
{ | |
return <<<'blade' | |
<div> | |
@foreach ($files as $file) | |
<div class="relative"> | |
<button class="bg-gray-800 opacity-50 text-white absolute top-0 right-0 w-6 h-6 text-center z-20" wire:click.prevent="removeFile('{{ $file->getFilename() }}')">X</button> | |
<img src="{{ $file->temporaryUrl() }}" class="p-3"> | |
</div> | |
@endforeach | |
<label for="files" class="border-dashed border-2 border-gray-300 block p-3 relative"> | |
Browse... | |
<input id="files" type="file" name="files" accept="image/png, image/jpeg" | |
class="w-full h-full z-10 absolute top-0 left-0 opacity-0" | |
multiple wire:model="temporaryUploadedFiles"> | |
</label> | |
</div> | |
blade; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment