I maintain a web app that uses CKeditor in conjunction with simogeo Filemanager. At some point (I am, unfortunately, not sure when) the file upload functionality stopped working. It's not a server code issue (at least not directly) because the XHR request is never sent to the server. Beyond that, though, the issue is difficult to diagnose because I don't get much in the way of information from the browser when the request fails.
To simplify debugging I am using a modified version of the AJAX file upload sample from here: https://github.com/New-Bamboo/example-ajax-upload
<?php
if ( isset( $_FILES['our-file'] ) ) {
echo 'You uploaded ' . $_FILES['our-file']['name'];
exit();
}
?>
<!--
https://github.com/New-Bamboo/example-ajax-upload
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ajax upload form</title>
</head>
<body>
<form action="index.php" method="post" enctype="multipart/form-data" id="form-id">
<p><input id="file-id" type="file" name="our-file" />
<input type="submit" value="Submit" /></p>
<script>
var form = document.getElementById('form-id');
form.onsubmit = function() {
var formData = new FormData(form);
var action = form.getAttribute('action');
sendXHRequest(formData, action);
return false;
}
function sendXHRequest(formData, uri) {
try {
var xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', evtXHR , false);
xhr.addEventListener('timeout', evtXHR , false);
xhr.addEventListener('error', evtXHR , false);
xhr.open('POST', uri, true);
xhr.timeout = 3000;
xhr.send(formData);
} catch (err) {
result.innerHTML = err;
}
}
function evtXHR (evt) {
var status = null;
try {
status = evt.target.status;
}
catch(e) {
return;
}
var result = document.getElementById('result');
var msg = result.innerHTML + '<hr>';
if (status == '200' && evt.target.responseText) {
msg += '<p>Results from the server:</p><pre>' + evt.target.responseText + '</pre>';
}
msg += '<p>XMLHTTPRequest Event ' + evt.type + '<br>';
msg += 'XMLHTTPRequest Status ' + evt.target.status + '<br>';
msg += 'XMLHTTPRequest Readystate ' + evt.target.readyState + '</p>';
result.innerHTML = msg;
}
</script>
<pre id="result"></pre>
</form>
</body>
</html>
Upon form submission (xhr.send()) the request dies without any kind of helpful error. Firefox kills the request and indicates it has been aborted (from the Firebug net panel). IE similarly kills the request with the following error in the console:
XMLHttpRequest: Network Error 0x2efe, Could not complete the operation due to error 00002efe.
Googling has offered little in the way of direction. The few possible explanations were too many requests, overlapping requests cancelling each other out, or request timeouts. None of those appear relevant. Mozilla has a note about stopped requests that seems potentially helpful, but isn't directly related to my issue.
The issue only crops up when submitting over AJAX using a POST request that includes a file. Submitting a regular, non-AJAX request works fine. Submitting an AJAX request without a file goes through just fine. Submitting a GET request works, but that severely limits the data size. Submitting the request to an HTML document instead of a PHP script seems to work around the issue.
On a server with a very similar configuration I an unable to duplicate the issue. I have, however, reproduced the issue on the same server using two different domains. And the issue can be duplicated on two different client computers using a variety of browsers.
So ... what now? Looking for either an answer or at least a suggestion for how to debug the issue.
You can find the simple upload script here: http://flora.p2061.org/fileup
