Cannot set property 'value' of undefined (FileUploads.js)

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

1 Like

This is because this is undefined , since we want to clear the value of the element we can just use the el variable instead.

After editing that you should run Composer update.