CODEWITHSUNDEEP
javascripthtmlxmlhttprequestfilereader
Tornseglare
Tornseglare

Reputation: 1167

Load a 'server-side' file with XMLHttpRequest in local html file

I want to load a json-stringified file in my javascript. The javascript reside in a html-file which I load from my local file system.

I have tried with the following code: 

var xhr = new XMLHttpRequest();
xhr.open('GET', fileName, true);
xhr.responseType = 'blob';  

xhr.onload = function(e) {
  if (this.status == 200) {
    // get binary data as a response
    var blob = this.response;
    alert("Yo");
  }
};

But the onload event fires only once, with the status=0, then no more happens.

I have tried to use both a full path to the file as well as a local file path like "/files/the_file.txt".

It looks like the problem is related with me trying to run the html file locally. I don't want to set-up a local server as I have seen proposed in similar posts here at so.

Anyone out there with a solution to this problem?

EDIT:

This is not what I want, but this might serve to give an example of how I almost want it. This example let the user select a file, and my script can now access the content of the selected file.

HTML: 

<input type="file" id="FancyInputField" onchange="doIt();">

Javascript:

function doIt(){
    var selectedFile = document.getElementById('FancyInputField').files[0];

    reader = new FileReader();

    reader.onload = function (e) {
        var output = reader.result;     
        var daObject = JSON.parse(output);
    }

    reader.readAsText(selectedFile);
}

This also works with a local html file. (No local server)

My question stands; How do I read the file(s) with no user interaction? The files reside in a sub-folder to where the html file are located. I can with no problem load and show an image from the same sub-folder, with an <img> tag. ..So why is it so difficult to load a text file?

Upvotes: 0

Views: 1655

Answers (2)

Quentin
Quentin

Reputation: 943100

How do I read the file(s) with no user interaction?

You can't. Those files belong to the user, not your website. You can't choose to read them.

I can with no problem load and show an image from the same sub-folder, with an <img> tag

There is a lot of difference between displaying an image to the user, and making the content of a file available to JavaScript code written by the page author.

So why is it so difficult to load a text file?

  1. Send someone an HTML document in an email
  2. Enjoy the JavaScript in it scooping up files from the hard disk and sending them to Joe Evil Hacker's server

It's just basic security.

Upvotes: 1

ibm701
ibm701

Reputation: 305

Use URL.createObjectURL(file), instead of ajax.

Upvotes: 0

Related Questions