Writing File to Desktop Using HTML5 Filesystem API

Writing file to desktop using HTML5 FileSystem API

Unfortunately, writing to regular files is not currently possible (despite the accepted answer Modifying Local Files Using HTML5 and JavaScript).

You can only write to the sandboxed filesystem.

FYI, you can do this in a Chrome Packaged App: http://developer.chrome.com/apps/fileSystem.html But even then the user must at least choose the file first. Writing to any file would be a serious security hole.

What problem are you really trying to solve?

HTML5 offline storage. File storage? Directories and filesystem API

At last, I've found it! Here's the answer:

I’ll have the DOMFileSystem with a side of read/write access please wrote:

Eric Uhrhane of Google has been
working on the working draft of the
File API: Directories and System specification which defines a set of
APIs to create a sandboxed filesystem
where a web app can read and write
data to.

Wow! I'm so excited!

HTML5 Filesystems API - Letting Users Save Files to Their Actual Filesystem

You can use the URL obtained from the toURL method as the value for a link's href attribute, which link in addition has a download attribute. Clicking on the link will then prompt the user to save the contents on her filesystem.

Is the FileAPI dead?

Update May 2021: There's a new effort to enable some form of file system access in browsers, the File System Access API. As of this writing it's only supported by Chromium-based browsers (including the Chromium-based Microsoft Edge). Mozilla's position (for Firefox) is "wait and see." I haven't found a position from Apple (for Safari and iOS Safari)

---

The File API is distinct from the File API - Directories and System.

The File API itself is not only not dead, but reasonably well-supported. (IE8 being the only significant [and happily receding] desktop browser without support.)

The Directories and System document...

...defines an API to navigate file system hierarchies, and defines a means by which a user agent may expose sandboxed sections of a user's local filesystem to web applications. It builds on File API, which in turn built on File API: Writer, each adding a different kind of functionality.

Apparently there were issues with it and so that effort is being abandoned, probably in favor of doing something else.

---

...I can't seem to grasp how can browsers implement a feature and then suddenly realise they no longer want to support it

You may find this thread interesting. Basically, only Chrome ever had it. Mozilla, Apple, and Microsoft (and others) didn't want to implement it. E.g., it's not that Google decided they they didn't want it anymore, but that they never convinced the other vendors it was worth implementing. A web standard only implemented by one vendor isn't a web standard. The final nail was announced here.

HTML5 FileSystem API Android Chrome access to sdcard

From this article on HTML5 Rocks:

It's important to remember that this file system is sandboxed, meaning one web app cannot access another app's files. This also means you cannot read/write files to an arbitrary folder on the user's hard drive (for example My Pictures, My Documents, etc.).

The FileSystem API was designed to allow your app to create and manipulate files which will persist between usages of your application. It cannot be used to expose arbitrary files from outside of it's sandbox.

Alternatively, the File API can be used to read, though not modify, files from the entire system. However, File API cannot be used to read arbitrary files on the system. It's usage is based on HTMLs <input type=file> tag, where the user must explicitly input the File to be read.

The above applies to an app running in Android Chrome the same as it does to Desktop Chrome, so you're out of luck unless the user is willing to use the input to grant access to the files you desire. However, you mentioned you also attempted a PoC using PhoneGap. The PhoneGap File API, though mostly acting as a wrapper around the HTML5 implementation, has some subtle differences, mainly in that it does allow for access to arbitrary files on the SD card. When using the API call window.requestFileSystem(), your success callback will have one argument, a FileSystem object, where the root property is a reference to the /sdcard folder. This can be used to traverse your sdcard and create FileReaders and FileWriters anywhere within.

Using Native File System API to save file to a specific location without user interaction?

This can't be done with the File System Access API, but ironically automatically triggered downloads are still a thing with the <a download> approach.

const a = document.createElement('a');
// undefined
a.download = 'example.txt';
// "example.txt"
a.href = URL.createObjectURL(new Blob(['yolo'], {type : 'text/plain'}));
// "blob:https://example.com/8d494f54-499d-4f32-bdb4-ff047e8c60af"
a.click();
// undefined

// Downloads a file `example.txt` to your Downloads folder

Using HTML5/JavaScript to generate and save a file

OK, creating a data:URI definitely does the trick for me, thanks to Matthew and Dennkster pointing that option out! Here is basically how I do it:

1) get all the content into a string called "content" (e.g. by creating it there initially or by reading innerHTML of the tag of an already built page).

2) Build the data URI:

uriContent = "data:application/octet-stream," + encodeURIComponent(content);

There will be length limitations depending on browser type etc., but e.g. Firefox 3.6.12 works until at least 256k. Encoding in Base64 instead using encodeURIComponent might make things more efficient, but for me that was ok.

3) open a new window and "redirect" it to this URI prompts for a download location of my JavaScript generated page:

newWindow = window.open(uriContent, 'neuesDokument');

That's it.

---

Related Topics