1

I am being asked to do something a bit unnatural with JS.

Basically, I need to save files persistently in a manner that allows users to modify them in the local file system.

I see that HTML5 specifies a FileWriter API which seems partially suited for this. Unfortunately, users have IE -- http://caniuse.com/filesystem -- so the closest thing seems to be msSaveBlob.

Does msSaveBlob support arbitrary file paths? Ideally, I'd like to save those files in the user "Documents" folder. If not, how does this sandboxed filesystem work? Where is it? Does it preserve the original file characteristics (or does BLOB imply some type of block storage)?

NOTE - I am aware that there is a "save as" option with regular links, but I need to know where the user ended up saving the file.

Alternatively, do you know a better way to save which would let me use arbitrary paths? I am not opposed to a Flash or Silverlight solution as long as it comes with a JS wrapper.

Frederic Fortier
  • 750
  • 8
  • 21

1 Answers1

1

The FileSystem API is currently supported only by Google Chrome and Opera. This API can be used to create, read, write and delete files and directories, but only in an isolated part of the file system. I show a detailed example here (pls. see the 2nd part of the answer).

Regarding navigator.msSaveBlob, here is an example on MSDN. This function displays the notification bar with the "Save" and "Save As" buttons. By clicking on the latter, the user can select an arbitrary location to save the file.

If you use navigator.msSaveOrOpenBlob then the user will also get an "Open" button. If the user clicks on this one, then the file will be opened. In the MSDN example I mentioned above, a text file is created from a JavaScript string, which will be opened in Notepad.

The usual way to make a file on your server savable to an arbitrary place on the client machine is to create a link. The user can click on the link, or choose "Save link as..." from the popup menu. If you want to save a blob created in JavaScript, then you can try using the download attribute of the <a> tag, I show an example here. This technique works in IE10+.

Community
  • 1
  • 1
kol
  • 27,881
  • 12
  • 83
  • 120
  • "This function displays the notification bar with the "Save" and "Save As" buttons. By clicking on the latter, the user can select an arbitrary location to save the file." - Can I specify a callback in navigator.msSaveBlob to get the path selected by the user? This all looks perfect if I can know where the user ultimately saved the file. I am aware of how to create a link, but it does not tell me where the file got downloaded. – Frederic Fortier Apr 09 '14 at 19:55
  • I don't think you can. There is no callback argument and "true is returned as long as the notification bar is displayed" (MSDN), which means that this function does not follow the events after the notification bar is displayed. – kol Apr 09 '14 at 19:58
  • Ok thanks. This no more useful to me than a regular link then. – Frederic Fortier Apr 09 '14 at 20:01
  • I agree. Anyway, if your users must use IE, then you should consider using Silverlight or XBAP. A fully trusted XBAP can really do anything on the client machine. These are excellent solutions especially for web apps used inside a company intranet. – kol Apr 09 '14 at 20:05
  • The app has a larger scope than just this one use case / group of users. It must be HTML5/JS, not some WPF type app. Do you know if I can write some type of Silverlight/XBAP plug-in that I can interface with from my existing JS codebase? I am not familiar with those platforms so any article that would help me research further would be helpful. – Frederic Fortier Apr 09 '14 at 20:21