I'm trying to read the contents of a text file that I have stored on my (the host's) computer. When I encountered Javascript's FileReader I thought it was the perfect tool for the job. However, every example or question I see online shows how to use it to read files that are being uploaded from the user's computer (and thus they can use the event target to point toward which file they want to read) or they use AJAX (well, at least the XMLHttpRequest object) to read their own files.
So is it possible to read from local (to the host) files using FileReader? As I am researching this question it is making me wonder if I am going about this all wrong, but is the only way to use information from a text file on a webpage through AJAX? That seems wrong, it seems like there must be an easier way.
A FileReader needs a Blob. Which is an object representing a binary file in memory.
From where this Blob comes from doesn't really matter, but you need to have it the browser's assigned memory so that FileReader can access it. FileReader won't download anything by itself.
So if you are talking about a file stored on your server, then the browser has to download it from there to the computer's memory. As to how this can be achieved, there are many ways the most common being AJAX, as long as the data is downloaded from the server and accessible, at least to build a Blob from it, then FileReader will be happy.
If you are talking about a file stored on the user's disk, then the browser needs to be granted the permission to access it and load it in its memory, this is usualy done using an <input type="file"> element, since for security reasons, browsers don't give access to the user disk otherwise.
Related
Is there a way to download a canvas image to a file folder without a prompt showing up? I have found solutions requiring a prompt where you name the file, but I have not found any solutions where you can dynamically name the image and save to a local file. I am very new to front-end development, so I am not entirely familiar with Node.js or JQuery/PHP/Ajax. I have found solutions using these but they have ended up still using prompts.
In general, this is a security feature.
You don't want a site you browsing to save files to your computer silently. They can possibly contain a malicious code for example, or override an existing file. Thus, as a security feature the browsers are asking you to name the file you will save.
There is a way to name the files thou, so you don't need to present the user with generic file name.
On How to do that - it really depends what are you using to do it..
In your situation - if those are log files you want to save - you can send them back to the server. That can be easily done.
I have developed a script for myself to read and process local text and csv files on my computer using recent Chrome or Firefox browsers with the filereader api. The script will work on the computer, even though it is not connected to the internet or a local webserver.
The reasoning behind this is to have a standalone text file interrogator, which will work on almost any computer, requiring only a browser to execute and display reasonably formatted output. similar to an awk type application.
I use the filereader api and it works well.
I do not properly understand the workings of the browser, so my question may be very stupid.
Is it possible that my script can somehow pass the filename to the script filereader api, without having to choose a file from input type=file field.
eg I have a file called addresses.csv and it resides in the same directory as my html/js file with the filereader api code.
I want to simulate the choosing of a file, without accessing my local directory and without using a webserver, but a dropdown box of predefined filenames would be even better.
No, for security reasons its not possible, because otherwise people could open arbitrary files on the computers of their visitors which is definitely not intended.
This specification also assumes that the primary user interaction is with the element of HTML forms [HTML], and that all files that are being read by FileReader objects have first been selected by the user.
See http://www.w3.org/TR/FileAPI/#security-discussion
No you cannot. Javascript cannot read your local filesystem without the use of a file input or drag and drop files (html5) as it would be vulnerable to malicious use.
There was a start of a filesystem api which Chrome has included. But you cannot read/write to just any place you want on the filesystem, you can only do so to a sandboxed area on the filesystem. Wither or not they will continue to have this in future versions of Chrome though I do not know.
It also appears the W3C itself has discontinued the file system api
I am wondering if there is any method of reading file on the client side with javascript given the file name and path. I am aware of the method of reading through: input type="file".
What I mean is without opening up a file browser and selecting the file, just reading it with filename, like fopen.
If not an other method, how to instantiate a File object in javascript from filename and path?
Seeing the answers I thought of briefing a bit more on my purpose.
I am not really making a webpage. I am using browser just as a software that is available on any system. The html pages will all be local. I am doing this way be so that I have the advantage of the power of js. Given this situation is there any way to set permission flags that will let it read files?
Thank you.
There's the Drag 'n Drop API which would be the other option in reading files using JS
There will always be hurdles so that your code will not directly read from the client's filesystem. This is designed for privacy and security purposes.
Extensions/Plugins - sandboxing will be your enemy, limiting file system access
Java Applet - Needs a signed certificate to read the filesystem. A self-signed certificate will generate the "Will You Trust This Applet" prompt which would act as the security prompt.
Input type=file - gives the user the option to select the files or not
drag and drop - gives the user the option to drag in files or not
XHR - Same Origin Policy will block you, especially if you are executing the page locally and not on a server.
JSONP - Since this bypasses the SOP, however, your file should be in JSONP format.
I found solution to my problem, here it is...
It is true that we have restriction with javascript that whenever the user or the page requests for a file it has to go through that extra window that pops up,
but if all the files that you may request are inside a known folder then you can rather ask the user to point the zipped folder instead.
One can use tools like zip.js for opening a file that one needs in the zipped folder.
Thank you :)
Say I have a webapp which executes in its entirety on the client-side. Its purpose is to act as a file conversion utility, for example converting a user's local stored word document into a PDF.
So with the user's permission, the app can read a specified local file and process it, in memory, into PDF format.
How can I get the user to 'download' the result? since the data is held in the browser's memory anyway, I do not wish to upload it to some server.
[edit]
No flash based solutions
Expected file sizes to be up to 15mb
The solution for my case will be to use the HTML5 FileSaver API.
Perhaps this question should just be closed as it is effectively a duplicate of
Using HTML5/Javascript to generate and save a file
Thanks to aefxx
I'm writing a web application which allows a user to select a PNG file, write an iTXt chunk to it and then save it back to their local file system. I would use the new FileWriter API to do so but currently only Google Chrome has added support for it.
Since my file is represented in memory as a binary string I use data URIs to prompt the user to save the file as follows:
window.location.href = "data:application/octet-stream;base64," + btoa(blob);
Since the mime-type is application/octet-stream the browser prompts the user to open or save it. However the problem is that the user does not know which type of file it is. So the user has to add the file extension manually.
Currently I alert the user which extension the file needs to be saved with. However this seems like an inelegant solution. Is there a better way to achieve the same result?
If this were HTTP, then you'd either have to set the content disposition to attachment, to get the file saved even if its mime type is known, or to set the file name for an attachment of octet-stream type. Neither of these headers can be emulated using the data: URI, though, so I see no way to open a “Save as…” dialog using such a URI.
Others have asked how to open a save file dialog for a js variable, and judging from the answers there, there appears to be ready-to-use solutions which work as long as the client has Flash installed (and not blocked).
So perhaps you might try severl solutions, starting with the FileWriter you mention, trying a flash-based approach if that isn't available, and falling back to data: URI with an alert message about the file name extension. That way you could probably achieve the best result possible for each client.