Weird Sarafi file name when using drag & drop upload - html

Question

I am getting pretty weird behavior using HTML 5 drag and drop functionality in Safari.
My code looks something like this, nothing fancy:
handleFiles = function (files, e) {
// Traverse throught all files and check if uploaded file type is image
var imageType = /image.*/;
var file = files[0];
// check file type
if (!file.type.match(imageType)) {
alert("File \"" + file.name + "\" is not a valid image file. ");
return false;
}
// check file size
if (parseInt(file.size / 1024) > 2050) {
alert("File \"" + file.name + "\" is too big.");
return false;
}
uploadFile(file);
};
uploadFile = function (file) {
xhr = new XMLHttpRequest();
xhr.open("post", "fileuploadhandler.ext", true);
xhr.upload.addEventListener("progress", function (event) {
if (event.lengthComputable) {
$("#progress").css("width", (event.loaded / event.total) * 100 + "%");
$(".percents").html(" " + ((event.loaded / event.total) * 100).toFixed() + "%");
$(".up-done").html((parseInt(event.loaded / 1024)).toFixed(0));
} else {
alert("Failed to compute file upload length");
}
}, false);
xhr.onreadystatechange = function (oEvent) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
logAction(oEvent);
$("#progress").css("width", "100%");
$(".percents").html("100%");
$(".up-done").html((parseInt(file.size / 1024)).toFixed(0));
fileUploadedComplete(true, oEvent);
} else {
fileUploadedComplete(false, oEvent);
alert("Error" + xhr.statusText);
}
}
};
// Set headers
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.setRequestHeader("X-File-Name", file.name);
xhr.setRequestHeader("X-File-Size", file.fileSize);
xhr.setRequestHeader("X-File-Type", file.type);
// Send the file (doh)
xhr.send(file);
};
This works fine in Chrome and Firefox,
Any help would be appreciated!
Best,
tribe84

Answer 1

I can't replicate your error on Safari for OS X.
Perhaps the problem is related to Safari on Windows. Probably, not the best idea to test for Safari on Windows.
Here's a working JSFiddle: http://jsfiddle.net/wh3E5/