Fallback for FormData in IE 8/9

Question

FormData does not exist in IE 8/9 but I need that functionality in those browsers. Is there a nice fallback for this?

I would try to send over json data, but I need to pass over a file to the server. I append this file to the formData in modern browsers and just submit an XHR request. Because FormData does not exist in IE 8/9 this obviously fails.

// I cant seem to get this to work with a file.
$.ajax({
    url: '/genericHandlers/UploadDocsFile.ashx',
    type: "POST",
    data: model.toJSON(),
    contentType: 'application/json'
    }).done(function  (data) { 
       log('stuff happened!');
    });

Maybe an alternative is to create a fake form object in js then append the data to that?

Answer 1

I know only one possible solution, but it's not really 1-1 fallback for IEs. There are no possible communication API for sending files, because you cannot bind input fields in old browsers, like in a modern ones using FormData. But you can send whole form using an iframe. For this case you can use jquery.form plugin that support XHR DataForm and iframe (data sends with iframe when browser do not FormData API support).

Answer 2

You can send the file manually using XMLHttpRequests, there is lots of information on this here.

You could test if the browser can use the FormData object first with:

if(typeof FormData !== 'undefined')
   ...

MDN has a this function which you could modify for the fallback:

var XHR = new XMLHttpRequest();
var urlEncodedData = "";
var urlEncodedDataPairs = [];
var name;

// We turn the data object into an array of URL encoded key value pairs.
for(name in data) {
  urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
}

// We combine the pairs into a single string and replace all encoded spaces to 
// the plus character to match the behaviour of the web browser form submit.
urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');

Answer 3

This answer does not strictly address the question you asked, and for that reason I understand if Mods will remove it.

However, your question was closely related to an issue I was researching which is how to offer drag and drop uploads via FormData() with graceful degradation for older browsers?

There is a wonderful library called dropzone.js which offers a perfect solution to my problem. Perhaps the best part is that the library offers out-of-the-box graceful degradation to support file uploads on older browsers, as detailed here.

To paraphrase the source:

Fortunately if the browser is not supported, the dropzone.js library shows a customizable fallback class that contains an input field and a submit button.

I hope this information helps someone who is, like me, searching for a simple to implement and elegant solution for file uploads.