File Uploads - clear the input field

#1

What seems to be the problem: File Input not cleared. I want it to go back to saying No file chosen after upload.

Steps to Reproduce: Create file input field. Upload a file. Save the file and set the public property that is wire:model with the input field to null. Confusingly, client still shows the previously selected filename.

Are you using the latest version of Livewire: 1.2

Do you have any screenshots or code examples:

Form;

<input wire:model="newimage" name="newimage" type="file" class="form-control">

Component;

        if($this->newimage) {
            $slide->image = $this->newimage->store('/','slides');
        }
        $slide->save();
        $this->newimage = null;
#2

By changing the design I was able to implement a workaround by removing the file input from the dom between uploads.

I found this which described the file input field as being immutable;

I’ve considered, but not tried, changing the dom for the element in some way, eg with some other livewire attribute echoed to the input field so that livewire sees the element as needing re-rendering.

#3

You could try to just append a random id to the field. That should force it to swap out. id="{{ rand() }}".

1 Like
#4

Had a need to do this again. Resolved by setting the form input id to an incrementing value id="upload{{ $iteration }}"

Then after saving the file, increment the iteration. This causes the field to be removed and re-rendered, resulting in ‘No File Chosen’.

    public function saveAttachment()
    {
        $this->attachment->storePublicly(now()->format('Y-m'),'uploads');
        $this->attachment=null;
        $this->iteration++;
    }

Tested in Chrome only at this point.

2 Likes