6

I wanted to experiment creating a Javascript application that takes input from the user in a form and then generates a file based on the user's form input.

The file should then be downloadable by the user all without touching the server.

How do you create a file on the client side with JavaScript and where on the client side could it be stored so that it can be downloaded without being first created on the server?

Update: To be more specific as Graham answered, I was looking for way to create the file without necessarily touching the file system itself, but just creating a file object (a Blob) that could be downloaded by the user. Thanks Graham!

ZenBalance
  • 10,087
  • 14
  • 44
  • 44
  • 2
    Is there a specific browser and browser-version that you're targeting? (I ask because I think you'll need to use the `data:` URL protocol for this, and not all browser-versions support it.) – ruakh Mar 12 '13 at 00:02
  • You could always try to spray the heap :P – Travis J Mar 12 '13 at 00:02
  • 2
    possible duplicate of [Create a file in memory for user to download, not through server](http://stackoverflow.com/questions/3665115/create-a-file-in-memory-for-user-to-download-not-through-server) see also [Javascript: Create and save file](http://stackoverflow.com/questions/13405129/javascript-create-and-save-file) – Matt Ball Mar 12 '13 at 00:03
  • Those links are very helpful. Flash is not a viable solution and the other thread's solution doesn't work well across browsers. I found this: http://www.html5rocks.com/en/tutorials/file/filesystem/, but still not quite satisfying. – ZenBalance Mar 12 '13 at 00:11
  • I think it's not possible to achieve this by using client side. FileSystem is not officially a part of HTML5, it's used by Chrome only. – Shinigamae Mar 12 '13 at 02:33
  • 1
    It's not just supported by Chrome actually and many browser implement the Filesystem API. And, actually, it's an official w3 specification so, yes, it is part of "HTML5". – Graham Robertson Mar 12 '13 at 03:55

1 Answers1

17

One way to do this without having to use the filesystem is to create blobs. Let's say we have a bunch of data (in your case, from a form) and we wish to save it to a text "file". We could actually do something as follows:

var formBlob = new Blob([someStringVariable], { type: 'text/plain' });

From here, we could link a user to download this as an actual file like so:

someLink.href = window.URL.createObjectURL(formBlob);

If we wanted this data to persist, we could serialize our blob as a base64 string and save it to localStorage or any other persistent type of storage. Converting blobs to base64 is a bit beyond the scope of this answer but you can find a good reference/library here: http://blog.danguer.com/2011/10/24/base64-binary-decoding-in-javascript/

Graham Robertson
  • 808
  • 5
  • 10