Read local JSON file (no web-server) with JavaScript - javascript

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).

Related

How can I read a local file with a fixed path in Javascript? I only have the location of the file as a string. NO HTML forms allowed

I am creating a web app where I already know the location of a file that needs to be uploaded. Note that all I have is the path (example: Users/username/Downloads or Users/username/Documents) or something like that. How can I get Javascript to read that file as a File object or as a binary string so that I can POST it to a server.
Additionally, this file is not a simple file like a JSON or a txt file. This file would usually be a Microsoft Word file.
Due to security reasons, JavaScript executed from web apps have very limited access to the file system.
The best you can do is have the user select a file via a file input.
If having the web app user install a browser extension is acceptable, a browser extension may have more access to the user's file system. Here is an example extension that accesses a user's file system more directly: https://github.com/buggyj/savetiddlers
I think you can't to read the any files from the front-end by javascript, It is not allowed to do so. But you can get the file path from front-end and then pass it to the app framwork or back-end to processing. Beacuse the app's framework or back-end has the ability to access system files. Whereafter, you can POST to the contents of the file to the web server.

How to read local file that in located in the same directory as html using javascript

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].

Is it possible to upload and extract a zip file to a given location using only HTML and JavaScript?

I have a web page which asks users to select a zip file on their machine and upload it. It also asks for a destination on the server where the zip file should go. I want it to work in such a way that when they tell me where the file is on their machine and where it belongs on my server, then click "send," it should be sent to my server, placed in the designated directory, and unzipped.
I want to do this in just HTML and JavaScript. Is that possible? If so, how would I go about doing it?
You have to do this serverside; the client's browser cannot write to the file system of the server directly as it's a huge security risk.
In addition to that, not even HTML5 with it's File API can extract ZIP files. You need to do it on the server with PHP, or whatever language you're using.
If you just want to do things locally on the client, you could consider a Flash/Java/Browser extension, but I wouldn't recommend it for compatibility and performance reasons. Your best bet is to send a request to the server for it to process and send back. You're already serving the HTML page, so you can use the same server to process the ZIP file.
If, on the other hand, you want to write the ZIP file to the server, you have to do it server side for reasons stated in my first paragraph.
You can unzip/zip content within JavaScript using rawdeflate.
As other posters suggest, you cannot save directly to the local filesystem using a plain browser. You either need to echo the result back off the server (in which case it may as well unzip), or you can use Flash, for example, Downloadify, if it is installed.
Most modern browsers support FileAPI for loading from the local filesystem, certainly, Chrome, Firefox and Opera do. I haven't tested IE 9.

Is it possible to "upload" a file only with client side ? (no server involved)

I am trying to do a simple thing:
Let the user choose a txt file, and save its context to be used on the client side only.
no server side needed.
Is it possible ?
Thanks.
It is possible to do so with HTML5 Files API as explained in these resources:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
http://www.html5rocks.com/en/tutorials/file/dndfiles/
I guess you mean "save its content" and conclude you want to do anything with this content on the client side, e.g. extract some parts to fill a form. Anyway saving the whole file unchanged, on the same machine where it comes from, does not make sense.
So the problem is not how to upload, but how to open/read a file. You can do this with a Java Applet, Flash, Silverlight, ActiveX ... just to name a few.
JavaScript is not an option. It cannot access the file system.
If the html page, that is hosting your javascript, is from a remote server. This script is not trusted to do actions on your local filesystem.
<Obscure solution mode level = 1>
You can give more trust to a page, but this is something your user has to do. If this is an app/web only for use within an enterprise, you can probably do this centrally. And every browser handles this differently. So it is not something you can rely on, when you do not have a limited userbase.
<Obscure solution mode level = high>
If your (enterprise) users are using Internet Explorer, you could also create a HTML Application (simply give your html page an hta extension). These pages have full trust, but can only be started from a trusted location, or require confirmation from the user.
The only way you can acheive this successfully is to build an ActiveX type plugin/component (or java applet) you will have much more control of the client machine.
No. JavaScript cannot access the local filesystem.
However, you could install a webserver on your machine and e.g. run PHP on that one. Then you could do it without ever sending your data over a network connection. That would require you to do your data processing in PHP though.. probably not what you want. Or you could simply send back the data to your javascript.. but that'd be pretty awful to run an upload just to make the data available to JavaScript.

how to use javascript to open a folder and list html file names in that?

I want to list the names of HTML files in a particular folder using JavaScript (in the browser)...
Can anybody help me in this?
Thank You
If you're using Javascript that's running in the browser, there's no way to "open a folder". You have to obtain data about the folder contents through some data structure or by doing something like parsing a server generated folder index in HTML.
If you're using Javascript that's running on a non-browser engine (such as jscript, rhino, etc.) then you have to be more specific in the question as the answer will obviously depend on whether the engine where your script is running provides objects to access the filesystem or not.
This is what you are asking for:
http://www.irt.org/articles/js014/index.htm
Also read on FSO
But yes, if you can't use FSO if ActiveX is disabled on client system.
Javascript can't interact with the OS while running inside a browser, due to security concerns.
It can get a list from the server and display that to the client on the browser, but, to get a directory structure from the client computer to the browser would require some other application reading the directory structure and sending it to the server, and the server sending it to the browser.
Now, if you are using Actionscript it is possible to read the hard drive, and I expect that Silverlight would allow you to do this also, but I don't know.

Categories

Resources