File Operations Demo

This demo shows various ways to open and save a graph as GraphML.

Things to Try

Edit the graph and save it in GraphML format in one of the available ways.
Open a previously saved GraphML.

Buttons of features that are not supported by the current browser are disabled.

Open

Most open commands show a file chooser dialog. This is implemented using a hidden file input HTML element.

File (FileReader)

Open a file using the HTML5 FileReader API. This technique provides a natural file open experience on all modern browsers. For IE 9, the FileSystem Object is a good workaround.

Server

Open a file via a dedicated server. This submits a form containing the file content to the server which returns an HTML document with the file's content. To keep this demo open in the current window, the response is targeted to an invisible iframe. See Server Operations for details on enabling server requests.

LocalStorage

Open the last graph that was saved using the HTML5 Storage feature.

Save

Download

Download the graph using the HTML5 File API or the IE-specific msSaveOrOpenBlob function. This provides a natural file download experience in IE 10+, Firefox 28+, Chrome 38+, Opera 25+, recent versions of the related mobile browsers and Android Browser 4.4.4. It doesn't work in Safari (neither Mac OS X nor iOS).

New Tab

Show the GraphML content in a new browser window.

Server

Download to a file via a dedicated server. The GraphML content is submitted to the server which responds with a download URL for the respective file. The handling of the download then depends on the user's browser settings. See Server Operations for details on enabling server requests.

Local Storage

Save the graph using the HTML5 Storage feature.

Server Operations

To enable the open/save via server operations, a server that supports the file load/save requests of this demo has to be running. You can run the Node.js Express Demo Server or the sample Java web application contained in the server-backend directory of this demo to enable the server-based file operations.

Server API

This demo uses the following server requests:

http://localhost:4242/file/isAlive: GET request to check whether a file load/save server is running (used to enable the corresponding actions if an "OK" (200) response code is received).
http://localhost:4242/file/load: POST request to upload a file from the filesystem and send the file contents to the client.
http://localhost:4242/file/save: POST request to send the current graph to the server and download it as a GraphML file.