how to fix image input value "null" in laravel 5.6? - php

Question

in my laravel application I am using dropzone programmatically to upload images. this is my Controller to store images in VehicleController
$photos = $request->file('file');
dd($photos);
if (!is_array($photos)) {
$photos = [$photos];
}
if (!is_dir($this->photos_path)) {
mkdir($this->photos_path, 0777);
}
for ($i = 0; $i < count($photos); $i++) {
$photo = $photos[$i];
$name = sha1(date('YmdHis') . str_random(30));
$save_name = $name . '.' . $photo->getClientOriginalExtension();//this is line 75
$resize_name = $name . str_random(2) . '.' . $photo->getClientOriginalExtension();
Image::make($photo)
->resize(250, null, function ($constraints) {
$constraints->aspectRatio();
})
->save($this->photos_path . '/' . $resize_name);
$photo->move($this->photos_path, $save_name);
$upload = new Upload();
$upload->filename = $save_name;
$upload->resized_name = $resize_name;
$upload->original_name = basename($photo->getClientOriginalName());
$upload->save();
}
return Response::json([
'message' => 'Image saved Successfully'
], 200);
and programatically jquery is
Dropzone.autoDiscover = false;
// Dropzone class:
var myDropzone = new Dropzone("div#my-dropzone", { url: '/form'});
routes
Route::post('form','VehicleController#store');
My blade file is
<div class="dropzone" id="my-dropzone">
<div class="dz-message">
<div class="col-xs-8">
<div class="message">
<p>Drop files here or Click to Upload</p>
</div>
</div>
</div>
<div class="fallback">
<input type="file" name="file" multiple>
</div>
</div>
but when my form submit button clicked following errors occurred,
1/1) FatalErrorException
Call to a member function getClientOriginalExtension() on null
in VehicleController.php line 75
when I use dd(photos); on
$photos = $request->file('file');
result comming in 'null' massage then, how can fix this problem?

Answer 1

Please try using below AJAX Code.
<form method="post" action="{{url('form')}}" enctype="multipart/form-data">
Remove the Action(action="{{url('form')}}") from your form Tag.
var datastring = $('#fromid').serialize();
$.ajax({
url: "controller url",
type: 'post',
contentType: "application/x-www-form-urlencoded",
data: datastring,
success: function(data){
if(data == '100'){
if($('#file').val() != ''){
var form = $('#fromid')[0];
var formData = new FormData(form);
var imageurl='controller image upload url';
$.ajax({
url:imageurl,
type:"post",
data:formData,
processData:false,
contentType:false,
cache:false,
async:false,
success: function(data){
setTimeout(function(){
window.location.href="redirect url";
},4000);
}
});
}else{
setTimeout(function(){
window.location.href="redirct url";
},4000);
}
}else{
alert(data);
}
}
});
-------- Controller code.
Print_r($_FILES); //You got the result.

Answer 2

Need to add enctype attribute as:
<form action="" method="post" enctype="multipart/form-data">input here</form>

Answer 3

Please add enctype="multipart/form-data" in form. Like this:
<form action="" method="post" enctype="multipart/form-data">