how to read text from input file in javascript? - javascript

I have a text file i want to read in my html page,both are in the same directory and i am not running a server. I intend that my users use the script offline(basically text manipulation based on expressions and preserving new line characters) .
I tried ajax call but mostly cross domain origin problem occured and i know most of the users will have this security tighened up in many browsers , so its not of use to circumvent this in only in my browser.
I want to support many browsers including old browsers as in IE7,8 etc which do not support HTML5 filereader.for the same reason reading using filesystemobject or activex is not good.
Reading the file after user select it as input , is this possible?Otherwise i would have no option then using other technologies like php,java etc which may expect my user to setup these.
Please excuse me if i am repeating this but i am a beginner web developer. I know that reading local files via javascript is not possible but is there any other way?

If you can't support FileReader, then the answer is pretty much no (at least, if you want to support a large range of browsers rather than rely on convenient feature x of browser y). Unless : you indeed increase the requirements for running the application and get some sort of local server going (for instance node.js, Apache, TomCat, etc. but like you said this will greatly increase the requirements and become cumbersome for users).
You could also rethink what it is you're trying to achieve. What are the contents of the file you want to read ? Can't these contents be part of the HTML file you're serving to your users (i.e. a large JSON Object inside a script-tag ?)
On possibility of using node.js:
Node.js is quite easy to install and assuming you are requiring from your users to install it, you can use it as a local server, which is a nodejs script of about two lines in size :). Running it locally would also omit the need to upload anything anywhere as you can directly read from the file system using the fs-object (see sitepoint.com/accessing-the-file-system-in-node-js).
STILL: from both a design and ease-of-use-point of view you might want to resort to using either another technology, or include the text file content inside the HMTL file

Related

What language can I use to read directories and files from an HTML page?

I'm continuing the project I talked about in another thread here, but at the moment I have stopped because I can't figure out how to dynamically add content to the page. It's supposed to be a webapp that runs locally (it won't be hosted on a domain).
I thought I'd be able to do it with JS, however I found out it can't read files for security reasons. What I was planning to do was get a list of all the files and folders inside a given directory (using JS), then append a div for each folder (with more stuff inside) inside the content area of my page. Seeing how I couldn't do that with JS, I thought maybe I could do it with PHP using the same approach, but I didn't like the idea of having to run xampp just for this... if there's a way to have PHP running without xampp and/or a server, then it'd be great, but so far I haven't found anything about that... except downloading PHP, but I have no clue how to "use" the console from the browser and then have it append the divs to the page, since the console and the browser are "separated".
To make it a little more clear: is there a way to run PHP without a server, and if not, what other languages can I look up to?
At this point I'd also like to know how websites such as clipchamp.com work. Do you guys have a clue about that?
In order to run PHP, you'll indeed need a server with the right permissions on the folder.
For small local projects, I've seen Node.js used, the learning curve isn't too steep if you already know JS. Check out the fs module in Node for access to the filesystem.
I thought I'd be able to do it with JS, however I found out it can't read files for security reasons.
It can, just not when the JS itself is executing in a web browser. JS running in, for example, Windows Scripting Host or NodeJS would have no problems.
if there's a way to have PHP running without xampp and/or a server
You can run PHP from the command line, but if you want the output to be rendered in a browser then you really need to be dealing with HTTP, which requires a server.
There is always the option of PHP's built-in webserver.
is there a way to run PHP without a server, and if not, what other languages can I look up to?
It doesn't matter what language you use. You'll find it hard to pick one that can't read the file system. They will all suffer from the same limitations when it comes to interacting with a web browser though. You need to be talking HTTP.
That is the whole concept of a browser. A browser can not give more permission to the system then the user of the browser does.
You have afaik two options: Use a server on the machine you want to manipulate (there are all kind of flavors, you can use nearly every language for building a server) or use/create a browser plugin that can do it (Silverlight can have access to the file system under some restrictions).

how to read a local file IO javascript

How do I read a local text file in JavaScript, w/o jquery etc.? I realize the question has been asked before, with a gazillion answers (but both html and javascript also have changed a lot over the years).
So here is my scenario:
do not want to use any webserver for this purpose as I wish to send a tarball+make install to someone for a demo and want zero installation
a blocking read is fine
files are simple text files such as "downloaded/xyz.json". They are indeed stringify'd json. Do not want to use a files dialog box to select file name - hardcoding is the desirable for this purpose
Security is not an issue in this context, although I am not prepared to run the browser with --disable-web-security or do anything that's even remotely cross-domain
env: linux (openSuse 11.4), using google-chrome
do not want to use jquery for this
Will greatly appreciate a simple code snippet, if it is feasible.

Loading local files via jQuery (part 2)

Ok, here we discussed the essence of the problem: in some browsers like Chrome and Opera HttpRequests to local files is turned off by default.
Now the question is: how to build such HTML+javascript viewer of HTML documents, that:
would run locally on any (or most of) browser(s) without additional tuning;
would not use frames;
would have an ability to work with many different files(5-10k);
It can't be done in straight HTML/Javascript if you want to load files via Javascript using AJAX requests. There are good security reasons to not allow local files script access to other files on the local system (see my answer here for more details), so most browsers will not allow this without special user configuration.
So your options are:
Don't load files with Javascript, use frames or another mechanism. If, as you state in the other question, you're shipping all this on CD, you might want to consider using some sort of build system that allows you to create static files using templates and either a database or flat-file content - Jekyll is one option I know of.
Ship an executable along with the files that can either run a local webserver or run HTML files in an application context. I think Appcelerator Titanium might fit the bill.

