Develop Reference

Posting data with jQuery in Wordpress succeeds, but fails with FormData

I want to upload a file using jQuery/Ajax in my Wordpress plugin. The javascript to PHP call works. So the wiring etc. works. But as soon as I post the formData, necessary to post the files, I don't reach the PHP function any more.
The javascript,
var doesntWork = new FormData();
doesntWork.append('file', 'a name');
var withthisItWorks = 'text'
var data = {
'action': 'emfi_file_upload',
'data': doesntWork
}
$.ajax({
type: "POST",
url: ajax_object.ajaxurl,
data: data,
success: function(response) {
jQuery('#emfi-message').html(`<span style="color: green;">Respons: ${response}</span>`);
}
});
The PHP function just returns a string answer:
function emfi_file_upload_callback() {
echo 'Yes, in the callback';
wp_die();
}
When I put the plain text in my data object I get answer from the PHP function. When I put the formData in, there is no answer. I've tried a lot of examples on the internet, but it boils down to this every time. Adding contentType: false and processData: false, as was mentioned somewhere else, didn't help. What's wrong?

All fields that are being sent must be in the formdata object.
Additionally for FormData to work with jQuery.ajax, processData and contentType have to be set to false.
var doesWork = new FormData();
doesWork.append('file', someFile);
doesWork.append('action', 'emfi_file_upload');
$.ajax({
type: "POST",
url: ajax_object.ajaxurl,
data: doesWork,
contentType: false,
processData: false,
success: function(response) {
jQuery('#emfi-message').html(`<span style="color: green;">Respons: ${response}</span>`);
}
});

how to add file data in ajax call without using FormData?

How can i add a file data along with some normal data i.e without form in ajax call?
current i have in my ajax script
$("body").on("click", "#next-step", function(event){
$("#loader").show();
event.preventDefault();
var file = $("#upload_logo")[0].files[0];
$.ajax({
type: 'POST',
url: 'step-two.php',
data:{
name : "my name",
},
file : {upload_logo : file},
contentType: false,
processData: false,
success: function(response)
{
$("#loader").hide();
alert(response);
}
})
});
i found out the solution but it's not the way i would like it to work
event.preventDefault();
var fdata = new FormData()
if($("#upload_logo")[0].files.length>0)
fdata.append("upload_logo",$("#upload_logo")[0].files[0])
$.ajax({
type: 'POST',
url: 'step-two.php',
data:{fdata},
And it works, but my question is what if i just want to add my file in data how can i do this? instead of using FormData() any alternative?

file upload is not possible through ajax. You can upload file, without refreshing page by using IFrame. you can check further detail here
With XHR2, File upload through AJAX is supported. E.g. through
FormData object, but unfortunately it is not supported by all/old
browsers.
FormData support starts from following desktop browsers versions. IE
10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+
For more detail, see MDN link

Use Form data
var formData = new FormData('form id');
$.ajax({
type: 'post',
async: false,
cache: false,
url: '',
contentType: false,
processData: false,
data: formData,
dataType: 'json',
success: function (response) {
}
});

Add JavaScript to Geckofx 45

I would like to know how can I add JavaScript in the HEAD section of my webpage. I'm using Geckofx 45 to render the page in my Windows Forms App.
This is what I have done so far, but it seems not to work.
GeckoHtmlElement headElement = Navegador.Document.GetElementsByTagName("head")[0];
GeckoHtmlElement scriptElement = Navegador.Document.CreateHtmlElement("script");
scriptElement.TextContent = "('#test').on('submit',(function(e) { e.preventDefault(); $.ajax({ url: 'test.php', type: 'POST', data: new FormData(this), contentType: false, cache: false, processData: false, success: function(data){ $('#ajax_response').html(data); }, error: function() { } }); }));";
headElement.AppendChild(scriptElement);
Any idea what might been missing?.
The form with ID test is already in the webpage but I what to add the JavaScript in the DocumentCompleted event.
Thanks.

IE9 + IE10 AJAX Call not working

I'm getting reports that a website I developed is not functioning as it should in IE 9 and IE 10. The problem occurs when attempting to submit a form:
$("form[name='signIn']").submit(function(e) {
var formData = new FormData($(this)[0]);
e.preventDefault();
$( "#return_status_sign_in" ).empty();
$.ajax({
url: "<?= SITE_URL ?>account/login",
type: "POST",
data: formData,
async: false,
success: function (msg) {
$('#return_status_sign_in').append(msg);
},
cache: false,
contentType: false,
processData: false
});
});
The above submits the form via AJAX in all other browsers and works perfectly. However, in IE 9 and 10, the page refreshes and the POST data appears as get variables in the URL. How come is this happening? Could it be that e.preventDefault(); is not triggering? If so, what's the alternative to that?

As I stated in my comment, IE 9 uses the 'xdomainrequest' object to make cross domain requests and 'xmlhttprequest' for other requests. Below is a sample of code that I use to work around this issue. 'xdomainrequests' only send 'plain/text.' They cannot send JSON:
if ('XDomainRequest' in window && window.XDomainRequest !== null) {
var xdr = new XDomainRequest(),
data = JSON.stringify(jsonData);
xdr.open('POST', 'http://www.yourendpoint.com');
xdr.onload = function() {
// When data is recieved
};
// All of this below have to be present
xdr.onprogress = function() {};
xdr.ontimeout = function() {};
xdr.onerror = function() {};
// Send the request. If you do a post, this is how you send data
xdr.send(data);
} else {
$.ajax({
url: 'http://www.yourendpoint.com',
type: 'POST',
dataType: 'json',
data: {
// your data to send
},
cache: true
})
.done(function(data) {
// When done
})
.fail(function(data) {
// When fail
});
}

JQuery ajax call on same domain not sending cookies when data is sent

I am trying to test whether we can convert our existing file upload form into a more ajax/html5 without changing much of the backend. So here is what I am doing on the test:
function sendFile() {
var data = new FormData();
var file = $('input[type=file]').get(0).files[0];
data.append("file1",file);
$.ajax({
type: 'post',
url: '/upload.jsp',
data: data,
contentType: 'multipart/form-data',
processData: false
});
}
So the file sending part is not the problem. The problem is that I am not getting any of my cookies. If I take the data: data param out then it sends the cookies just fine.
Any idea why?
Thanks.

You need to set the withCredentials $.ajax() setting:
function sendFile() {
var data = new FormData();
var file = $('input[type=file]').get(0).files[0];
data.append("file1",file);
$.ajax({
type: 'post',
url: '/upload.jsp',
data: data,
contentType: 'multipart/form-data',
processData: false,
xhrFields: {
withCredentials: true
}
});
}