Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Neeraj1005's avatar

File upload- clear(reset) input field after file upload Livewire

Does anyone know how to reset file input field after uploading an image?

Problem: After uploading the file the file input field is not cleared...can anyone tell me how to do this?

please check this image https://imgur.com/UJQX0jf

component code

<?php

namespace App\Http\Livewire\Customization;

use App\Logo;
use Livewire\Component;
use Livewire\WithFileUploads;
use Illuminate\Support\Facades\Storage;

class Customizelogo extends Component
{
    use WithFileUploads;

    public $admin_panel_value;

    public $admin_alt_text;
    public $admin_logo_path;
    public $uploadadminlogo;

    public function updatedUploadadminlogo()
    {
        $this->validate([
            'uploadadminlogo' => 'image|max:512|mimes:png,jpg,jpeg', // 1024 = 1MB Max
        ]);
    }

    public function mount($admin_panel_value='admin_panel_logo')
    {
        $this->admin_panel_value = Logo::where('options',$admin_panel_value)->firstOrFail();

        $this->admin_alt_text = $this->admin_panel_value->alt_text ?? '' ;
        $this->admin_logo_path = $this->admin_panel_value->profile_photo_url ?? '' ;
    }

    public function adminLogoDataSave()
    {
        $this->validate([
            'admin_alt_text' => 'required|string|max:50',
            'uploadadminlogo' => 'image|max:512|mimes:png,jpg,jpeg',
        ]);

        $adminLogo = Logo::where('options','admin_panel_logo')->findOrFail(1);

        if($this->uploadadminlogo){
            $adminlogopath = $this->uploadadminlogo->storePublicly('admin-logo','public');
        }

        $adminLogo->update([
            'alt_text' => $this->admin_alt_text,
            'logo_path' => $adminlogopath,
        ]);

        $this->reset('uploadadminlogo');

        session()->flash('message', 'Admin Logo uploaded successfully');
    }

blade comp

<div>
    <!-- Admin Logo -->
    <div>
        @if (session()->has('message'))
            <div class="alert alert-success">
                {{ session('message') }}
            </div>
        @endif
    </div>
    <div class="card">
        <div class="card-header text-primary font-weight-bold text-primary font-weight-bold">
            Admin Logo
        </div>
        <form wire:submit.prevent="adminLogoDataSave" enctype="multipart/form-data">
            <div class="card-body">

                <div class="form-group">
                    <label for="logotext">Logo Text</label>
                    <input
                        type="text"
                        name="admin_alt_text"
                        wire:model.defer="admin_alt_text"
                        class="form-control"
                        id="logotext" aria-describedby="logotext"
                    >
                    @error('admin_alt_text')<span class="text-danger">{{ $message }}</span> @enderror
                </div>

                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            <label for="uploadadminlogo">Select Logo</label>
                            <input
                                type="file"
                                name="uploadadminlogo"
                                wire:model="uploadadminlogo"
                                class="form-control-file"
                                id="uploadadminlogo">
                            <small id="logo_path" class="form-text text-muted">JPEG, PNG only</small>
                            @error('uploadadminlogo') <span class="text-danger">{{ $message }}</span> @enderror
                            @if ($uploadadminlogo)
                                Photo Preview:
                                <img src="{{ $uploadadminlogo->temporaryUrl() }}" width="75" height="75">
                            @endif
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group float-right">
                            <img class="rounded img-fluid img-thumbnail" src="{{ $this->admin_logo_path }}" width="35%" height="35%">
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-footer border-top white-bg text-right">
                <label wire:loading wire:target="adminLogoDataSave">saved...</label>
                @if ($uploadadminlogo)
                <button wire:loading.attr="disabled" wire:target="adminLogoDataSave"
                        type="submit" class="btn btn-primary" @error('uploadadminlogo') disabled @enderror>
                    Save
                </button>
                @endif
            </div>
        </form>
    </div>
</div>
0 likes
1 reply

Please or to participate in this conversation.