Develop Reference

Doing a request with text and file doesn't fill laravel filebag array

I'm trying to post an image and some text via ajax onto my laravel server except I can't seem to add the File into the ajax request.
I have tried making a FormData and appending the needed params, I also tried serializing my form with jQuery.
$("#create-post-button").click(function(){
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
// var formData = new FormData();
// formData.append('src', $('#src')[0].files[0]);
// formData.append('title', $);
// formData.append('_token', CSRF_TOKEN);
// formData.append('_method', 'POST');
event.preventDefault();
console.log($('#src')[0].files[0]);
$.ajax({
headers: {
'X-CSRF-TOKEN': CSRF_TOKEN
},
url: '/posts/create',
type: 'POST',
data:
{
'_method': 'POST',
'_token': CSRF_TOKEN,
'title':$("#title").val(),
'src': {
'name':$('#src')[0].files[0].name,
'size':$('#src')[0].files[0].size
}
},
dataType: 'json'
});
});
I expect that when I dump my $request in laravel, that it has the correct request params but also including the $file (FileBag) param for the file that is being posted.
EDIT:
I have looked up the link #charlietfl provided in the comments and it helped me a lot, so here is the end result:
$("#create-post-button").click(function(){
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
event.preventDefault();
var file_data = $('#src').prop('files')[0];
var form_data = new FormData();
form_data.append('_method', 'POST');
form_data.append('_token', CSRF_TOKEN);
form_data.append('title', $('#title').val());
form_data.append('src', file_data);
$.ajax({
url: '/posts/create',
dataType: 'text',
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(){
showSuccessUploadingPost();
},
error: function() {
showErrorUploadingPost();
}
});
});

