I need to save some data in a file and when loading the page i want to read this file and add this data to the page. I don't know why but this assignment is useless so we can't use database nor server stuff, so i have to save and read from a local file.
I searched the net and found knew that it is not allowed to access files directly from javascript but using the FileAPI in HTML5 i can select a file to read.
So my question is how is this done because there are no resources about this, i simply need to
read a file and into a string.
Thanks,
For using the File API (HTML5) including reading/writing the content of local files and some sample source code see these links:
https://developer.mozilla.org/en/Using_files_from_web_applications
http://www.html5rocks.com/en/tutorials/file/dndfiles/
https://developer.mozilla.org/en/DOM/FileReader
http://www.w3.org/TR/file-writer-api/
http://www.html5rocks.com/en/tutorials/file/filesystem/
You should be aware that not all borwser/versions support all of the above AND that access to local filesystem depends on security settings...
Related
Here I have learned that it is possible with JavaScript in HTML to create files offline and save them on the hard disk.
But what about reading files? Can JavaScript access, say one of my .txt files on my self phone and display the read data (or at least place it in the local storage)?
I know that it is possible with PHP, but there is no PHP on my cellphone, while HTML is always there.
You can use <input type="file"> and FileReader to read files stored at local filesystem, see File API; also How FileReader.readAsText in HTML5 File API works?.
If trying at Chromium or Chrome to read file: protocol launch the browser with --allow-file-access-from-files flag, without other Chrome instances running, or use a different --user-data-dir, see Read local XML with JS.
I need to access a local file on the client side of a Django project and read an xml file from the client's local disk. Like C:\\test.xml
I am doing this in a single html and script file and using Chrome --allow-file-access to get permission for this access and it works but when I move this code into my Django project and use this jquery script in my html templates, it does not work and shows cross origin request ... error.
Please help me. Why is this happening and what is the solution?
Thanks.
One viable option that would work and not set out security alarms all over the place, would be to use file form field on your page and ask an end user to give that file to you.
Then, you can use HTML5 File API and do whatever you need in javascript or send it to your server.
I have an application that creates html files that containes a lot of data to draw. This files are alwayes browsed from local file system (no http protocol at all).
I have an idea to compress the data and than place it in a raw format in a separate .dat file that will be put in the same place as .html one.
It is not a problem to read and uncompress this .dat file when it is on a web server. But I don't now how to read it when both files .html and .dat are local.
Of course one can use browser file objects for it but in this case user will be alwayes asked to do a stupid action like to chose the the only file from an control.
But I don't now how to read it when both files .html and .dat are local.
I take it you mean from JavaScript within that HTML file. Depending on the browser, you can't except via the File API (which, as you've observed, requires that you have the user select the file in an input[type=file] element).
The way you'd want to do this would be via ajax (XMLHttpRequest), and that would work in some browsers, but not in others. Chrome, for instance, denies all attempts to use ajax with file:// URLs (e.g., in pages served from the file system), even from local pages, even when you're using a relative URL like thefile.dat. IE allows it (or at least, older versions of IE did; I haven't tried it lately).
So unfortunately, I think the only way you can do this is via the File API, with the attendant input[type=file].
It seems that this has been asked a number of times, but I would like to make sure there are still no other alternatives.
So what I need to do is:
Generate a .JSON file from .net (easy)
Read the local JSON file with JavaScript and produce an html page with useful graphs etc (using Raphaeljs).
Deliver the outcome (HTML + associated JavaScript) to the client.
I wouldn't mind installing a local Apache to read the JSON file easily but since I cannot ask the client to do this, I am looking for a way to read a local JSON file (on the filesystem, no web server) with JavaScript, so that I eventually provide the client with the HTML, .js and .json and he can see the associated graphs.
I 've been reading that FileReader class is an option but I want to have the flexibility to support these on a number of IE browsers (let say IE7 to IE10).
Any help on how to work round this would be much appreciated.
Web browsers are not able to read files from the file system due to security reasons. If I've understood correctly, you have a .NET application running on the local machine?
If this is the case, you can host a WCF service to serve the JSON from your application. WCF self-hosting is described on this MSDN page. You should be able to make AJAX requests from the browser to a server hosted within you application on localhost.
If you want to support older IE, you need to go into ActiveX Security setting hell. Look into var fso = new ActiveXObject("Scripting.FileSystemObject");
But if you are delivering the content and HTML files to the client, why don't you just add the JSON markup directly into the html document? Seems like the EASY solution.
You can't read file from local disk in browser (security restriction). But once you are going to deliver HTML + js and JSON (in zip?) you can read json like from regular web server. Just use relative links and if JSON will be in same folder where HTML and JS is located. Or you may put your JSON as a part of HTML you deliver to customer.
But if you are going to show a page (HTML and JS) on your site in web, you should better ask client to upload their JSON file, and than download it from server (in AJAX style).
Is it possible to read the contents of an uploaded file (through <form><input type="file">) from inside javascript with no backend? I suppose it's possible with HTML5, but what about HTML4?
You can read (not upload - well, you can upload too, but that's like sending fan-mail to Edgar Allen Poe; nothing stops you but he won't be able to read it) from files if your script runs in a very trusted context.
If anyone on your network is browsing the web in a browser set to give that much trust, disconnect their machine from the network first, make their settings tighter second.
I don't know if I understand correctly. How about using something like uploadify together with jQuery. I guess you'll have to grant the webserver the privilege to write in the specified folders.
The security model will not let you unless you change the security to allow this.
http://www.mozilla.org/projects/security/components/signed-scripts.html
Can you elaborate on what you want to do?
I read the question as "How do I grab the contents from a file chosen using a file upload field and process it on the client without involving a backend/webserver".
I am thinking UniversalBrowserRead access for FF and HTA filesystem for IE for example