Laravel - Ajax image upload - file is empty - php

Question

when i try to upload my file with ajax, the $file is empty.
I tried with:
$file = Input::file('image');
$file= $request->file('image');
jQuery:
$(document).on('submit', '#update_form', function(e){
e.preventDefault(e);
$.ajax({
type: "POST",
url: '{{route('admin/users/update')}}',
data: $(this).serialize(),
dataType: 'json',
success: function (data) {
$('.error').fadeOut();
success(data);
load_data('{{route('admin/users/edit')}}', '{{ $user->id }}', '{{ $user->part }}');
},
error: function (data) {
$('.success').fadeOut();
errors(data);
}
})
});
Controller:
public function updateUser(Request $request){
//$file = Input::file('image');
$file= $request->file('image');
return \Response::json( $file );
}
Route:
Route::post('admin/users/update', ['as' => 'admin/users/update', 'uses' => 'admin\UserController#updateUser']);
Form:
{!! Form::model($user, ['id' => 'update_form', 'files' => true]) !!}
<div class="col-md-12">
<div class="form-group">
{{ Form::label(trans('User image')) }}
{!! Form::file('image', null,['class' => 'form-control', 'placeholder' => trans('Image')]) !!}
</div>
{{ Form::hidden('id') }}
{{ Form::hidden('part', app('request')->input('part')) }}
{!! Form::submit(trans('Save changes'), ['class' => 'pull-right btn btn-success submit', 'id' => 'submit' ]) !!}
</div>
{!! Form::close() !!}
Repsonse is empty or: {}
response image:
https://gyazo.com/04e431f16237dfada40c864df96ad412
Thank you!

Answer 1

param is your server method parameters
FormData fd =new FormData();
fd.append('param',$('input[type=file]').files[0]);

Answer 2

Laravel 6.x Ah finally nailed it down, for me the way its worked is first i have get the form by it's form id using jQuery then create a new FormData instance passing form through the constructor then if you need anything pass to server side as key value pair use append function.
<form id="form_id" enctype="multipart/form-data">
<div class="from-group">
<label for="title">App name:</label>
<input type="text" name="title" id ="title_id" class="form-control" placeholder="App name"><br>
</div>
<br>
<div class="form-group">
<input type="file" id="image" name="cover_image" autocomplete="off" class="form-control" />
</div>
<button type="button" onclick="WebApp.CategoryController.onClickAppSubmitButton()" class="btn btn-primary">Submit </button>
</form>
var form = $("#form_id")[0];
var formData = new FormData(form);
formData.append('parent_id','0');
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: url_app_post,
method: "POST",
contentType: false,
processData: false,
data: formData,
success: function (result) {
var data_array = $.parseJSON(result);
if (data_array.status == "200") {
messageHtml += WebApp.CategoryController.getAlertMessage("alert-success", data_array.message);
} else {
messageHtml += WebApp.CategoryController.getAlertMessage("alert-danger", data_array.message);
}
$(messageView).html(messageHtml);
},
error: function (jqXHR, exception) {
messageHtml += WebApp.CategoryController.getAlertMessage("alert-danger",
WebApp.CategoryController.getjqXHRmessage(jqXHR, exception));
$(messageView).html(messageHtml);
}
})
function storeCategory(Request $request, $type){
try{
$fileNameToStore='no_image.jpg';
if($request->hasFile('cover_image')){
$fileNameWithExt = $request->file('cover_image')->getClientOriginalName();
$fileName = pathinfo($fileNameWithExt, PATHINFO_FILENAME);
$extension = $request->file('cover_image')->getClientOriginalExtension();
$fileNameToStore=$fileName.'_'.time().'.'.$extension;
$path = $request->file('cover_image')->storeAs('public/cover_images', $fileNameToStore);
}
$cat = new Category();
$cat->title = $request->title;
$cat->parent_id = $request->parent_id;
$cat->cover_image=$fileNameToStore;
$cat->user_id=auth()->user()->id;
$cat->save();
return json_encode(array("message"=>"This ".$type." successfully added", "status" => "200"));
}catch(Exception $e){
return json_encode(array("message"=>$type." failed to insert: ".$e->getMessage(), "status" => "403"));
}
}