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.