File input - filename not clearing

[codeldev]

Hi all,

A simple livewire component which uploads a file. However I am struggling to clear the file name after successful upload. Is this due to the:

<flux:input.file :$attributes :$name :$size />

having wire:ignore in it's parent container?

Example below:

class ProcessUpload extends Component
{
    use WithFileUploads;

    #[Validate(['required', 'file', 'mimes:pdf', 'max:5120'])]
    public $file;

    #[On('reload-upload')]
    public function render(): View
    {
        return view('livewire.process-upload');
    }

    public function updatedFile(): void
    {
        $this->validate();

         // ... do something with the file
        
        // The following do not clear the file name after upload
        $this->reset();
        $this->dispatch('reload-upload');

        // Even resetting directly
        $this->file = null;
    }
}

Blade file

<div>
    <flux:input
        type="file"
        wire:model.live="file"
        accept=".pdf" />
</div>

If anyone has any suggestions on how to clear the input file on a flux:input type=file component?

[codeldev]

Typical, found a solution after posting which was adding a wire:key that changed after successful upload, but is this the only solution?

<div :wire:key="$uploadKey">
    <flux:input
        type="file"
        wire:model.live="file"
        accept=".pdf" />
</div>