Laravel: I can't upload my dropzone file into my database - php

Question

Hi I am new to laravel and javascript,
I have a multiple input forms for updating of product information including a image upload using Dropzone.js to update product image. However I cant see to update my image file as I keep getting a null value for my dropzone image when I have already dragged a file in.
Below are my codes in the product-edit page:
<form action="{{ route('merchant.product.update', $product->prodID) }}" method="POST" class="dropzone" enctype="multipart/form-data">
{{ csrf_field() }}
{{ method_field('PATCH') }}
<div class="form-group">
<h5>Code</h5>
<input type="text" name="prodCode" class="form-control" id="prodCode" placeholder="Product Code" value="{{ old('prodCode', $product->prodCode) }}" required>
<div class="spacer"></div>
</div>
<div class="form-group">
<h5>Description</h5>
<textarea id="prodDesc" name="prodDesc" class="form-control" id="prodDesc" placeholder="Description" rows="5" required> {{ $product->prodDesc }}</textarea>
<div class="spacer"></div>
</div>
<div class="form-group">
<h5>Price</h5>
<input type="text" name="price" class="form-control" id="price" placeholder="Price" value="{{ old('price', $product->price)}}">
<div class="spacer"></div>
</div>
<div class="form-group">
<h5>Quantity</h5>
<input type="number" name="quantity" class="form-control" id="quantity" placeholder="Quantity" value="{{ old('quantity', $product->quantity)}}">
<div class="spacer"></div>
</div>
<div class="form-group">
<h5>Feature Product</h5>
<div class="switch">
<input type="checkbox" name="featured" class="switch-input" value="1" {{ old('featured', $product->featured=="true") ? 'checked="checked"' : '' }}/>
<div class="circle"></div>
</div>
</div>
<div class="form-group">
<h5>Product Image</h5>
<div id="dropzoneDragArea" class="dz-default dz-message dropzoneDragArea">
<span>Upload Image</span>
</div>
<div class="dropzone-previews"></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-large btn-primary">Update Product</button>
</div>
<div class="spacer"></div>
</form>
Below are the Javascript portion of the blade.php:
Below are my Controller Methods I have for the update:
public function storeImage(Request $request) {
if($request->file('file')){
// Upload path
$destinationPath = 'img/products/';
// Get File
$image = $request->file('file');
// Get File Name
$imageName = $image->getClientOriginalName();
// Uploading File to given path
$image->move($destinationPath,$imageName);
$product = new Product();
$product->where('prodID', '=', $request->{'prodID'}, 'AND', 'created_by_merchant_id', '=', $this->checkMerchantID())
->update([
'prodImage' => $imageName,
]);
}
}
//update Product details
public function update(Request $request, $prodID)
{
if ($this->isCodeExist($request->{'prodCode'}, $request->{'prodID'})) {
return back()->withErrors('This code already exists!');
}
try{
$db = new Product();
$db->where('prodID', '=', $prodID, 'AND', 'created_by_merchant_id', '=', $this->checkMerchantID())
->update([
'prodCode' => $request->{'prodCode'},
'prodImage' =>$this->storeImage($request),
'prodDesc' => $request->{'prodDesc'},
'price' => $request->{'price'},
'quantity' => $request->{'quantity'},
'featured' => $request->input('featured') ? true : false,
]);
return back()->with('success_message', 'Product updated successfully!');
} catch (\Illuminate\Database\QueryException $ex) {
Log::channel('merchant_error')->error($ex);
return back()->withErrors('There seems to be an error in updating');
}
}