Laravel 5 - AJAX image upload with CSRF protection - php

Question

I have a form set up to upload an image. I was previously using DropZone.js which worked fine and sent the CSRF token along with the ajax call. Everything server side is fine, but when trying to do this without DropZone I am getting token mismatch errors.
This is my AJAX call:
$(document).on('submit', ".hidden-image-upload", function(e){
e.preventDefault();
$.ajax({
url:'/project/uploadImage',
data:{
data:new FormData($("#upload_form")[0]),
},
dataType:'json',
async:false,
type:'post',
processData: false,
contentType: false,
success:function(response){
console.log(response);
},
});
});
And this is the HTML:
<form method="POST" action="http://localhost/project/create" accept-charset="UTF-8" class="hidden-image-upload">
<input name="_token" type="hidden" value="5lgtt8AgbeF3lprptj8HNXVPceRhoJbqBeErBI1k">
<input class="cover-image-upload-button" name="file" type="file">
</form>
How do I go about sorting out my AJAX call / Laravel to work together?

Answer 1

You can send the token in headers using $.ajax.
$(document).on('submit', ".hidden-image-upload", function(e){
e.preventDefault();
$.ajax({
url:'/project/uploadImage',
data:{
data:new FormData($("#upload_form")[0]),
},
headers: {
'X-CSRF-Token': $('form.hidden-image-upload [name="_token"]').val()
}
dataType:'json',
async:false,
type:'post',
processData: false,
contentType: false,
success:function(response){
console.log(response);
},
});
});
In the worst case, disable CSRF check in that route, just add the route in the array $except inside app/Http/Middleware/VerifyCsrfToken.php

Answer 2

Try this. You must also pass your CSRF Token along with your FormData:
$(document).on('submit', ".hidden-image-upload", function(e){
e.preventDefault();
var data = new FormData($("#upload_form")[0]);
data.append('_token', $('input[name="token"]').val());
$.ajax({
url:'/project/uploadImage',
data:{
data: data,
},
dataType:'json',
async:false,
type:'post',
processData: false,
contentType: false,
success:function(response){
console.log(response);
},
});
});