Form Upload

use Illuminate\Support\Arr;
use Illuminate\Http\UploadedFile;
 
public function deleteUpload(array $content): void
{
    /*
     the $content contains:
     [
         'temporary_name',
         'real_name',
         'extension',
         'size',
         'path',
         'url',
     ]
     */
 
    if (! $this->photo) {
        return;
    }
 
    $files = Arr::wrap($this->photo);
 
    /** @var UploadedFile $file */
    $file = collect($files)->filter(fn (UploadedFile $item) => $item->getFilename() === $content['temporary_name'])->first();
 
    // 1. Here we delete the file. Even if we have a error here, we simply
    // ignore it because as long as the file is not persisted, it is
    // temporary and will be deleted at some point if there is a failure here.
    rescue(fn () => $file->delete(), report: false);
 
    $collect = collect($files)->filter(fn (UploadedFile $item) => $item->getFilename() !== $content['temporary_name']);
 
    // 2. We guarantee restore of remaining files regardless of upload
    // type, whether you are dealing with multiple or single uploads
    $this->photo = is_array($this->photo) ? $collect->toArray() : $collect->first();
}

use Livewire\Component;
use Livewire\WithFileUploads;
use Illuminate\Http\UploadedFile;
 
class MyComponent extends Component
{
    use WithFileUploads;
 
    // For multiple files the property must be an array 
    public $photos = [];
 
    // 1. We create a property that will temporarily store the uploaded files
    public $backup = [];
 
    public function updatingPhotos(): void
    {
        // 2. We store the uploaded files in the temporary property
        $this->backup = $this->photos;
    }
 
    public function updatedPhotos(): void
    {
        if (!$this->photos) {
            return;
        }
 
        // 3. We merge the newly uploaded files with the saved ones
        $file = Arr::flatten(array_merge($this->backup, [$this->photos]));
 
        // 4. We finishing by removing the duplicates
        $this->photos = collect($file)->unique(fn (UploadedFile $item) => $item->getClientOriginalName())->toArray();
    }
 
    // ...
}

// Supposing you want to use $files instead of $photos:
 
public $photos = []; 
public $files = []; 
 
public function updatingPhotos(): void {} 
public function updatingFiles(): void {} 
 
public function updatedPhotos(): void {} 
public function updatedFiles(): void {} 

<x-upload>
    <x-slot:footer when-uploaded> 
        <x-button class="w-full" wire:click="store">
            Save
        </x-button>
    </x-slot:footer>
</x-upload>