2

I'm creating a development tool that will be creating CSS based upon an SVG sprite sheet graphic file. This script needs to write out the CSS back to /public/css/main.css. So, no, I'm not interested in a sandboxed file structure (though that is cool stuff).

Keep in mind that this is NOT for production. It is simply a development tool to streamline our workflow (and hopefully benefit the web design/developer community). I have investigated the --allow-file-access chromium switch but still am not sure if it allows write privilege.

So, my question is: How can I write a string to a file using javascript that is running within the browser? Keeping in mind that this is not for production.

risingtiger
  • 851
  • 1
  • 11
  • 21
  • Already answered: [How to read and write into file using Javascript](http://stackoverflow.com/questions/585234/how-to-read-and-write-into-file-using-javascript) or [Use Javascript to write to text file](http://stackoverflow.com/questions/13436398/use-javascript-to-write-to-text-file) – LasagnaAndroid Oct 18 '13 at 18:11

4 Answers4

0

Simple answer:

not possible due to security constraints of the browser.

You can add flags like:

--allow-file-access

On ChromeOS, file:// access is disabled except for certain whitelisted directories. This switch re-enables file:// for testing.

--allow-file-access-from-files

By default, file:// URIs cannot read other file:// URIs. This is an override for developers who need the old behavior for testing.

But all these are for reading. I doubt you will succeed with this approach. MMaybe you should switch to node.js. There you can read / write files (I think)

update

For chrome you may create a NaCL-extension. There is a flag to disable the snadbox for NaCL extenations: --allow-nacl-file-handle-api

PS: I think a browser would be the hardest runtime environment to write files because:

  1. There is (or a least was) no file-API
  2. The file API has no access to the host filesystem
  3. The browser develop do their best to create a sandbox.
Christian Kuetbach
  • 15,850
  • 5
  • 43
  • 79
0

I don't think it's posible in chrome/firefox but I have seen webkit desktop application SDK's. These types of SDK's should have file I/O api's

tide SDK looks interesting.

0

If you're not making a Chrome/Firefox extension or desktop app (which, by what you said I'm sure you're not), there's no way you can do this with Javascript on the browser. You should use a server-side language for something like this and maybe send the changes directly to the server, and then back to the client, but I don't think that fits your needs.

LasagnaAndroid
  • 2,815
  • 1
  • 16
  • 20
  • Currently I am using a server side script to receive the css string and save it back to the file. This complicates the deployment of this workflow across projects and team members so was hoping for a more succinct self contained method. – risingtiger Oct 21 '13 at 17:00
  • @risingtiger AFAIK the only way to achieve this (and **maybe** the easier) is to make a browser extension. Other thing you could do is allow them to download (and upload if needed) this new created css as a file, but that might complicate things too. – LasagnaAndroid Oct 23 '13 at 16:47
  • I went down the path of creating an extension in Chrome but, alas, ran into road blocks. Chrome provides an option in an extension manifest file to allow file access permission (which has to be verified by the user). Its syntax is as follows: "permissions" : [ "file://*",...]. I haven't found any solid documentation on this but so far I'm concluding that it only allows read privilege of any file but no write privilege. – risingtiger Oct 24 '13 at 22:22
0

It might be worth your time to explore the File-System API.

The files generated are stored in Chrome app-data. You cannot write to files elsewhere on the file-system. However, perhaps a script to grab the files in app-data and pull to another directory ran after generation might suffice?

This is currently only available in a handful of browsers, Chrome is definitely included.

Arthur Weborg
  • 8,280
  • 5
  • 30
  • 67