The CSRF token at file upload required to pass as a GET parameter.
$("#create-post-button").click(function(){
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
var form_data = new FormData();
form_data.append('title', $('#title').val());
jQuery.each(jQuery('#src')[0].files, function(i, file) {
data.append('src', file); //use the following line to handle multiple files upload
// data.append('src' + i, file);
});
$.ajax({
url: '/posts/create?_token=' + CSRF_TOKEN,
data: form_data,
cache: false,
contentType: false,
processData: false,
method: 'POST',
type: 'POST', // For jQuery < 1.9
success: function(){
showSuccessUploadingPost();
},
error: function() {
showErrorUploadingPost();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form id="uploadFrm" enctype="multipart/form-data" method="post">
<input type="file" name="src" />
<button id="create-post-button">Upload</button>
</form>

Append additional variable to formData

How do I append dataid to the formData so that AJAX POST's both? I have tried formData.append('id', dataid); and formData = formData.append('id', dataid);
$(document).ready(function() {
$('#insert_screen').on("submit", function(event) {
var dataid = $("#res option:selected").attr('data-value');
console.log("Value", dataid);
event.preventDefault();
var form = $('form')[2];
var formData = new FormData(form);
$.ajax({
url: "insert_new_screen.php",
data: formData,
method: "POST",
cache: false,
contentType: false,
processData: false,
beforeSend: function() {
$('#insert').val("Inserting");
},
success: function(data) {
$('#add_screen_modal').modal('hide');
window.location.reload();
}
});
});
});
UPDATE:
Below is the code I managed to get working:
$(document).ready(function(){
$('#insert_screen').on("submit", function(event){
var dataid = $("#res option:selected").attr('data-value');
console.log("Value", dataid);
event.preventDefault();
var form = $('form')[2];
var formData = new FormData(form);
formData.append("RecordID", dataid);
$.ajax({
url:"insert_new_screen.php",
data: formData,
method:"POST",
cache: false,
contentType: false,
processData: false,
beforeSend:function(){
$('#insert').val("Inserting");
},
success:function(data){
$('#add_screen_modal').modal('hide');
window.location.reload();
}
});
});
});
Many thanks to all those who gave me help. I hope this helps other.

How to upload multiple images with ajax?

I am trying to upload multiple image files. Please check out my code.
<form id="fileupload" method="POST" enctype="multipart/form-data">
<input type="file" name="files[]" multiple="multiple" id="images_input">
</from>
$(document).ready(function(){
$('body').on('submit', '#fileupload', function(e){
e.preventDefault();
var files = document.getElementById("images_input").files;
var files_array = [];
$(files).each(function(index, value){
files_array.push(value);
// files_array.push(value);
});//each
var user_id = $("#user_id_input").val();
var product_name = $("#product_name_input").val();
console.log("Data",files[0]);
var url = "../filemanager/s3_laravel/public/upload";
$.ajax({
url: url,
data:{
files:files_array,
user_id: user_id,
product_name: product_name
},
type: 'POST',
success: function(data){
alert(data);
}
});
});
$('#images_input').change(function(){
$("#fileupload").submit();
});//change
When I try to submit it I get this error https://prnt.sc/l8vmhn. Please help in this regard.

Adding processData: false to your options object fixes the error.

You need to use the FormData API. Like this.
<form id="fileupload" method="POST" enctype="multipart/form-data">
<input type="file" name="files[]" multiple="multiple" id="images_input">
</form>
<script>
$(document).ready(function(){
$('body').on('submit', '#fileupload', function(e){
e.preventDefault();
var formData = new FormData();
var files = document.getElementById("images_input").files;
$(files).each(function(index, value){
formData.append('files[]', value);
});
formData.append('user_id', $("#user_id_input").val());
formData.append('product_name', $("#product_name_input").val());
var url = "../filemanager/s3_laravel/public/upload";
$.ajax({
type: 'POST',
url: url,
contentType: false,
processData: false,
data: formData,
success: function(data){
alert(data);
}
});
});
$('#images_input').change(function(){
$("#fileupload").submit();
});
</script>

Finally It worked like this:
$(document).ready(function(){
$('#images_input').change(function(){
$("#fileupload").submit();
});//change
$("#fileupload").on('submit',function(event) {
event.preventDefault();
var formData = new FormData(this);
var url = "../filemanager/s3_laravel/public/upload";
$.ajax({
url: url,
type: "POST",
data: formData,
contentType: false,
cache: false,
processData:false,
success: function(data) {
console.log(data);
}
});//
});//submit
});//ready

how to append serialize with formdata in ajax

I am tring to append serilize with formdata.It is not working.My controller as two viewmodel with httppostfilesbase as a parameter.i want to append both serilize collection with formdata and i went to send all data including file to controller.it is not working for me.can any one help on this please`
var fileData = new FormData();
if (window.FormData !== undefined) {
var fileUpload = $("#myFile").get(0);
var files = fileUpload.files;
for (var i = 0; i < files.length; i++) {
fileData.append(files[i].name, files[i]);
}
}
}
var other_data = $('form').serializeArray();
fileData.append('file',other_data );
debugger
$.ajax({
type: "POST",
url: '#Url.Action("Save", "Settlement")',
data: fileData[0],
contentType: false,
processData: false,
success: function (result) {
if (result.redirectTo) {
} else {
$("#childcontent").html(result);
}
}
})
}
}

There is no need of fileData[0]. Change url to url: '/Settlement/Save',
Also check the console for any errors and revert if you need more information
Can you try with this?
$.ajax({
type: "POST",
url: '/Settlement/Save',
contentType: false,
processData: false,
data: fileData,
success: function(result) {
if (result.redirectTo) {
} else {
$("#childcontent").html(result);
}
},
});

How to send String data with formdata in ajax

<script type="text/javascript">
$(document).ready(function(){
$("#btnUpdate").click(function(){
alert($("#frm_data").serialize());
var formData = new FormData($("#frm_data")[0]);
var Desc= CKEDITOR.instances.editor1.getData();
$("#btnUpdate").attr('value', 'Please Wait...');
$.ajax({
url: 'update_job.php',
data: formData,
cache: false,
contentType:false,
processData:false,
type: 'post',
success: function(response)
{
$("#btnUpdate").attr('value', 'Update');
}
});
return false;
});
})
</script>
i use ckeditor for textarea field. but its can update value with new value, so i want to use another way with send textarea value with form data.
so how to send Desc data with fromData. in ajax.

To achieve this you can use the append() method of FormData to add whatever additional information you require:
$("#btnUpdate").click(function(e) {
e.preventDefault();
var $btn = $(this).attr('value', 'Please Wait...');
var formData = new FormData($("#frm_data")[0]);
formData.append('desc', CKEDITOR.instances.editor1.getData());
$.ajax({
url: 'update_job.php',
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'post',
success: function(response) {
$btn.attr('value', 'Update');
}
});
});