How To Reset File input using livewire

0
votes

does anybody knows how to reset my input type="file". I'm been using the $this->reset() to clear the property of the input type="file".

    $this->reset(['type', 'name', 'institution', 'year', 'certification']);

3
laravellaravel-livewire
how about just setting, document.getElementById("uploadedfile").value = ""; in pure js script – bhucho
okay thx for that, i'll try it – Roronoa97
@bhucho is there any other alternative for this? – Neeraj Tangariya
use jquery though syntax would just change working would be same, or use any frontend frameworks, why the above should work? – bhucho

3 Answers

3
votes

If you don't need to use id for any other purposes you can render the input like this:

<input type="file" id="{{ rand() }}" >

Instead of using rand() you can also use some kind of counter or any other value that will change on every render. Different id will force livewire to completely replace the element with new one, thus empty. Just setting value="" won't help as input type="file" is immutable. This solution is taken from here

1
votes

To reset a file input in livewire I removed id from that input. And assign a null value to the value.

input without id

<label>Upload Image
    <input type="file" wire:model="image" class="w-full">
</label>

to assign null value

$this->image = null;
0
votes

Here is a solution I found in TALL Stack Tips to remove filename from input field after uploading via Livewire. https://talltips.novate.co.uk/livewire/livewire-file-uploads-using-s3#removing-filename-from-input-field-after-upload

The solution involves implementing a counter to regulate the input file id