Building an HTML5 Text Editor with the FileSystem APIs

// Save a file in the FileSystem.
function saveFile(filename, content) {
  filesystem.root.getFile(filename, {create: true}, function(fileEntry) {

    fileEntry.createWriter(function(fileWriter) {

      fileWriter.onwriteend = function(e) {
        // Update the file browser.

        // Clean out the form field.
        filenameInput.value = '';
        contentTextArea.value = '';

        // Show a saved message.
        messageBox.innerHTML = 'File saved!';

      fileWriter.onerror = function(e) {
        console.log('Write error: ' + e.toString());
        alert('An error occurred and your file could not be saved!');

      var contentBlob = new Blob([content], {type: 'text/plain'});


    }, errorHandler);

  }, errorHandler);

Great writeup on how to use Javascript’s Filesystem API

Building an HTML5 Text Editor with the FileSystem APIs →

Html5 File Upload with Progress

Html5 finally solves an age old problem of being able to upload files while also showing the upload progress. However it is fairly complicated and not for the faint of heart because you are essentially taking over the entire server side processing (when you tap into the byte stream) and that includes implementing the multipart/form-data protocol on the server side, along with a bunch of other things.

Html5 File Upload with Progress →