Call to a member function getClientOriginalExtension() on null in laravel? - laravel

Question

When I'm submitting the image, it shows the following error:
Call to a member function getClientOriginalExtension() on null
I do not know, where the mistake is.
This is my controller named ProductController:
public function store(Request $request)
{
$request->validate([
'name' => 'required',
'brand' => 'required',
'detail' => 'required',
'size' => 'required',
'type' => 'required',
'price' => 'required',
'image' => 'required',
]);
$image = $request->file('image');
$new_name = rand().'.'.$image->getClientOriginalExtension();
$image->move(public_path('images'), $new_name);
$form_data = array(
'image' => $new_name,
'name' => $request->input('name'),
'size' => $request->input('size'),
'type' => $request->input('type'),
'price' => $request->input('price'),
'detail' => $request->input('detail'),
'brand' => $request->input('brand'),
);
Product::create($form_data);
return redirect()->route('product.index')->withSuccess('Done');
}
The error occours on this line: $new_name = rand().'.'.$image->getClientOriginalExtension();
This is my form from where I am submitting the image:
<form id="myForm" method="post" action="{{ route('product.store') }}">
#csrf
<div class="user-box">
<input type="text" name="name" required="">
<label>Name</label>
#error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="user-box">
<input type="text" name="brand" required="">
<label>Brand</label>
#error('brand')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="user-box">
<input type="text" name="price" required="">
<label>Price</label>
#error('price')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="user-box" style=" border-bottom: 1px solid white">
<span style="font-weight: bold; color: white; font-size: 16px; margin-bottom: 30px ">Size</span>
<select name="size" id="size" style="width: 40px; font-size: 16px; margin-bottom: 20px ">
<option value="50 ML">50 ML</option>
<option value="100 ML">100 ML</option>
<option value="200 ML">200 ML</option>
<option value="500 ML">500 ML</option>
<option value="1 L">1 L</option>
<option value="4 L">4 L</option>
<option value="10 L">10 L</option>
<option value="20 L">20 L</option>
</select>
#error('size')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="user-box">
<input type="text" name="type" required="">
<label>Type</label>
#error('type')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="user-box">
<input type="text" name="detail" required="">
<label>Detail</label>
#error('detail')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="user-box">
Image<input type="file" name="image" required="">
<label>Image</label>
#error('image')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<button class="a" id="a" value="submit" name="submit">Submit</button>
</form>

Answer 1

your server is not receiving the file that you are uploading,
Try adding the enctype='multipart/form-data' to the form in blade file.
<form id="myForm" method="post" action="{{ route('product.store') }}" enctype='multipart/form-data'>

Answer 2

Add attribute enctype="multipart/form-data" to your form tag like below:
<form id="myForm" method="post" action="{{ route('product.store') }}" enctype="multipart/form-data">