Level 9
Nov 26, 2020
1
Level 9
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>
Please or to participate in this conversation.