Formdata is empty - laravel 5.4
Hi friends,
I am trying to upload an image using ajax in laravel 5.4
Problem :
Formdata is empty on the server side
CODE :
View :
<form role="form" action="{{route('auth.upload')}}" method="post" enctype="multipart/form-data" id="form3">
{{ csrf_field() }}
<h3>Upload Logo</h3>
<div class="form-group">
<label class="custom-file upload-image">
<input type="file" id="image" name="image" class="custom-file-input">
<span class="custom-file-control"></span>
</label>
</div>
<button type="submit" class="btn btn-upload">Save Image</button>
</form>
JS :
$('#form3').on('submit',function(e){
e.preventDefault();
var url = $(this).attr('action'),
post = $(this).attr('method'),
data = new FormData(this);
$.ajax({
url: url,
method: post,
data: data,
success: function(data){
console.log(data);
},
error: function(xhr, status, error){
alert(xhr.responseText);
},
processData: false,
contentType: false
});
});
Route :
Route::post('home/form3', 'HomeController@store')->name('auth.upload');
Controller :
public function store(Request $request){
if ($request->ajax()) {
return $request->all(); // THIS IS RETURNING EMPTY OBJECT
if ($request->hasFile('image')) {
$name = $request->image->getClientOriginalName();
$request->image->storeAs('public/upload',$name);
$company = new Company;
$url = Storage::url($name);
$company->update(['image'=>$url]);
return response(['msg'=>'image uploaded']);
}else{
return response(['msg'=>'No file has selected']);
}
}
}
return response from server:
Object {_token: "zFKgoBkdjaIswMG5X0fOyVtaGSYMs84iPDtJA4F5", image: Object}
image : Object
_token : "zFKgoBkdjaIswMG5X0fOyVtaGSYMs84iPDtJA4F5"
__proto__ : Object
I see that only the token is returned, but not the data of the uploaded image. If I submit the form without using ajax then it works fine.
Output if presented without using ajax (this is the result I expect even sent using ajax):
array:2 [▼
"_token" => "eVEjl9UW4rU69oz1lIIiuNABZVpRJFldDST02Nje"
"image" => UploadedFile {#229 ▼
-test: false
-originalName: "empty-normal.png"
-mimeType: "image/png"
-size: 85494
-error: 0
#hashName: null
path: "C:\xampp\tmp"
filename: "php917E.tmp"
basename: "php917E.tmp"
pathname: "C:\xampp\tmp\php917E.tmp"
extension: "tmp"
realPath: "C:\xampp\tmp\php917E.tmp"
aTime: 2017-05-18 11:17:11
mTime: 2017-05-18 11:17:11
cTime: 2017-05-18 11:17:11
inode: 0
size: 85494
perms: 0100666
owner: 0
group: 0
type: "file"
writable: true
readable: true
executable: false
file: true
dir: false
link: false
linkTarget: "C:\xampp\tmp\php917E.tmp"
}]
Can anyone help me with this problem?
** THANKS FOR THE PROMOTION ...
+3
source to share
2 answers
Try this, it will help you.
$(document).on('submit', 'yourformId', function (event) {
event.stopPropagation();
event.preventDefault();
var data = new FormData($(this)[0]);
if (xhr && xhr.readyState !== 400 && xhr.status !== 200) {
xhr.abort();
}
var xhr = $.ajax({
url: "urltoUpload",
method: "POST",
cache: false,
data: data,
contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
processData: false, // NEEDED, DON'T OMIT THIS
// dataType: 'json',
statusCode: {
404: function () {
alert("status message")
},
500: function () {
alert("server down");
}
},
beforeSend: function (jqXHR, setting) {
if (setting.status !== 200) {
console.log("You can put here")
}
},
error: function (jaXHR, textStatus, errorThrown) {
// Now it will get parse error because dataType is json and response is html
// console.log(errorThrown);
},
success: function (data, textStatus, jqXHR) {
console.log(data);
if (typeof data.error === 'undefined') {
// Success so call function to process the form
console.log('SUCCESS: ' + data.success);
}
else {
// Handle errors here
console.log('ERRORS: ' + data.error);
}
},
complete: function (jqXHE, textStatus) {
document.body.innerHTML = "dfafsaf";
}
});
});
In the controller, you can use
dd($request->all());
for your sure !!
0
source to share
For reference
View file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Post</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form role="form" action="<?php echo base_url('welcome/workout') ?>" method="post" enctype="multipart/form-data" id="form3">
<h3>Upload Logo</h3>
<div class="form-group">
<label class="custom-file upload-image">
<input type="file" id="image" value="" name="image" class="custom-file-input">
<span class="custom-file-control"></span>
</label>
</div>
<button type="submit" class="btn btn-upload">Save Image</button>
</form>
</body>
</html>
<script>
$('#form3').on('submit',function(e){
e.preventDefault();
var url = $(this).attr('action'),
post = $(this).attr('method'),
data = new FormData(this);
$.ajax({
url: url,
method: post,
data: data,
success: function(data){
console.log(data);
},
error: function(xhr, status, error){
alert(xhr.responseText);
},
processData: false,
contentType: false
});
});
</script>
and my controller
public function workout()
{
if($_FILES)
{
echo "<pre>"; print_r($_FILES); exit();
}
$this->load->view('workout');
}
and output
Array
(
[image] => Array
(
[name] => green_planet-HD.jpg
[type] => image/jpeg
[tmp_name] => /opt/lampp/temp/php5ZSOdU
[error] => 0
[size] => 925133
)
)
-1
source to share