HTML5 / JavaScript: open text file, load into textarea / save textarea content to text file

Go To StackoverFlow.com

2

I want to do two things in my browser:

  • Load a text file into a textarea (has to be choosen via dialog box)
  • Save the content of a textarea into a text file (has to be choosen via dialog box again)
  • Load a video file and grab the file path to use it with a video player (1)

I've been looking around for a while on the internet. There are some solutions for IE only via ActiveXObjects, which I can't use (IE, seriously?). HTML5 file API has limited usability because I can't access the selected file's path.

I also found save dialogs for textareas, but they ignored line breaks for some strange reason and I don't know how to fix that, if possible at all.

So here are my requirements and options:

  • Support for FF and Chrome
  • JavaScript, HTML5 (and PHP, if it has to be)
  • possibly Silverlight, but I'm not very familiar with it and may only copy and paste :-/
  • it has to work on Mac as well
2012-04-04 20:44
by Momro


0

The File API is HTML that would allow you to access data, after which you can manipulate binary blobs in JavaScript, but as written this is not possible in pure JS and HTML based on your requirements.

The big blocker is "saving to a text file." The only way I've been able to do this is by opening up an iFrame that calls a server side language (such as PHP) to set the content type in the header to a type that prompts a download.

Flash and Silverlight are "client" technologies that run outside of the sandbox, which sounds like your only option at this point.

2012-04-04 20:49
by buley
Ok, that sounds pretty bad. I guess I'll have to skip this idea, then :-( Thanks for the replies anyway - Momro 2012-04-04 21:16


3

There is a dirty hack that gets the job done without resorting to Flash or Silverlight, or using a server, and it works in most browsers:

var uriContent = "data:application/octet-stream," + encodeURIComponent(fileContentsAsString);
window.open(uriContent, 'Save Your File');
2012-05-01 20:39
by agmenc
wow, and they make File APIs and such... yours even sounds much more pro-privacy - n611x007 2013-12-04 20:14


1

JS runs in a sandbox. That means: no access to files on the filesystem. HTML5 file API is the first „native” (as in not flash nor activex) attempt to grant limited access to the users file system.

2012-04-04 20:47
by ckruse


0

My ideas:

Load a text file: Use a normal HTML upload form (if you want to script, maybe submit it via AJAX)

Save a text file: Use a textarea and upon submitting, create the file server-side and then offer it to download. (As mentioned before, client-side scripts do not have access to the computer's file system)

Load a video file: Is the video on the server already? Otherwise will need an upload just like the text file. Then use a flash plugin to play the file from the server (the URI should be known to you then)

All of these are relatively simple to achieve using PHP. Line breaks from a textarea stay as \n in PHP. Tutorials: Form handling in PHP, File upload in PHP

Edit: Since PHP runs server-side you should not run into a lot of problems because of browser diversity. Alternatively, you can do all of these in Flash or Silverlight as well, although from my point of view that takes more learning and is less comfortable for the user.

2012-04-04 20:59
by Armatus
Ads