javascript object's XMLHttpRequest setRequestHeader method doesn't work

Question

I have a problem with file uploading. I'm using that very method described in THIS article. I downloaded the whole script published by the author from HERE.
The application is meant to load files through HTML5 drag&drop and then, through javascript, send them to serverside by ajax request.
Everything works fine but the problem occurs when I want to read a parameter from AJAX request header. Here's the code of PHP "file reader":

$fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false);

if ($fn) {
//above there is the upload of the file with file_put_contents function
//which actually works fine when I replace $fn with my own value and ommit the "if" condition

Earlier, the XMLHttpRequest.setRequestHeader method is launched to set "X_FILENAME" header. Here's the javascript:

var xhr = new XMLHttpRequest();

// start upload
xhr.open("POST", $id("upload").action, true);
xhr.setRequestHeader("X_FILENAME", file.name);
xhr.send(file);

And here's the proof (a crop from my Chrome's "firebug"):

When I var_dump the $fn variable in PHP it returns boolean FALSE. What is wrong?

P.S. I'm using XAMPP v1.8.1 with Apache 2.4.3 and PHP 5.4.7 on Win7 x64. I'm running the site on the latest Chrome. As you can guess the site is running on localhost. I didn't change anything in php.ini file - everything is set to default.

Answer 1

Underscores don't seem to be valid characters for header names. Use Hyphens and it will work beautifully.

xhr.setRequestHeader("X-FILENAME", file.name);

and no changes are required in your PHP.