My current project involves using goog.net.IframeIO to facilitate file uploads and receiving a JSON response from the server once the uploaded file is processed. However, I have encountered an issue specifically on IE9 where it throws an error "Access Denied to content document" and then prompts to save/open the JSON response. Below are snippets of the HTML and JS code I am working with:
HTML Code:
<form action="/" enctype="multipart/form-data" method="POST" id="upload-form">
<input type="file" name="selected-file" id="selected-file">
<div role="button" class="test-button>Upload</div>
</form>
JS Code:
test.prototype.uploadFile = function() {
// Implementing IframeIo to simulate AJAX for server form submission.
var form = /** @type {HTMLFormElement} */ (goog.dom.getRequiredElement(
'upload-form'));
var io = new goog.net.IframeIo();
goog.events.listen(io, goog.net.EventType.COMPLETE, goog.bind(this.processResponse_, this, io));
io.sendFromForm(form, '/uploadfile');
}
test.prototype.processResponse = function(io) {
if (!io.isSuccess()) {
alert('iframeio error encountered:' + io.getLastError());
return;
}
var response = null;
try {
response = io.getResponseJson();
..
} catch (error) {
....
}
I prefer utilizing Closure library rather than other libraries for this task. Additionally, I've reviewed discussion threads like Fallback AJAX file upload for Internet Explorer, however, was unable to comment on the accepted answer.
[Troubleshooting]: Upon investigation, I noticed that the method goog.net.IframeIo.prototype.onIeReadyStateChange_() is being invoked with various ready states such as loading, interactive, and finally complete, but fails to retrieve the content document from the iframe created in IE.
HTTP Request Headers: Accept: text/html, application/xhtml+xml, / Content-Type: multipart/form-data Accept-Encoding: gzip, deflate
HTTP Response Headers: X-Frame-Options: SAMEORIGIN Content-Type: application/json; charset=utf-8