[WebODF] Server-side save and load example

11 Jul 2014

      I have been working with WebODF and the Wodo editor for a few days and
thought I would give back some to the community for making such a great set
of tools and libraries.

The application I've been developing involves saving and loading ODF files
on a server and editing them in the browser and seeing as there are no good
examples of how to do this, I thought maybe this could work as an example
for others.

Note: This application is based off of the wodo editor project's
localeditor.html and related files.  I use jQuery to simplify stuff, but it
probably isn't necessary.

First we need to be able to load files from the server.  This is easy
enough as that is already built into the Wodo editor via
editor.openDocumentFromURL().
I get a list of files on the server and add onClick events to the links.

function refreshPanelContents() {
    // Request the HTML containing the list of files available.
    $.ajax({
        url: 'filelist.php',
        dataType: 'html',
        success: function(data) {
            // Update the panel with the new list of files.
            $('.panel').html(data);

            // Add onClick events to each file link.
            $('.fileOpen').click( function(){
                var filename = $(this).text();
                // We need this random number to stop file caching.
                var rand = Math.random().toString(36).substr(2);
                // All of the files are in the 'storage' folder for now...
                // this should probably call a server-side script to get
the file based on some encrypted data.
                var filepath = 'storage/' + filename + '?rand=' + rand;
                // loadedFilename is used during saving to know what file
to save to.
                loadedFilename = filename;
                // Clear the cache so we don't load old docs.
                runtime.clearCache();
                // Close the current document. Probably should check if the
document is unsaved first and ask the user what to do.
                editor.closeDocument(function() {
                    // Load the selected document.
                    editor.openDocumentFromUrl(filepath, null);
                });
            });
        }
    });
}

We now need to be able to save to the server.
Here I am using the save button in the Wodo toolbar to do a server-side
save instead of it downloading it on the client.

function save() {
    function saveByteArray(err, data) {
        if (err) {
            alert(err);
            return;
        }
        var filename = loadedFilename || "doc.odt";
        var mimetype = "application/vnd.oasis.opendocument.text";
        var blob = new Blob([data.buffer], {type: mimetype});
        // Ends up calling new FileSaver(blob, filename);
        saveAs(blob, filename);
    }

    editor.getDocumentAsByteArray(saveByteArray);
    refreshPanelContents();
}

Most of the example code from FileSaver.js is unchanged (it might go
unused, not sure).
Here is what the FileSaver constructor turned into:

var FileSaver = function(blob, filename) {
    // FormData lets us send a blob along with other metadata for saving.
    var fd = new FormData();
    fd.append('name', filename);
    fd.append('data', blob);

    // POST data to our save script.
    $.ajax({
        type: 'POST',
        url: 'save.php',
        data: fd,
        processData: false,
        contentType: false,
        success: function(data) {
            // Success!
            alert('Saved! ' + data);
        },
        error: function(data) {
            // Failure.
            alert('We got a big error here.\n' + JSON.stringify(data));
        }
    });
};

The save.php script will be application specific, but just for a
completeness, here is my partial implementation (minus error checking and
safety stuff):

<?php
$fileName = $_POST['name'];
// PHP now stores Blobs in this $_FILES variable.
$fileBlob = $_FILES['data'];
// The Blob has some data we need.
$tmpPath = $fileBlob['tmp_name'];
$fileSize = $fileBlob['size'];

// Read the temp file data.
$fp = fopen($tmpPath, 'r');
$content = fread($fp, $fileSize);
fclose($fp);

// Write data.
$dir = __DIR__ . DIRECTORY_SEPARATOR . 'storage';
$filePath = $dir . DIRECTORY_SEPARATOR . $fileName;
file_put_contents($filePath, $content);
?>

Hopefully that helps someone out there get started on a server-side
application to save and load documents.  Enjoy!
Disclaimer: This code is free to use and provided as is without any
guarantees or warranty. Use at your own risk, etc.

[WebODF] Server-side save and load example

Wally