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

Maybe, you should use with your javascript code to allow user select the file. http://www.faqs.org/rfcs/rfc1867.html here is the corresponding RFC. — madhead, Oct 07 '11 at 06:22
I am using that but then it has to be converted to a url to assign to the xmlhttprequest right? If i see the value of the input element it shows only the name of the file not the entire path! anyways i am stumped while trying to convert that to a relative url of file:/// format! — kavita, Oct 07 '11 at 06:27
You should send all your form at once, not field by field. So why do you need to especially get that file? http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html — madhead, Oct 07 '11 at 06:35
could do it with direct form submission as i have already mentioned in my question but could not do it using xmlhttprequest as for creating the request the data must be read from the local file. if html 5 was used could have used the element.file[0] to upload it! but cannot do it using xmlhttprequest. — kavita, Oct 07 '11 at 07:14

score 24 · Answer 1 · edited May 23 '17 at 12:25

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:

Other SO questions also provide additional pointers:

you can load local files (such as json) as long as it is within your operating path relative to the HTML file loading. I want to get it to work with XHR, like jquery does. — FlavorScape, May 30 '13 at 22:18
Here are some additional related solutions for people new to XHR and fetch in JavaScript: https://stackoverflow.com/a/50007208/2180570 — V. Rubinetti, Oct 10 '20 at 17:43

score 5 · Answer 2 · edited Feb 02 '17 at 17:52

5

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;
}

edited Feb 02 '17 at 17:52

John Weisz

30,137
13
89
132

answered Feb 27 '14 at 01:29

Ricardo M

59
1
1

2

Just wondering: What's with the leading full stops in the HTML tags? e.g. <.div> <.iframe>? You seem to have HTML tags in your JavaScript code, too. – Michael Scheper Jul 13 '15 at 20:13
1

@MichaelScheper -- It was most likely an attempt to format code for presentation here, but was later edited into code-blocks without removing those parts. Fixed now. – John Weisz Feb 02 '17 at 17:53

score -4 · Answer 3 · answered Jun 18 '15 at 09:40

-4

I found an easy solution. You have to add "?application/xhtml+xml" behind your local url "file:///..".

answered Jun 18 '15 at 09:40

iFie

1

5

Some example with explanation would be great. – Nilambar Sharma Jun 18 '15 at 09:49
2

not a solution at all, if you are using a local machine, that parameter doesn't work at all. if you could put an example code please – Erick Aug 16 '16 at 14:18

xmlhttprequest for local files

3 Answers3

Linked

Related