I want to get the string from a file in javascript but it doesnt' work. The error says that it is because Cross origin requests are only supported for HTTP. So the only reason this doesn't work is evidently because the HTML page isnt online. Is there a way to read a .txt file into a string that can workaround this issue
this is the code that doesn't work:
function readTextFile(file)
{
var File = new XMLHttpRequest();
File.open("GET", file, true);
File.send(null);
Text = File.responseText;
return Text;
}
At line 6 is stops and display the error.
Thanks in advance:)
You cannot use it for a local file for security reasons I believe, it should work as long as you make the file variable a valid http url to the file. You can use xampp / wampp / mamp / etc to create a local webserver and run it from there !
that way your link can be like http://localhost/link/to/file.txt
Related
I've built a simple html page with javascript in a separate file, called on a button press.
I've opened the html file in chrome, and the path resembles: file:///home/tom/projects/index.html
The javascript needs to read a JSON file (file:///home/tom/projects/mydata.json) which is in the same directory, using a hardcoded path.
I'm really struggling to do this. As I understand, this is because I'm using client side js (meaning I can't use the fs library for example), which is limiting my options.
According to the question here, I can't load the file if I use the URL in the format: file:///home/to.... as it gives me the error:
Cross origin requests are only supported for protocol schemes: HTTP, data, chrome, chrome-extension, https.
If I start an HTTP-server, as the answer suggests, I can use server-side modules, but if possible I would like to avoid this.
I've noticed many answers that suggest using a dialog box like this:
var selectedFile = document.getElementById('input').files[0];
function readFile (file_path) {
var reader = new FileReader();
reader.readAsText(file_path);
console.log(reader.substring(0, 100));
};
but I can't make this work with a path in the form: file:///home/tom/projects/mydata.json
Is there a way to load a .json file from a file:///home/to.... format URL using client-side javascript, with a hardcoded path (ie not asking the user to select the file from a selection box)?
This is a deliberate security restriction, to stop a user from being given, and then opening, a HTML page which then tries to read their disk.
Run your page in a webserver (as that question suggested) then you can either load the JSON from a URL (e.g. something like http://localhost/projects/mydata.json) using JavaScript, or use a server-side language to fetch it and display it inside the rendered HTML. Either way will work, the first way is probably simpler and closest to what you've got now.
It's always far better to serve HTML pages from a HTTP server, the way it's intended to be.
I'm working on a Chrome extension and I want to take data from text files that will be in the same directory as the Javascript files with the functionality (that is, read the text files in as strings and use those for analysis of some kind). I'm pretty new to Javascript, so I've been trying to figure out how to do this--it seems that FileReader won't work since the user isn't uploading the files I'm using, and I'm not sure how XML HTTPRequest would be useful in this situation. Thank you!
tldr; I want to read text files in the same directory as a Javascript file in as strings.
update: The file is not a file from the user's file system, but one that's packed with the extension! So the folder that contains the HTML file and the Javascript file will also contain the text files.
Someone correct me if I'm wrong but as far as I know this is not possible in JavaScript due to security concerns.
If it were, a web page could grab any file on your file system without your consent or without you knowing. This is a major security concern so I dont believe it is possible.
A user must be given the option to choose a file from their file system knowingly.
You can try:
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
var allText = rawFile.responseText;
alert(allText);
}
rawFile.send(null);
}
And specify file:// in the same directory as a Javascript file
Due to browser security standard you cant access any file from your (HDD) at all.
Please try using this chrome API
https://developer.chrome.com/apps/app_storage#filesystem-manifest
Ive got this code in my script tag at my index file
var xhr = new XMLHttpRequest();
xhr.open("GET","images.json",true);
xhr.onload = function () {
parsedJSON = JSON.parse(this.responseTEXT);
console.log(parsedJSON["frames"]["turn.png"]["rotated"]);
};
Ive executed it through my localhost on node.js
however it keeps coming up with 404 not found.
now i dont now where to put the file at.
in developer tools it shows that its been seached for at http://localhost:2000/images.json
i do not now where or how to place it in the local host, can anyone help
sorry for broken english.
If you're using Express...
Try creating a folder called public in the same folder as the file you execute with Node. Then, just pass that folder name to the express.static middleware like this:
app.use(express.static('public'));
If you put images.json into the public folder now, express.static will find it and send it to your browser when the file is requested by your script.
And, as epascarello pointed out, JavaScript is case-sensitive. You'll want to change responseTEXT to responseText.
Maybe the problem is that i wrote path to my file incorrectly, i'm using Linux, do i have to write path in some different way?
<script type="text/javascript">
function func(){
var xmlFile = new XMLHttpRequest();
xmlFile.open("GET", "/home/kat/course/data.xml", false);
xmlFile.send();
xmlDoc = xmlFile.responseXML;
document.getElementById("result_field").value = xmlDoc;
}
</script>
The file needs to be in the webroot.
So if you have the code in /var/www and your site is 'somedomain.com/index.html' you will need to have the xml file in the same /var/www directory and access it like "GET", "somedomain.com/anotherfolder/data.xml"...
You can't access server directories from JS... The javascript runs on the client side, not on the server side, so the file needs to be accessible on the website.
JavaScript can only access files your server is serving. Unless you are serving /home/kat/course/data.xml, you're going to need to move data.xml before your JavaScript can access it. Once you move it to a location being served, it will be accessible via an XHR.
As a side note, the responseXML property of an XHR is a Document object, not a string. See: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseXML
There could be two problems. The url must be {your_server_domain}/home/kat/course/data.xml, and the document.getElementById("result_field") must be an input/textarea to accept value attribution, otherwise, use innerHTML.
P.s.: Your local server domain usually is: localhost or 127.0.0.1:80.
Currently I use this code to read a txt file with words and perform some operations. However, this particular code requires the html to be deployed on a server. Is there any workaround where I can replace this code with something else to read the file without the need of a server?
var xhr = new XMLHttpRequest();
xhr.open( "GET", "dictionary.txt", false );
xhr.send( null );
var words= xhr.responseText.split(",");
It is NOT possible to call Ajax outside your server domain (except you use scriptagproxy, that too requires you to have some server side configuration). So, in short, you CANNOT read files on your local computer using Ajax calls.
You might like this article.
The file selection can be made either by input or drag-and-drop (not otherwise). Please see: this
You cannot read files from the clients' computer, so the text file you are reading must be on the same server as your javascript.
However, if you are loading the HTML file from your computer (e.g. file://c:/../test.html), you might be able to read files located on ONLY your computer by using relative paths.
You can hide an iframe on the page, with its src='dictionary.txt',
and read or manipulate the iframe's local content when it's onload event fires.