How to get the associated icon of a file in HTA (HTML/Javascript/VBScript)

I'm building an HTA application in which I need to display a list of file with their associated system icon.
I'm using FileSystemObject to list the file but there seem to have no way to get the icon...
I've found a script in VBS that can save the icon of a file into a .ico .
It read the file (PE resource file, .exe or dll) and parse the icon data.
I modified that script to return the icon's bytes, convert it to base64 and use embed base64 images in HTML.
Here's the original script: http://gilpin.us/IconSiphon/
Issue
) In most case the .ico contains multiple icons (many sizes and color depth) but there's no way I can specify which one to use (as I need 16x16 icons).
) Not all icons are displayed
) Could be slow with many file as it read exe and dll (but I'm ok with that, I can cache already fetched icon)
I've also tried some ActiveX control but none seem to work properly. Even those provided by microsoft (ShellFolderView or ListView) are very buggy.
Requirements
Must display 16x16 icon
Must allow multiple file selection
Everything must be embed in hta (if possible). No external .exe
Does anyone know a way to achieve that?
Thanks!
Use SHGetFileInfo() with the SHGFI_ICON flag.
http://msdn.microsoft.com/en-us/library/windows/desktop/bb762179(v=vs.85).aspx
The filesystemobject will provide you the necessary functions for enumerating files on the local filesystem. However to get the icon image you will need to use the win32 api per #seanchase's response or an external exe.
However you can access the win32api via javascript in the hta using the wshApiToolkit activex object - http://www.google.com/search?q=wshAPIToolkit.ucATO%2F&rls=com.microsoft:en-us&ie=UTF-8&oe=UTF-8&startIndex=&startPage=1
Find a copy of that and you're close to being done. It does require distributing the activex object with your code and shell executing the registration process from within the HTA so that might violate your third constraint. Though I believe you can base64 encode the exe into the hta in a dataurl and write that back out to the file system so it would at least be bundled into a single file. If you support that option then maybe embedding an exe that does the same would meet your requriements.
Definitely some hacky stuff that may be unstable on future OS versions - heck I'm not even sure the wshApiToolkit works on windows 7, and 8 is just around the corner. Good luck!
You indicated you're opened to installing ActiveX components and using them in your HTA.
If I had the time, I would approach this for myself by creating ActiveX components using Visual Studio to call FindResource, LoadResource and LockResource. These will enable access to the Group Icon resource for which I would then provide rich interfaces to iterate through the Icons offering the ability to extract BMPs (or PNGs).
This is "how" I would go about achieving this short of actually going off doing it.
Once I build a similar HTA interface and I faced the same problem. I solved the problem by creating a custom icon gallery and converting the images using base64. You may achieve the same by either converting or using sprite. Many UI does it, even java.swing has its own collection embbebed. As you noticed, reading from *.dll can speed down the application

What is the best way to upload a folder to a website?

I need an easy way to allow users to upload multiple files at once (ie I need to allow a user to upload a folder). I do not wish to put the burden of zipping on the user.
I would prefer to avoid Flash or variants if possible. I'm looking for a straight javascript / HTML solution if it is possible. Please note, this rules out the answers at: What is the best client side browser library to upload multiple files over http?.
You won't be able to do it with just HTML and Javascript. I'd recommend trying Fancy Upload, a MooTools plugin for multiple file uploads. It uses a mixture of JavaScript and Flash, but degrades gracefully. It works with all major browsers including IE6 and there is also a Flash 10 compatible release available for download (though the demo hasn't been updated yet).
Update (2012-11-26):
Multiple file uploads are possible with valums or blueimp file uploaders.
For recursive directory uploads, your best solution is using Chrome 11's new folder upload API. It also seems to work on Firefox if you use a vendor prefix.
With Firefox 42 and Edge having implemented the new directory upload proposal we'll finally able to do cross-browser directory uploads. The APIs are nasty enough that you may want to check out my wrapper, uppie.
If you're avoiding Flash (and presumably Java?) the JS/HTML-only solution still requires single-file inputs, but essentially you attach an onchange event to your input, adding a new input to the DOM whenever a file is selected.
Multiple file uploads are possible with valums or blueimp file uploaders.
For recursive directory uploads, your options are more limited:
Your best solution is using Chrome 11's new folder upload API. It also seems to work on Firefox if you use a vendor prefix.
This is also possible cross-browser with a Java applet. However the % of folks with a JRE installed has gotten pretty low these days (< 70%)
This isn't a pure js/html solution. As EndangeredMassa has pointed out, it's not possible. In fact, this idea is an IE/Windows only solution. I don't recommend it, but it can work.
So, all disclaimers aside ...
Many years and several employers ago, we used to do some client side stuff that instantiated the FileSystemObject. It would iterate through each of the files and pass them through to the server one at a time. Can't remember the details of how we did that :o(
Anyway, this usually meant that the client box would need to have to add the site to the list of trusted sites and give trusted sites a bunch of permissions that are turned off (for very good reasons). Stuff like the ability to Initialize and script ActiveX controls not marked as safe. That kind of thing.
I know that this isn't a perfect answer, but it could point you in the right direction.
FTP? And if necs, wrap in Java Applet, ActiveX or whatever you want.
If not, although you don't want flash, SWFUpload is quite cool, you may want to reconsider it as a decent option.
Here is pure JS solution using ExtJS library

Categories

Resources