How to clear "files multiple" in livewire

Question

I have a blade file with the following livewire ( Version 2 ) code:

<textarea wire:model="enterComment"</textarea>

<input wire:model="commentFiles" type="file" multiple>

The upload works like charm, but trying to clear the file after emit is not working - here's some snippets from my code:

use WithFileUploads;

public $commentFiles = [];

and the upload:

foreach ($this->commentFiles as $uploadFile) {
     $stored = $uploadFile->store('case');
}

What i have tried so far to clear the "commentFiles" input (all not working):

$this->commentFiles = [];
$this->commentFiles = null;

foreach($this->commentFiles AS $file)
{
     $file = null;
}

after that (that's working):

$this->enterComment = '';
$this->emit('reloadComments');

Anyone any ideas?

Answer 1

Create a public property for the id of the file upload element.

public $id = 1;

public function upload()
{
    ...
    $this->id++;
}

Then add the id to your upload element.

<input id="uploadFile{{ $id }}" wire:model="commentFiles" type="file" multiple>

This way, when the upload is done, the $id increments, which causes the file upload element to reset as the id has changed.