how to read a text file using Javascript - javascript

I am taking a text file from user and then posting that file back to the browser using ajax storing the content in db and then showing the content back to user page using Jquery post response.
Now i want to something like this..
Read the text file from the user computer using javascript. Display the content and when he submits the page I will save the values.

Can't be done in pure JS for security reasons. You would need to have the user upload the file to your server, and fetch the contents back through Ajax.
If you use Flash or Java, you should be able to gain direct access to the file. If you speak Flash/Actionsript, maybe SWFUpload's source code (especially the new client-side resizing functions) can serve as an inspiration.
Update: This blog entry should help. Read and write local files with Flash Player 10
Update: To elaborate on the "upload and fetch" thing, if you do the uploading in an IFRAME, you could even have the upload script simply output the text file's contents. Because the iframe belongs to your domain, you will be able to retrieve its contents via JavaScript when the upload has finished. As long as you send a content-type: application/text it should be fairly safe from any malicious attacks.

If you're ok with Firefox 3.6 support only check out https://developer.mozilla.org/en/Using_files_from_web_applications, otherwise you should use Flash, Java or silverlight for this.

You won't be able to read a file in user's computer due to security issues.

Reading client files in javascript is possible with the new File API available in modern browsers. Check this site and its code: http://www.readfileonline.com/
However, before reading file contents in javascript, the user must explicitly select the files it allows to read. This is a security feature of the standard.

Related

Possible download / upload manager embedded on html page with access to local filesystem

As the title indicates i want to have a certain application get access to the local file system. To describe why i will illustrate my situation:
I am a running a IIS WebApplication with the C# MVC 4 Framework as backend module. The site solely consists of HTML, CSS markup and some JS. The page will be loaded in IE11+ (Edge) only. For the standard procedure of displaying and accessing data from as well as sending data to the server this works quite fine.
On a certain page I want the user to be able to upload a file using a simple file dialog, like the one you can initiate with a simple <input type="file"> tag. I also want to offer the posibility to download files from the server but need to know where files has been saved / will be saved to.
As described on a lot of different websites, just like this one here, the HTML5 File API does a great job but will not be able to return the full qualified filename including the local path directions, same for JS accessing the file object.
As my research confirmed HTML5, JS and also SWF (Flash) will not report detailed information because they are all sandboxed applications or restricted by RFCs. I already unterstood and appreciate the effort to secure my trips to internet.
But in this case do need the paths where a file was upload from and the file has been downloaded to.
So my question is, what is the best way to expose the full path directions for a up- as well as downloaded file to report them back to the server?
Is it possible to embed a SWF object inside HTML which will run inside an Adobe AIR sandbox or is a signed JAVA Applet still the one and only solution to accomblish this security breaking task?
A solution i would also apreciate would be the possiblity to ask the user to get access the file system, like you grant access to the web push service to receive notifications.
Also if there is a possible solution which may suite my circumstances please let me know by adding some simeple examples / revealing some factful links, thanks in advance.

Read file names in a local folder in an HTML page

I am creating a HTML page where I need to display the names of the files present in the specific local folder, example - C:\Users\User1\Documents\folder1 . I tried to write the code in java script but have not succeeded yet. Most of the question threads mention about "ActiveXObject" to be used but that itself does not work for me.
Reference: JavaScript: Read files in folder
Can anyone help me in achieving this?
In general, you can't do that. Web pages do not have access to the local filesystem.
Chrome can access the contents of a directory that is selected using a file input field. However, other browsers, such as Internet Explorer and Firefox, have not implemented this feature at this time, nor is there currently any way to access a directory that was not selected by the user.
In theory, it is possible to read arbitrary files using a signed Java (not Javascript) applet. However, this requires the user to approve a series of extremely scary warning dialogs — and requires Java! — so it's really not a viable solution.
I'm afraid I may be the bearer of bad news for your design: The action you are requesting expressly violates the security model as specified in the File API spec. The client implementation of FileReader() must make sure that "all files that are being read by FileReader objects have first been selected by the user." (W3C File API , 13. Security Considerations: http://www.w3.org/TR/FileAPI/#security-discussion).
It would be a huge security risk of browser scripts could just arbitrarily open and read any file from a path without any user interaction. No browser manufacturer would allow unfettered access to the entire file system like that.
Thinking about it however, if it is all being run locally, you could use ajax to query a server side script that could return the directory you request.

