I am trying to send the file data in my controller using ajax but it doesn't work. Here is the code structure below;
THE FORM
<form id="contact_img" enctype="multipart/form-data">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input id="contact_image" name="contact_image" type="file" class="file">
<input type="text" class="form-control" name="testtest" id="testtest" required>
<button type="submit" class="btn-default">Save</button>
</form>
AJAX
$.ajax({
url: "{{ url('/') }}/admin/upload_contact_img",
data: $("#contact_img").serialize(),
success: function (data) {
alert(data);
location.reload();
},
});
my Web Routes
Route::get('admin/upload_contact_img', 'admin_controller@contact_img_upload');
THE CONTROLLER
public function contact_img_upload(Request $form){
if ($form->hasFile('contact_image')){
echo $form->file('contact_image');
}else{
echo "empty";
}
echo $form->testtest;
}
only the input testtest display the value.
Try to use formData() instead serializing form.
$("#contact_img").on('submit', function(e){
e.preventDefault();
var form = new FormData(e.target)
$.ajax({
url: "{{ url('/') }}/admin/upload_contact_img",
data : form,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success: function (data) {
alert(data);
},
type:'POST'
});
});
see example https://jsfiddle.net/cihkem/hk7u9kLf/
use jQuery.form.js
to submit a form via AJAX. you can also have upload progress. visit following link.
Problem is that Ajax file uploads do not work so easily. You need to implement for example FileReader.
See this answer: Uploading files in HTML5 with Ajax
1) Add id
in form submit button
<form id="contact_img" enctype="multipart/form-data">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input id="contact_image" name="contact_image" type="file" class="file">
<input type="text" class="form-control" name="testtest" id="testtest" required>
<button type="submit" id="submitBtn" class="btn-default">Save</button>
</form>
2) Ajax
jQuery(document).ready(function($){
$("#submitBtn").click(function(e) {
e.preventDefault();
var contact_image = $("#contact_image").prop("files")[0];
var testtest = $("#testtest").val();
var form_data = new FormData();
form_data.append("contact_image", contact_image);
form_data.append("testtest", testtest);
$.ajax({
url: './admin/upload_contact_img',
type: "POST",
data: form_data,
dataType: 'json',
cache: false,
contentType: false,
processData: false,
success: function(data){
console.log(data.contact_image);
console.log(data.testtest);
},
error:function(error){
console.log('Something went wrong');
}
});
});
});
3) Inside controller
public function contact_img_upload(Request $form){
{
if( $form->hasFile('image')) {
$image = $form->file('image');
//Image handling code //
}
$testtest = $form->testtest;
return response()->json(['contact_image' => $image, 'testtest' => $testtest]);
}
If you need a demo project, just clone this project Laravel-BoilerPlate-Template
simply put this in the top of your controller file
use Illuminate\Http\UploadedFile;
because The file method of Request returns an instance of the Illuminate\Http\UploadedFile class, and to manipulate it, the namepace must be in scope