function uploadPhoto(file) {
    if (!file || !file.type.match(/image.*/)){
        if(!file){
            postStatus();
        } else {
            return;
        }
    }
    var fd = new FormData();
    fd.append("image", file);
    fd.append("privacy", document.getElementById('privacy-handler').value);
    var xhr = GetXmlHttpRequest(); 
    xhr.open("POST", "url here");
    slideUp('photo-upload');
    slideDown('photo-manager-txt');
    document.getElementById("photo-manager-txt").innerHTML='<i>Please wait a moment while we process your photo.</i>';
    xhr.onload = function() {
        if(xhr.responseText == '0'){
            document.getElementById('photo-manager-txt').innerHTML='<br />Photo upload failed';
            slideDown('photo-upload');
            return;
        } else {
            document.getElementById('photo-txt').value='grab?v=1&file='+xhr.responseText;
            document.getElementById('photo-manager-txt').innerHTML='Photo uploaded and shared.';
            postStatus();
        }
    }
    xhr.send(fd);
}

This function seems not to be working. When I call the function I'm using:

onClick="uploadPhoto(document.getElementById('ID-HERE').files[0]);"

When I remove the 0 from files[], it atleast runs postStatus();, but it won't upload the photo. How do I go about fixing this?

    function uploadPhoto(file) {
    if (!file || !file.type.match(/image.*/)){
        if(!file){
            postStatus();
        } else {
            return;
        }
    }
    var fd = new FormData();
    fd.append("image", file);
    fd.append("privacy", document.getElementById('privacy-handler').value);
    var xhr = GetXmlHttpRequest(); 
    xhr.open("POST", "url here");
    slideUp('photo-upload');
    slideDown('photo-manager-txt');
    document.getElementById("photo-manager-txt").innerHTML='<i>Please wait a moment while we process your photo.</i>';
    xhr.onload = function() {
        if(xhr.responseText == '0'){
            document.getElementById('photo-manager-txt').innerHTML='<br />Photo upload failed';
            slideDown('photo-upload');
            return;
        } else {
            document.getElementById('photo-txt').value='grab?v=1&file='+xhr.responseText;
            document.getElementById('photo-manager-txt').innerHTML='Photo uploaded and shared.';
            postStatus();
        }
    }
    xhr.send(fd);
}

This function seems not to be working. When I call the function I'm using:

onClick="uploadPhoto(document.getElementById('ID-HERE').files[0]);"

When I remove the 0 from files[], it atleast runs postStatus();, but it won't upload the photo. How do I go about fixing this?

• javascript
• html
• ajax
• xmlhttprequest
• form-data

• What version of IE are you talking about? – Pointy Commented Mar 5, 2012 at 20:41
• 1 caniuse. file api – epascarello Commented Mar 5, 2012 at 20:53
• Well I think that's the problem, @Jake. The file API isn't supported until IE10. – Pointy Commented Mar 5, 2012 at 20:58

1 Answer 1

The XHR in IE doesn't support FormData until IE10. You may install Windows 8 Customer Preview to have a try.