Laravel - Ajax project ( getClientOriginalName on null) - php

Question

So I have Laravel project and I use Ajax for CRUD.
This is my Controller:
/**
* Store a newly created resource in storage.
*
* #param \Illuminate\Http\Request $request
* #return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$rules = array(
'naziv' => 'required|max:90|unique:restaurants',
'adresa' => 'required|max:150',
'min_dostava' => 'required|max:5',
'vrijeme_dostave' => 'required|max:10',
'cijena_dostave' => 'required|max:5',
'podrucije_grada' => 'required',
'br_telefona' => 'required|numeric|unique:restaurants',
'kuhinja_id' => 'required',
'user_id' => 'required',
'lokacija' => 'max:999',
);
$error = Validator::make($request->all(), $rules);
if($error->fails())
{
return response()->json(['errors' => $error->errors()->all()]);
}
// logo
$logo = $request->file('logo');
$filename = $logo->getClientOriginalName();
//Fullsize
$logo->move(public_path().'/uploads/',$filename);
$image_resize = Image::make(public_path().'/uploads/'.$filename);
$image_resize->fit(800, 600);
$image_resize->save(public_path('uploads/'.$filename));
// logo finish
$restaurant = Restaurant::updateOrCreate(['id' => $request->restaurant_id],
[
'naziv' => $request->naziv,
'adresa' => $request->adresa,
'min_dostava' => $request->min_dostava,
'vrijeme_dostave' => $request->vrijeme_dostave,
'cijena_dostave' => $request->cijena_dostave,
'podrucije_grada' => $request->podrucije_grada,
'br_telefona' => $request->br_telefona,
'kuhinja_id' => $request->kuhinja_id,
'user_id' => $request->user_id,
'lokacija' => $request->lokacija,
'logo' => $filename
]);
$restaurant->save();
if($restaurant->wasChanged()){
return response()->json(['success'=>'Uspjesno ste izmijenili restoran.']);
}
return response()->json(['success'=>'Uspjesno ste dodali novi restoran.']);
}
And a part of form where is file input in my blade:
<div class="form-group">
<label for="exampleFormControlFile1" class="form-control-sm">Logorestorana</label>
<input type="file" class="form-control-file" id="logo" name="logo" value="">
</div>
And my jquery script:
<script type="text/javascript">
$(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var table = $('#dataTable').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('admin.restaurants.index') }}",
columns: [
{data: 'id', name: 'id'},
{data: 'logo', name: 'logo'},
{data: 'naziv', name: 'naziv'},
{data: 'adresa', name: 'adresa'},
{data: 'min_dostava', name: 'min_dostava'},
{data: 'vrijeme_dostave', name: 'vrijeme_dostave'},
{data: 'cijena_dostave', name: 'cijena_dostave'},
{data: 'podrucije_grada', name: 'podrucije_grada'},
{data: 'br_telefona', name: 'br_telefona'},
{data: 'kuhinja_id', name: 'kuhinja_id'},
{data: 'user_id', name: 'user_id'},
{data: 'lokacija', name: 'lokacija'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
$('#createNewProduct').click(function () {
$('#saveBtn').val("create-product");
$('#restaurant_id').val('');
$('#productForm').trigger("reset");
$('#modelHeading').html("Create New Product");
$('#ajaxModel').modal('show');
});
$('body').on('click', '.editProduct', function () {
var restaurant_id = $(this).data('id');
$.get("{{ route('admin.restaurants.index') }}" +'/' + restaurant_id +'/edit', function (data) {
$('#modelHeading').html("Edit Product");
$('#saveBtn').val("edit-user");
$('#ajaxModel').modal('show');
$('#restaurant_id').val(data.id);
$('#naziv').val(data.naziv);
$('#adresa').val(data.adresa);
$('#min_dostava').val(data.min_dostava);
$('#vrijeme_dostave').val(data.vrijeme_dostave);
$('#cijena_dostave').val(data.cijena_dostave);
$('#podrucije_grada').val(data.podrucije_grada);
$('#br_telefona').val(data.br_telefona);
$('#kuhinja_id').val(data.kuhinja_id);
$('#br_telefona').val(data.br_telefona);
$('#lokacija').val(data.lokacija);
$('#logo').val(data.logo);
})
});
$('#saveBtn').click(function (e) {
e.preventDefault();
$(this).html('+ Novi restoran');
$.ajax({
data: $('#productForm').serialize(),
url: "{{ route('admin.restaurants.store') }}",
type: "POST",
dataType: 'json',
success: function (data) {
var html = '';
if(data.errors)
{
html = '<div class="alert alert-danger">';
for(var count = 0; count < data.errors.length; count++)
{
html += '<p>' + data.errors[count] + '</p>';
}
html += '</div>';
}
if(data.success)
{
html = '<div class="alert alert-success alert-dismissible fade show" role="alert"><strong><i class="fas fa-check-circle"></i> ' + data.success + '</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>';
$('#productForm').trigger("reset");
$('#ajaxModel').modal('hide');
table.draw();
}
$('#form_result').html(html);
}
});
});
$('body').on('click', '.deleteProduct', function () {
var restaurant_id = $(this).data("id");
confirm("Are You sure want to delete !");
$.ajax({
type: "DELETE",
url: "{{ route('admin.restaurants.store') }}"+'/'+restaurant_id,
success: function (data) {
table.draw();
html = '<div class="alert alert-danger alert-dismissible fade show" role="alert"><strong><i class="fas fa-trash"></i> ' + data.success + '</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>';
$('#form_result').html(html);
},
error: function (data) {
console.log('Error:', data);
}
});
});
});
</script>
ISSUE
I'm keep getting same issue in my Network console and it is
Call to a member function getClientOriginalName() on null
What I'm doing wrong here?
I also included #crsf in form and enctype="multipart/form-data".
And I'm also using Laravel Intervention Image.
Please help.

Answer 1

You can not pass enctype and mimetype in ajax function. Please try this
$.ajax({
data: $('#productForm').serialize(),
url: "{{ route('admin.restaurants.store') }}",
type: "POST",
dataType: 'json',
enctype: 'multipart/form-data',
mimeType: 'multipart/form-data',
success: function (data) {
var html = '';
if(data.errors)
{
html = '<div class="alert alert-danger">';
for(var count = 0; count < data.errors.length; count++)
{
html += '<p>' + data.errors[count] + '</p>';
}
html += '</div>';
}
if(data.success)
{
html = '<div class="alert alert-success alert-dismissible fade show" role="alert"><strong><i class="fas fa-check-circle"></i> ' + data.success + '</strong><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>';
$('#productForm').trigger("reset");
$('#ajaxModel').modal('hide');
table.draw();
}
$('#form_result').html(html);
}
});

Answer 2

The error message means that 'logo' is not in the request.
When you try to get it with
$logo = $request->file('logo');
it is probably null. When you then try to get the filename
$filename = $logo->getClientOriginalName();
it fails because $logo=null.
Try to use
dd($request->input());
to see what is actually in the request. Or you can log it with
Log::info("Request data = ", ['request' => $request->input()])