[WebODF] Server-side save and load example

[Rui Rosado]

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

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://open.nlnet.nl/pipermail/webodf/attachments/20150414/c9c7ec04/attachment.html>