xmlhttprequest for local files

Question

I have the path to a file i want to send to a rest webservice the server. I am using the xmlhttprequest object. The post is as follows:

var url = "http://localhost:8080/RestWSGS/jersey/gridsense";
 var boundary = "--------------" + (new Date).getTime();
  xmlHttp.open('POST', url, true);
  xmlHttp.onreadystatechange = function ()
  {
      if (this.readyState != 4)
        return;

      var result =this.responseText;
    document.write(result);
    };
  xmlHttp.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);

var  part ="";
 part += 'Content-Disposition: form-data; ';
  part += 'name="' + document.getElementById("filename").name + '" ; ';
  //alert(document.getElementById("filename").value);
  part += 'filename="'+ document.getElementById("filename").value +  '";\r\n';

  part += "Content-Type: application/xml";
  part += "\r\n\r\n"; // marks end of the headers part
  part += 'filename="'+ document.getElementById("filename").value +  '";\r\n';
  part+= data;
   var request = "--" + boundary + "\r\n";
  request+= part /* + "--" + boundary + "\r\n" */;
  request+= "--" + boundary + "--" + "\r\n";
  alert(request); 
  xmlHttp.send(request);  

The data i want to send is on the client local disk. I want to use the get method for it :

var str = document.getElementById("filename").value;


    var data;
    var xmlhttp1 = getNewHTTPObject();
    xmlhttp1.open("GET", 
    "file:///New Folder/" +document.getElementById("filename").value , false);

    xmlhttp1.send(null);
    alert('hi' + xmlhttp1.status);
    xmlhttp1.onreadystatechange = function()    {
        if (this.status == 0)
        {
            alert("resp " + this.responseText);
            data = this.responseText;
        }
    }

The file:// does not work. If i put my file within the client directory and remove the file:/// then i can at least see xmlhttprequest open and give status 200 (i think ok!!). I read that for local file check status == 0 instead of readystatus == 4 so i did that but it still gives data variable as undefined and so the file does not go to the server. Initially when i had given the form action as my rest url it was uploading fine. Since I am not using html5 i cannot get the File object from the input type=file element. I want to use the xmlhttprequest object for this instead of the form element directly. Please help me with this problem with any suggestions or hints KAvita

---

Even if i do the uploading using form submission how can i use the return value of the web service. Thats the reason I need to use xmlhttpRequest. If anyone can suggest how the return value from the action is used it will be great!! Kavita

Answer 1

Historically, you can't query for local files from JavaScript (or shouldn't be allowed to, or something's odd). This would be a serious breach of security.

There are only a few circumstances where you can do this, but in general they involve specific security settings requiring to be set for your browser, to either lift the limitation or to notify the current page's execution process that that is is granted this exceptional right. This is for instance doable in Firefox by editing the properties. It's also commonly OK when developing browser extensions (for instance for Chrome or FF) if they request the file access permissions.

Another way to go around this limitation is to host a local web-server, and to declare virtual hosts on it to be able to do this sort of AJAX request to fetch local files. It's quite common for web-developers to resort to this trick (more like a standard, really) to have the benefits of local development but at the same time replicate a production system. You could for instance use a lightweight web-server like Jetty.

(Another mean annoyance, that you seem to have encountered, is that some browsers - at least some relatively older FF versions, like 3.6.x - will sometimes return a positive error code like 200 when they requests are blocked according to their internal security policies. Can be pretty confusing for a while...).

Finally, the newer HTML5 APIs do provide some new constructs to access local files. Considering reading:

• Reading Files in JavaScript using the File API
• Exploring the FileSystem APIs

Other SO questions also provide additional pointers:

• Access local files from HTML5 Desktop Application in html folder
• Solutions to allowing intranet/local file access in an HTML5 application?

Answer 2

I use an iframe.

<div class="item" onclick="page(event)">HTML5</div>

<iframe id="page" src="">

function page(e) {
    trigger = e.currentTarget.innerHTML;
    docname = new String(trigger + ".txt");
    document.getElementById("page").src = docname;
}