I have strange problem with simple upload function, I’ve just installed fresh Laravel 11 project with latest version of livewire just to test this out, when I select file to upload I see request update to serve and temp file stored in livewire-tmp folder which is fine but when I press upload I face console error file is undefined
I attached picture for the error with example repo just to see my problem live:
https://github.com/hawkiq/livewire3-example
my UploadFile component
<?php
namespace AppLivewire;
use AppModelsUpload;
use LivewireComponent;
use LivewireAttributesRule;
use LivewireWithFileUploads;
class UploadFile extends Component
{
use WithFileUploads;
public $file;
public function mount()
{
// Debug the initial state
logger('Component mounted with:', ['uploadedFile' => $this->file]);
}
public function updatedFile()
{
$this->validate([
'file' => 'required',
]);
}
public function upload()
{
dd('Upload');
//Logic to upload file and save information to database
session()->flash('message', 'File uploaded successfully.');
$this->file = null;
$this->dispatch('update-list');
}
public function render()
{
return view('livewire.upload-file');
}
}
my view
<div class="card mt-2">
<div class="card-header" style="background-color: cornflowerblue;color:white">
Upload File
</div>
<div class="card-body">
<form wire:submit='upload'>
@csrf
<div class="mb-3">
<label class="form-label">Select File</label>
<input wire:model="file" name="file" id="file" type="file" class="form-control">
@error('file')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary btn-block">Upload</button>
</div>
@if (session()->has('message'))
<div class="alert alert-success mt-3">
{{ session('message') }}
</div>
@endif
</form>
</div>
</div>