how get list of files in a folder using javascript

I am working on project for desktop application. I am using Qt controls with visual c++.
I am loading an html file in the QWebView as,
m_pWebView->load(QUrl("../../../demo/index_Splash_Screen.html"));
Now, what i want is, say, I have some .zip files in my location "c:\demo", I want list (or array of file names) of the files present in that directory.
How can i do this through javascript ?
PS: I went through this link, but it didnt match my requirement. I have not worked with of html, javascript and jquery. Please help me.
I'm afraid you cannot access local files or directories using javascript due to security issues.
Edit: I hadn't thought about the file api so thought for a moment this might not be true, but without some user input to give permission, this still cannot be done.
This question has a good response from PhilNicholas:
I'm afraid I may be the bearer of bad news for your design: The action
you are requesting expressly violates the security model as specified
in the File API spec. The client implementation of FileReader() must
make sure that "all files that are being read by FileReader objects
have first been selected by the user." (W3C File API , 13. Security
Considerations: http://www.w3.org/TR/FileAPI/#security-discussion).
It would be a huge security risk of browser scripts could just
arbitrarily open and read any file from a path without any user
interaction. No browser manufacturer would allow unfettered access to
the entire file system like that.
Thinking about it however, if it is all being run locally, you could use ajax to query a server side script that could return the directory you request.
If it is a Windows application then you could access the local filesystem by using ActiveX objects. You might have a look at this link Reading a txt file from Javascript
Note that activeX usage is possible only when using IE as browser/engine; I used to need it a while ago for developing an HTML application (.hta files).

Read a local file using JavaScript HTML5 file api (offline website)

I am working on an web site which will be packed in an .exe file. So the site will only be used offline. Now i need to parse an local xml document. How can i get the file handle to a local file using html5 file api?
EDIT: I dont want to use <input...> or dragging file into browser.
I'm afraid I may be the bearer of bad news for your design: The action you are requesting expressly violates the security model as specified in the File API spec. The client implementation of FileReader() must make sure that "all files that are being read by FileReader objects have first been selected by the user." (W3C File API , 13. Security Considerations: http://www.w3.org/TR/FileAPI/#security-discussion).
It would be a huge security risk of browser scripts could just arbitrarily open and read any file from a path without any user interaction. No browser manufacturer would allow unfettered access to the entire file system like that.
If your script really needs that XML file, you are going to have to instruct users on how to grant the browser access to it, as every browser will prevent your code from opening it directly without user action.
Well, technically there is indeed a way, but you're going to (hopefully) need to bypass the browser's security settings, and it is inherently unsafe, but no more so than anything else requiring specific file locations.
That said...
<html>
<head>
<script>
function foo(){
//insert desired filereading script here.
}
document.getElementById("fileFoo").click();
</script>
</head>
<body>
<input type="file" id="fileFoo" display="hidden" value="filepath.extension" onclick="foo"/>
</body>
</html>
Naturally, I've kept this vague (and slightly unorthodox) for my reasons, but provided you have the necessary control over the environment, it's completely possible.
I am experiencing the same problem these days. I need the website to display some data each time I launch the webpage. The data need to be adaptive to each launch, automatically, so I don't think #Augusto 's link could solve your question.
After trying out different ways (including writing a temporary local XLM or JSON file), I finally persuade myself that maybe "replacing" the "data" in the html file could be the most straightforward way.
I have a html template, within which there is a string like [data]. Each time when launch the webpage, [data] will be replaced by real data like [1,2,3]. So actually it is the new file that is launched.
You can go to enter link description here to see how the "replace" is done. Good luck.

Add the uploaded txt file to HTML table

Is it possible to append the content of an uploaded text file to a <table>, and not its name? I guess, I want to open the uploaded txt file, parse and added the content to the table on the same page. Here is where I'm at right now. :(
Thanks so much in advance.
Sadly you can't do this. In order to do something like this you need some server side code.
The main issue is one of security -- local javascript can't look at local files. The upload button can only send the file to the server not the local javascript.
Typically people solve this problem using flash which does not have the same security requirements -- or a local program.
Reading the contents of a file selected by an upload input will be possible with the File API, which has some support in newer browsers (Firefox and more recently Chrome).
On browsers that don't provide this, you'd have to post the form and have the server echo out the content of the file for the script to pick up. (eg post form to iframe and have server response with script to call parent.callback('file content')).

Categories