Develop Reference

Send FormData and string using one function

I want to send data from the form (file from input and string from input) using ajax to ASP.NET Function. If I send only files i use:
function readURL() {
var input = document.getElementById("fileUpload");
var files = input.files;
var formData = new FormData();
var test = "some text";
for (var i = 0; i != files.length; i++) {
formData.append("files", files[i]);
}
$.ajax({
type: "POST",
url: '/Apartment/UploadFiles',
data: {files: formData },
processData: false,
contentType: false,
});
}
If I want to send an only string, I use:
function readURL() {
var input = document.getElementById("fileUpload");
var files = input.files;
var formData = new FormData();
var test = "some text";
for (var i = 0; i != files.length; i++) {
formData.append("files", files[i]);
}
$.ajax({
type: "POST",
url: '/Apartment/UploadFiles',
data: { test: test},
dataType: "json",
});
}
It is possible to send string and FormData using one Ajax? I try something like this:
$.ajax({
type: "POST",
url: '/Apartment/UploadFiles',
data: {files: formData, test: test },
processData: false,
contentType: false,
});
but now the string parameter is not sending (is null).
Additional - My Controller code
public async Task<IActionResult> UploadFiles(string test, IList<IFormFile> files)
{
...
}

It's not possible to combine multiple Content Types when sending a FormData object.
Append the string to the formData instance and set the name to test.
function readURL() {
var input = document.getElementById("fileUpload");
var files = input.files;
var formData = new FormData();
var test = "some text";
for (var i = 0; i != files.length; i++) {
formData.append("files", files[i]);
}
formData.append("test", test);
$.ajax({
type: "POST",
url: '/Apartment/UploadFiles',
data: formData,
dataType: "json",
processData: false,
contentType: false,
});
}

Jquery AJAX with additional post parameters and FormData, don't call success on success

The way how I send the parameters work. The server does the right thing, and make a valid response with application/json.
But the success don't get called.
var fd = new FormData();
var filelist = $('input#Image').prop('files');
if (droppedFiles.length) {
for (var i = 0; i < droppedFiles.length; i++) {
fd.append('image' + i, droppedFiles[i]);
}
}
$.ajax({
url: './doUploadDisplayImage?_id=' + id,
type: 'POST',
data: fd,
processData: false,
contentType: false,
cache: false,
xhr: function () { // This is for tracking the upload status
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress', function (evt) {
if (evt.lengthComputable) {
doProgressBar((evt.loaded / evt.total) * 100);
}
}, false);
return xhr;
},
success: function (res) {
res = JSON.parse(res);
// Don't get called
}
});

FormData in multiple ajax request files

I'm trying to do a Ajax's loops requests for send files to an API but i don't not what I send at Ajax's data. When I do only file in upload I use the own formdata object and works very well. I tried use loop and each row send an individual file but it's doesn't works too:
Multiple files:
var form_data = new FormData();
for(i=0;i<3;i++){ // 3 length just for tests
form_data.append('file', $('#myfile').prop('files')[i]);
}
for (var value of form_data.values()) {
$.ajax({
url: 'URI',
data: value,
processData: false,
contentType: false,
type: 'POST',
success: function (data) {
alert("Success!")
},
error: function(e){
alert("Error")
}
});
}

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 do file upload for Ajax

I'm trying to submit a form via ajax which has some images The following code returns an object (in console.form), "FormData", however how do I use it and or retrieve it, and whether it is right.
$("#form_galeria").unbind('submit').bind('submit', function(e) {
e.preventDefault();
var url = 'salvarGaleria.do';
var form;
form = new FormData();
form.append('fileUpload', e.target.files);
console.log(form);
$.ajax({
type: "POST",
url: url,
data: $("#form_galeria").serialize(),
processData: false,
contentType: false,
success: function(result) {
console.log(result);
},
error: function(err) {
console.log(err.status + ' - ' + err.statusText);
}
});
$('#multiplas').modal('hide');
return false;
});

Set the ajax data option to your FormData object. You will need to add whatever field values to the FormData object as well if you wish to send those along with the file upload. Also you have to append each indvidual file you cannot just append the e.target.files collection
for(var i=0; i<e.target.files.length; i++){
form.append("fileUpload[]",e.target.files[i]);
}
//or if you are only doing a single file
//form.append("fileUpload",e.target.files[0]);
form.append("someField",jQuery("#someField").val());
form.append("someOtherField",jQuery("#someOtherField").val());
$.ajax({
type: "POST",
url: url,
data: form,
processData: false,
contentType: false,
success: function(result){
console.log(result);
},
error: function(err){
console.log(err.status + ' - ' + err.statusText);
}
});