HTML 5 Clipboard and File APIs

One of the most common questions I receive about TableTools is if it is possible to remove the Flash dependency. Until recently, the answer has been no, but now there might be light at the end of the tunnel due to new APIs proposed by the W3C.

TableTools uses Flash for two purposes:

• Copy to clipboard
• Save data to local file

Currently there is no API implemented in the various browsers that will provide the functionality we need in TableTools to provide these two basic abilities without Flash. However, APIs that will perform these tasks are in development at the W3C and will hopefully trickle down to the browsers before too long.

A word of warning before we continue - this post was written based on the information in specification documents that are Editor's Draft and Working Draft status, as defined by the W3C. It is possible that the specifications might change in future.

Clipboard API

The first API of interest to us is the Clipboard API. The current specification primarily focuses upon the events copy, cut and paste with the ability to listen for these events through a well defined API - the ClipboardEvent objects.

The latest editors draft adds the ability to create these events - termed synthetic events, thanks to a bug filed by James Greene of the ZeroClipboard project which TableTools currently uses.

With these synthetic events, we have the ability to create a new ClipboardEvent object and trigger it like any other DOM event. These clipboard events are termed semi-trusted so your browser will ask you if you want to allow the domain to use clipboard operations, in much the same way pages might currently ask you if you will allow them to use your location for the GeoLocation APIs.

As an example of the proposed API, TableTools would be able to use the following to copy table information, in a CSV format to the clipboard:

$(button).on( 'click', function (e) {
    var data = table
        .data()
        .map( function (row) {
            return row.join(',');
        } )
        .join( '\n' );

    var clip = new ClipboardEvent( 'copy' );
    clip.clipboardData.setData( 'text/plain', data );
    clip.preventDefault();

    e.target.dispatchEvent( clip );
} );

This is of course a simplified case, as it doesn't provide many of the configuration options TableTools provides, but it shows how simple it will be for us to make use of this excellent new API.

File API

The ability to be able to create files, on demand, in Javascript, is the cornerstone of the second new API that we are interested in for TableTools - the File Writer API.

There are already a few methods to be able to create and save files in HTML including using the data:// pseudo protocol, but these have limitations such as not working in old browsers, not always being able to name the file and none with the succinct and easy to use syntax of the Flash FileReference API. The new File Writer API, however, will provide exactly this for us in Javascript.

At the time of writing the File Writer API defines a saveAs global function (I would suggest that this is likely to change before the specification is finalised due to the likelihood of introducing a name clash) which simply takes a Blob and the file name to save the data from the blob as.

Returning to our example of saving CSV data from a table again, to save to a local file the code is now:

$(button).on( 'click', function (e) {
    var data = table
        .data()
        .map( function (row) {
            return row.join(',');
        } )
        .join( '\n' );

    saveAs(
        new Blob( [data], {type : 'text/csv'},
        'My file.csv'
    );
} );

Although still a working draft, the File Writer API is a bit more progressed that the Clipboard API, and Microsoft already have an implementation in IE10+. Other browsers don't yet have this ability, but shim layers such as FileSaver from Eli Grey provide this capability in many browsers.

Conclusion

It has long been frustrating in a web-development world that has turned its back on Flash so completely, to have to reply upon Flash to be able to do simple tasks such as copy-to-clipboard and save-to-file in TableTools. However, with these two specifications moving forward at the W3C, and the hope that the browser developers will implement them soon, the day when TableTools no longer requires Flash, might not be too far away.