Photo.php

<?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;
    }
}