I am trying to process an XML file using Javascript.
xhttp.open("GET","exportproject.xml",false);
What I want to do is, let the user specify the file (instead of hard-coding it to exportproject.xml) using file uploader and then process the same using Javascript instead of sending it to the server.
Is it possible?
You may want to take a look at the HTML5 FileReader API - http://www.html5rocks.com/en/tutorials/file/dndfiles/
If you don't mind a solution that requires a modern browser (basically, ie 9+) you can use the html5 file API with a basic <input type="file">.
Take a look at this link, there are a number of excellent examples to get you started.
Javascript cannot read a file from the client machine (where the browser runs). That would be a security violation. You will have to submit the file to server and process it.
Related
Is it possible to upload a file to a certain page using PhantomJS without submitting manually the form? I think something is possible using the Content-Type: multipart/form-data.
The example on https://github.com/ariya/phantomjs/blob/master/examples/imagebin.js is working fine, but I want to send directly the file in the POST request without interacting with any element.
Any suggestion?
Thank you very much
File uploads can be done over AJAX (as of xhr2 - if you need to support older browsers, use something like jQuery-File-Upload; there is a good tutorial here on using it just to do the upload part, and not using Blueimp's UI.) That is related to the "without manually submitting the form" part of your question. You will still need to interact with a file upload element to choose the file, and that is where you use page.uploadFile().
To do it solely from JavaScript, without "interacting with any element on the page", you could use page.evaluate() to run some custom JavaScript. It could then use the File Reader API to find the file on local disk, store it in a blob, then upload that blob over AJAX. The WebKit in PhantomJS (roughly equivalent to Chrome 13) should work, as apparently the FileReader API has been there since Chrome 6.
(BTW, if all you wanted to do is upload a file to a server using a headless script, PhantomJS is overkill, and you could use curl. But I'm assuming you want to use PhantomJS for some other reason!)
The solution I've used at the end is a mix of NodeJS and PhantomJS, in case I need to upload something I fork a process and upload the file(s) using the NodeJS "request" module and then send back to PhantomJS the output of the page, which need to be manually processed.
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).
A quick question, I recently checked out the new html5 File api for javascript. See it here. Is it possible to use it to pull in a server side file without ajax? I know there's a File object in JavaScript, could I do a "new File("serverSideStuff.xml");" with that?
From the API description -
Using the File API added to the DOM in HTML5, it's now possible for
web content to ask the user to select local files, then read the
contents of those files.
So no, you can't select server side files
No, it is only for local files, as I know.
It is not possible because the user must be aware of what your are loading, and is the user who can tell you what you can load or not.
I want to allow a web site users to be able to download files from my site, but with the help of a client-side downloader with an ability to continue an interrupted download.
For example, I want to sent a person a file with a size of 30+ Meg. I want the user to have the best downloading experience, so I can't afford him downloading 25 Meg and then getting the download dropped due to the network problems on his side.
Therefore, I want to have a javascript downloader rendered on a download page, that will show the actual client-side file delivery, and when it is downloaded, to give an ability to a user to save the file.
Or is it not possible due to the fact that javascript won't be able to open a save file dialog and save to a file system?
I'm afraid that is not possible with JavaScript and that's why:
To continue downloading from the certain point you should send to the server the position number to start downloading from. And as JavaScript has no access to local file system, you can't get that position.
UPD: it seems that I was too hurrying with the reply.
The file size can be gotten using the HTML5 File API and after getting the file size you can pass it to the server which should support the partial downloading.
But anyway, after downloading another part of the file you should sew two pieces together in some way; standard web browser dialog will only suggest to overwrite the file.
UPD2: to work with files in some Internet Explorers you can use FileSystemObject:
var fso;
fso = new ActiveXObject("Scripting.FileSystemObject");
I'd look into making a plugin or extension. Like those DownloadThemAll extensions for firefox and Google chrome. Another alternative would be to use Flash, either alone or integrating it with javascript like hinted here: http://www.communitymx.com/content/article.cfm?cid=0922A
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