Develop Reference

"Redirect" to a FormData object

I would like to simulate a form submit with the values stored in a form data object. I can't use a classic form because I need to include dynamically created file object.
How can I simulate a POST form submit with the values of the FormData object?
i.e. The data should be sent in an HTTP request and the HTTP response should be used to show a new page, just as if the user had loaded a new page by submitting a form.

just initialize a FormData object and fill it with your params and then do the ajax call
let input = 'hello';
let formData = new FormData();
formData.append('input', input);
// append the data you need
$.ajax({
url: yoururl,
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data) {
console.log(data);
},
error: function(err) {
console.log(err);
}
});

The OP needs to use Ajax and then change window.location to the page they want it to go to

How to get a file from local disk then pass that to a POST method to upload to server

I have an input tag of type file. I use this to get a file from my local disc. What I need is a way to get and hold that file so I can POST it to a server.
<input type='file'>
//I now want to hold this file and pass this to this ajax post method
$.ajax({
type: "POST",
url: url, //I have URL, this isn't a problem
data: data, // do I place response here ?
success: function(){ alert('file posted')
dataType: dataType // ?
})

You have to post form data to the server through ajax. Try Following.
$.ajax({
url: url,
type: "POST",
data: new FormData('#yourForm'),
contentType: false,
cache: false,
processData:false,
success : function(){
// success message.
}
});
#yourForm is your form. if you are using form submit event then replace this by 'this' keyword.
So the formData is your form's data. and fetch file input by name on server.

Append var to FormData

I am using CKEditor as a WYSIWYG editor for an internal email system that I'm building, which requires me to get the data from from the textarea input like this:
var message = CKEDITOR.instances.messageArea.getData();
I am also allowing users to send attachments and I am sending the files to the server via the HTML5 FormData.
//create form variable
var form = $('#sendIndividualEmail')[0];
var formData = new FormData(form);
I have tried to append the the message variable to the formData, but it seems that formData only allows form fields to be appended.
Is there alternative way to append a var to FormData if it isn't a form field? If not, is there another way to get the message variable to the server with the formData?
ajax code:
request = $.ajax({
url: baseURL+'/sendIndividualMessage',
type: "post",
data: formData,
mimeType: "multipart/form-data",
dataType: json,
contentType: false, //required for formData
cache: false,
processData: false, //require for formData
});

You can append data to a FormData like that :
formData.append('message', message);
It doesn't need to be a form field.
To debug FormData, you have to post the data.
MDN FormData.append() Reference
Have a look here : FormData.append("key", "value") is not working

Can I "namespace" an ajax POST request that uses FormData?

I found this answer explaining how to use a FormData object to upload a file over ajax. I'm wondering if it's possible to rearrange the data structure that's sent over in the POST request.
My backend is in rails, and the controller expects the data like this:
xmlFile: {
some_property: 1,
attachment: [the file]
}
However, if I use a solution similar to the one from the above link, something like
var data = new FormData();
data.append('some_property', id);
data.append('source', file);
(where file is a File object), and then submit that with $.ajax
$.ajax({
url: url,
data: data,
processData: false,
type: 'POST',
contentType: 'multipart/form-data',
mimeType: 'multipart/form-data'
});
the form submits, but the data isn't namespaced under xmlFile. If I try to do something like
$.ajax({
url: url,
data: {xmlFile: data},
processData: false,
type: 'POST',
contentType: 'multipart/form-data',
mimeType: 'multipart/form-data'
});
it doesn't work. The request data just shows [object Object].

Sending binary data in javascript over HTTP

I'm trying to send a HTTP POST to a device on my network. I want to send four specific bytes of data to the device unfortunately I only seem to be able to send strings to the device. Is there anyway to send raw binary using javascript?
Here's the script I'm using to do the POST, it currently doesn't run unless I put a string in the data field. Any ideas?
(function ($) {
$.ajax({
url: '<IP of Address>',
type: 'POST',
contentType: 'application/octet-stream',
//data:'253,0,128,1',
data:0xFD008001,
crossDomain: true
});
})(jQuery);

By default, jQuery serializes the data (passed in data property) - and it means 0xFD008001 number gets passed to the server as '4244668417' string (10 bytes, not 4), that's why the server treats it not as expected.
It's necessary to prevent such behaviour by setting $.ajax property processData to false:
By default, data passed in to the data option as an object
(technically, anything other than a string) will be processed and
transformed into a query string, fitting to the default content-type
"application/x-www-form-urlencoded". If you want to send a
DOMDocument, or other non-processed data, set this option to false.
... but that's only part of the whole story: XMLHttpRequest.send implementation has its own restrictions. That's why your best bet, I suppose, is to make your own serializer using TypedArrays:
// Since we deal with Firefox and Chrome only
var bytesToSend = [253, 0, 128, 1],
bytesArray = new Uint8Array(bytesToSend);
$.ajax({
url: '%your_service_url%',
type: 'POST',
contentType: 'application/octet-stream',
data: bytesArray,
processData: false
});
Or without using jQuery at all:
var bytesToSend = [253, 0, 128, 1],
bytesArray = new Uint8Array(bytesToSend);
var xhr = new XMLHttpRequest();
xhr.open('POST', '%your_service_url%');
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.send(bytesArray);

You can send binary data via ajax with xhr2, you can send the data as a typed array or a blob.
(function ($) {
var data = new Uint32Array(1);
data[0] = 0xFD008001;
$.ajax({
url: '<IP of Address>',
type: 'POST',
contentType: false,
processData: false,
//data:'253,0,128,1',
data:data,
crossDomain: true
});
})(jQuery);
https://developer.mozilla.org/en-US/docs/Web/API/Uint32Array

You can convert your data with type of ArrayBuffer to a ArrayBufferView like this:
var fileContent = new DataView(<ArrayBuffer_data>);
With this you wont get a warning in the console when sending fileContent.

You could use atob() and btoa():
var data = new Uint32Array(1);
data[0] = 0xFD008001;
atob(data)
This converts your binary data into a base64 string that can be sent as text.