Skip to content

Javascript FormData Object makes life easier

23 September 2014

Discovering FormData object (supported by XMLHttpRequest level 2) was a relief for me adn I’d like to share it, hoping to be also useful for somebody else.

FormData object allows to easily construct a set of key/value pairs and to send them through XMLHttpRequest send() method to a server. Using it becomes the simplest and the fastest way, facilitating ajax transfer. But it has at least one disadvantage — data cannot be stringified.

Though FormData object has enough methods and properties one can start out from scratch very easily. Using jQuery to shorten the code it will look like:

$.ajax({
  url: "stash.php",
  type: "POST",
  data: new FormData(document.getElementsByTagName('form')[0] || null),
  processData: false,  // tell jQuery not to process the data
  contentType: false   // tell jQuery not to set contentType
});

The only code necessary is the constructor with a form element as input parameter. Same with Vanilla JS will be something like:

var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send( new FormData( document.getElementById( "myFormElement" ) ) );

that’s it. Simple, eh?

On the other hand one can create FormData from scratch, without having form element at all:

var formData = new FormData();
formData.append("username", "John Doe");
formData.append("accnum", 123);
var request = new XMLHttpRequest();
request.open("POST", "http://mysrv.com/process.php");
request.send(formData);

Be aware though that appending values will be converted immediately to string. So the above value of the accnum field will be the string “123”. Actually append() method expect one of the following types – Blob, File, or a string. Any other type if threated as a string.

Adding file is also easy. Having an <input type=”file”/> element we could use it like this:

// HTML file input user's choice...
formData.append("userfile", fileInputElement.files[0]);

As easy is also creating Blob

// JavaScript file-like object...
var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);

A Blob is immutable, raw data type – a file-like object. It does not require to be data in a JavaScript-native format. As the File interface is based on Blob both can be appended directly to a FormData object, like this:

data.append("myfile", myBlobObj, "myfilename.txt");

The FormData can be used either to send HTML form data or independently constructed chunks of data. When transmitted and if the form’s encoding type were set to “multipart/form-data”, the same format is used as form’s submit() method would use .

Using FormData with XMLHttpRequest causes every request to be unique, bypassing the cache since the local cache is indexed by URL.

Happy coding

Advertisements

From → JavaScript

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: