Reset File Upload Filed in Livewire

If you use a livewire upload file filed in a modal dialoge, after you close the modal or upload the file you may see the upload filed is still the old one unless you choose an other file or refresh the page. I try to set the file upload variable to null to solve, but it is still the same. Livewire may not recognize the file upload filed is changed, so we can reset it by add a different id to it.

in the view file, add a iteration to reset the file upload filed.

<input type="file" wire:model="photo" id="upload_{{ $iteration }}" />

in the livewire component file where you reset the variable, add the following code

public function closeModal()
{
    $this->resetValidation();
    //clear photo
    $this->photo = null;
    $this->iteration++;
}