What seems to be the problem:
When I click on the input file an error is generated in FileUploads.js
Uncaught TypeError: Cannot set property ‘value’ of undefined
at HTMLInputElement.clearFileInputValue (FileUploads.js: 37)
Steps to Reproduce:
I created a new project in laravel 8:
laravel new upload-livewire
I installed livewire:
composer require livewire/livewire
I published the assets:
php artisan livewire:publish --assets
I created the symbolic link:
php artisan storage:link
I created the livewire component:
php artisan livewire:make User\UploadPhoto
Are you using the latest version of Livewire:
“require”: {
“php”: “^7.3|^8.0”,
“fideloper/proxy”: “^4.4”,
“fruitcake/laravel-cors”: “^2.0”,
“guzzlehttp/guzzle”: “^7.0.1”,
“laravel/framework”: “^8.12”,
“laravel/tinker”: “^2.5”,
“livewire/livewire”: “^2.3”
},
Do you have any screenshots or code examples:
Livewire Component
app\Http\Livewire\User\UploadPhoto.php
<?php
namespace App\Http\Livewire\User;
use Livewire\Component;
use Livewire\WithFileUploads;
class UploadPhoto extends Component
{
use WithFileUploads;
public $photo;
public function render()
{
return view('livewire.user.upload-photo');
}
public function save()
{
$this->validate([
'photo' => 'image|max:1024', // 1MB Max
]);
$this->photo->store('photos');
}
}
View
resources\views\livewire\user\upload-photo.blade.php
<form wire:submit.prevent="save"> <input type="file" wire:model="photo"> @error('photo') <span class="error">{{ $message }}</span> @enderror <button type="submit">Save Photo</button> </form>
Route
routes\web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Livewire\User\UploadPhoto;
Route::get('/upload', UploadPhoto::class);
Route::get('/', function () {
return view('welcome');
});
I run the server:
php artisan server
Access the link:
http://127.0.0.1:9000/upload
I click the button:
input file
and the error happens
