Unable to upload image to server using XMLHttpRequest

Question

I am trying to upload an image to server using using XMLHttpRequest but fails. Below is the code I am using.

 <input type="submit" onclick="fn()" value="Click"/>

 <script type="text/javascript">
function fn(){
  try {
            netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
    }
    catch (e) {
    console.log("Not firefox");
    }
    xmlhttp = new XMLHttpRequest();
    var requestUrl = "http://localhost:9000/laptop.png";
    xmlhttp.open("GET",requestUrl,true);
    xmlhttp.overrideMimeType("text/plain; charset=x-user-defined");
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4) {
            if (xmlhttp.status == 200) {
                imageDataPost(xmlhttp.responseText);
                console.log(xmlhttp.responseText);
            }
        }
    } 
    xmlhttp.send();
}

function imageDataPost(imgData) {

    try {
        netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
    }
    catch (e) {
        console.log("Not firefox");
    }

    xmlhttp = new XMLHttpRequest();
    var requestUrl = "http://server_url/fileupload/";
    xmlhttp.open("POST",requestUrl,true);
    xmlhttp.overrideMimeType("text/plain; charset=x-user-defined");
    xmlhttp.setRequestHeader("Content-type", "multipart/form-data");
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4) {
            if (xmlhttp.status == 200) {
                alert("success");
                console.log(xmlhttp.responseText);
            }
            else {
                alert("Failed");
            }
        }
    } 
    xmlhttp.send("upload="+imgData);        

}

Any Idea whats wrong here. I am getting (an empty string) as response.. File is not uploaded to server. Guys please help.

What webserver do you use? When you get an error from the _server_, you should first take a look at the _server_, and not the client part. Do you have anything in the error logs on the _server_ side? — fab, Jun 10 '11 at 10:00

score 2 · Accepted Answer · answered Jun 10 '11 at 10:31

2

You simply can't upload a file with pure Javascript (at least not in a cross browser way, see this article for more information)

This is because XMLHttpRequest has no support for multipart/form-data, you can do tricks like using an iframe or use flash.

There are enough articles on the internet that explain this.

answered Jun 10 '11 at 10:31

Melvin

547
2
10

5

Note from the future: XHR now supports `multipart/form-data` through `FormData`. http://hacks.mozilla.org/2010/05/formdata-interface-coming-to-firefox/ – jakub.g Jul 09 '12 at 08:43

Yatharth Varshney · Answer 2 · 2020-10-10T20:16:42.427

Your code looks fine. The reason you are not able to upload file may be since you are accessing the server through the localhost and XMLHttpRequest does not work on localhost. It gives an error "No 'Access-Control-Allow-Origin' header is present on the requested resource" whenever you try to upload a file using XMLHttpRequest to the localhost, what you need to do is access the server using a domain name or through the IP Address

You can find a working example here. The link also discusses the above mentioned problem in the Note section.

You can also find a description of above problem at the link.

Unable to upload image to server using XMLHttpRequest

2 Answers2