CODEWITHSUNDEEP
javascripthtmlfilesave
Momro
Momro

Reputation: 981

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

I want to do two things in my browser:

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:

Upvotes: 2

Views: 5503

Answers (4)

agmenc
agmenc

Reputation: 156

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');

Upvotes: 3

Armatus
Armatus

Reputation: 2191

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.

Upvotes: 0

buley
buley

Reputation: 29208

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.

Upvotes: 0

ckruse
ckruse

Reputation: 9740

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.

Upvotes: 1

Related Questions