Method App\Http\Livewire\Product::extension does not exist

Question

I am learning laravel livewire, and this is my first time using livewire. I am having trouble running my code on Laravel 8 with laravel-livewire. When I click submit always showing an error like that. I'm don't know what's wrong and how to fix this

web.php

<?php
    
use Illuminate\Support\Facades\Route;
use App\Http\Livewire\Product;
Route::get('/products', Product::class);

Controller

<?php
    
    namespace App\Http\Livewire;
    
    use Livewire\Component;
    use Livewire\WithFileUploads;
    use App\Models\Product as ProductModel;
    use Illuminate\Support\Facades\Storage;
    
    class Product extends Component
    {
        use WithFileUploads;
    
        public $name, $image, $description, $qty, $price;
    
    
        public function previewImage()
        {
            $this->validate([
                'image' => 'image|max:2048'
            ]);
        }
    
        public function store()
        {
            $this->validate([
                'name' => 'required',
                'image' => 'image|max:2048|required',
                'description' => 'required',
                'qty' => 'required',
                'price' => 'required',
            ]);
    
            $imageName = md5($this->image.microtime().'.'. $this->extension());
            
            Storage::putFileAs(
                'public/images',
                $this->image,
                $imageName
            );
    
            ProductModel::create([
                'name' => $this->name,
                'image' => $imageName,
                'description' => $this->description,
                'qty' => $this->qty,
                'price' => $this->price
            ]);
    
            session()->flash('info', 'Product created sSccessfully');
    
            $this->name = '';
            $this->image = '';
            $this->description = '';
            $this->qty = '';
            $this->price = '';
        }
    }

In this is my blade code, i hope someone can help me. Thanks

<div>
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-body">
                <h2 class="font-weight-bold mb-3">Product List</h2>
                <table class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Name</th>
                            <th>Image</th>
                            <th>Description</th>
                            <th>Qty</th>
                            <th>Price</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($products as $index=>$product)
                        <tr>
                            <td>{{ $index+1 }}</td>
                            <td>{{ $product->name }}</td>
                            <td>{{ $product->image }}</td>
                            <td>{{ $product->description }}</td>
                            <td>{{ $product->qty }}</td>
                            <td>{{ $product->price }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h2 class="font-weight-bold mb-3">Create Product</h2>
                <form wire:submit.prevent="store">
                    <div class="form-group">
                        <label>Product Name</label>
                        <input wire:model="name" type="text" class="form-control">
                        @error('name') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>

                    <div class="form-group">
                        <label>Product Image</label>
                        <div class="custom-file">
                            <input wire:model="image" type="file" class="custom-file-input" id="customFile">
                            <label for="customFile" class="custom-file-label">Choose Image</label>
                        </div>
                        @error('image') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>
                    @if($image)
                        <label class="mt-2">Image Preview</label>
                        <img src="{{ $image->temporaryUrl() }}" class="img-fluid" alt="Preview Image">
                    @endif

                    <div class="form-group">
                        <label>Description</label>
                        <textarea wire:model="description" class="form-control"></textarea>
                        @error('description') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>

                    <div class="form-group">
                        <label>Qty</label>
                        <input wire:model="qty" type="number" class="form-control">
                        @error('qty') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>

                    <div class="form-group">
                        <label>Price</label>
                        <input wire:model="price" type="number" class="form-control">
                        @error('price') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>

                    <div class="form-group">
                        <button type="submit" class="btn btn-primary btn-block">Submit Product</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="card mt-3">
            <div class="card-body">
                <h3>{{ $name }}</h3>
                <h3>{{ $image }}</h3>
                <h3>{{ $description }}</h3>
                <h3>{{ $qty }}</h3>
                <h3>{{ $price }}</h3>
            </div>
        </div>
    </div>
</div>

Answer 1

use $this->image->extension() or \File::extension($this->image);

instead of $this->extensionin your code

$imageName = md5($this->image.microtime().'.'. $this->extension());

extension() is a method of FIle class thus needs a instance of Symfony\Component\HttpFoundation\File\UploadedFile class