Supporting Internet Explorer is always kind of a drag, but sometimes you just have to. Adding to the mixture file uploads via AJAX and CORS only make it that much more fun.
When dealing with AJAX file uploads I always seem to keep going back to jQuery File Upload. Making these file uploads work on IE require fallback to using an iframe, which is supposed to work automatically almost right of the box. I encountered some issues, maybe it was the slack of sleep, reading outdated Stack Overflow answers or simply not understanding the documentation that well.
If the origin domain is different than the file upload server domain, CORS comes into play and there are some known limitations and issues on IE 8 and IE 9. In Internet Explorer 8, the XDomainRequest object was introduced to allow safe AJAX cross-origin requests directly by ensuring that HTTP Responses can only be read by the current page if the data source indicates that the response is public. Responses indicate their willingness to allow cross domain access by including the Access-Control-Allow-Origin HTTP response header with value *, or the exact origin of the calling page.This blog post lists and describes the restrictions and reasoning behind them, but these two are the ones that bit me recently.
- Only text/plain is supported for the request’s Content-Type header – This means that your API endpoint will have to be adjusted to be able to parse whatever data you send in the request. In my case I was returning a JSON response with an application/json content type, but after figuring this out I had to change the content type of that response to text/plain. On the client side that meant manually parsing the response data as JSON using $.parseJSON.
- Requests must be targeted to the same scheme as the hosting page – Once I thought I had everything working I was still getting hit by a couple of errors. Turns out I was generating a request from http to an https endpoint on different domain.
- The target URL must be accessed using only the HTTP methods GET and POST
Now comes jQuery File Upload into play.
File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.
Cross-domain file uploads on IE 8 and 9 use the Iframe Transport plugin that requires a redirect back to the origin server to retrieve the upload results. The example implementation includes a result.html that works for this. The repository includes the jQuery XDomainRequest Transport plugin which is required to enable cross-domain AJAX requests in IE 8 and 9. Internet Explorer 10 and above supports CORS using XMLHTTPRequest.
The tricky part here for me was ;“requires a redirect back to the origin server”. I had the results.html file in place but nothing was happening. Taking a look at the sample server implementations I noticed that in order for this to work I had to redirect the response to the location of the results.html including the response JSON I would normally return as a response but as a query parameter. The results.html enables jQuery File Upload to access the results from the iframe.
Here are a couple of excerpts that might help understand.
Photo by John Trainor