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.