Re: [WebODF] Server-side save and load example

14 Apr 2015

      Thank you, Wally, for providing us with a hands-on guide for uploading 
in WebODF.
I implemented your approach using a JAX-RS web-service (on an Apache 
Tomee JEE server) instead of your 'save.php' script, tweaking it here 
and there a little bit.
All is working great.
Thanks also to the WebODF community for providing these fine tools.

I can provide the web-service implementation, if anyone would need that. 
This being my 2-cents contribution to the project.

Cheers,
Rui Rosado

Wally schreef op 11-7-2014 om 20:15:
...
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):

// 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 mailing list
WebODF@nlnet.nl
https://open.nlnet.nl/mailman/listinfo/webodf