How to save or modify files from a browser

Question

OK, so my question today is a bit vague, but it's one that a lot of people seem to be asking. Is there anyway to save a file from an HTML page that isn't strictly IE specific? I am trying to write an HTML page that opens and XML file and lets you edit the file in the page and save it. Obviously as a general practice this is bad, since there are huge security implications with writing files using scripts, but there must be some way. I am using JavaScript for most of the manipulation of the data, but after I make changes to the XML file, I want to be able to see these changes reflected in the saved copy on my hard disk. What options are there for something like this?

Answer 1

I don't think you can do that, however, you can use php to create a file with whatever content the user specified and save it on your server. At which point, you could then return the link to the user to view. It would work even better if you had a back end database.

Like I said, this option would actually be creating files on your server, not changing them.

Useful Link:

http://www.tech-recipes.com/rx/1455/php-create-a-file-on-your-server/

Answer 2

I'll suggest to check nodejs. I wrote an extension for Chrome, which does the exactly same thing. It opens a file from my hard disk, I'm able to edit it and later save it. I just used nodejs and sockets as a bridge between the browser and the file system. Here is a video which demonstrates the process: http://www.youtube.com/watch?v=exAWuCZFCSc And probably because you already know javascript you will be able to write your own module easily.

Answer 3

You can try this:

var dataXml = '<?xml version="1.0" encoding="ISO-8859-1"?><note><from>Myself</from><to>World</to><message>Hello world!</message></note>';    
var url = 'data:text/xml;charset=utf8,' + encodeURIComponent(dataXml);

window.open(url, '_blank');
window.focus(); 

Demo: http://jsfiddle.net/YEAkP/3/

Answer 4

as long as you don't care about old machines, it's easy using html5's JS API:

live demo: http://danml.com/iotest.html

<input type=file id=file onchange=pop(this)>
<button onclick="download(data.value, file.files[0].name, file.files[0].type )">save</button>
<br />

<textarea cols=110 rows=20 id=data ></textarea>

<script src="http://danml.com/js/download.js" ></script>
<script>
function pop(file){
  var fr=new FileReader();
  fr.onload=function(e){data.value=e.target.result;}
  fr.readAsText(file.files[0]);
}

</script>