This is the first draft of this effort. Still contemplating writing a custom ExtJS control that can be plugged into any application.

For a while, I’ve been frustrated with the slow pace of integration of HTML5 features into the ExtJS framework (which, don’t get me wrong, I still consider the premier web application framework available today). Lately, I’ve been working on some mini-apps on our big data platform that will allow user to upload documents for use in NLP model building and knowledge base population.

Simply put, ExtJS doesn’t have anything in the framework to leverage the HTML5 File API or XmlHttpRequest, which introduces the FormData object (awesome!).

After reading the tutorials, and seeing how easy this was to implement, I quickly wrote my own handlers and containers for letting users upload multiple files easily with XmlHttpRequest, and no longer be handcuffed by the standard ExtJS form model.

Here’s a window that allows a user to drag & drop files from their file system directly into the browser drop zone, or use the traditional method of clicking a button and selecting files. I’m using Amazon S3 buckets to allow users to store any number of arbitrary files they need for a particular task in our application.

And just to make it look good, here’s the CSS to style the drop zone container.

#drop_zone {
    border: 2px dashed #BBB;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    padding: 15px 25px;
    text-align: center;
    font: 20pt bold 'Vollkorn';
    color: #BBB;
    margin: 1px;
    background-color: #FFFAE9;
}

And here’s the function from DatasetAPI that does the heavy lifting.

/**
 *  XHR upload of documents to a dataset
 */
uploadDocuments : function (datasetId, files) {
    var URI, 
        formData = new FormData(),
        xhr = new XMLHttpRequest();
 
    // Append each file to the FormData() object
    for (var i = 0; i < files.length; i++) {
        formData.append('file', files[i]);
    }
 
 
    // Define the URI and method to which we are sending the files
    URI = {insert your URI endpoint here}
    xhr.open('POST', URI);
 
    // Define any actions to take once the upload is complete
    xhr.onloadend = function (evt) {
        console.log(evt.target);
 
        // Close the upload message box
        uploadMessage.destroy();
 
        // Show a message containing the result of the upload
        if (evt.target.status === 200) {
            // Tell the user somehow that the upload succeeded
        } else {
            // Tell the user somehow that the upload failed
        }
    };
 
    // Start the upload process
    xhr.send(formData);
}

So now I have forms that let users choose one, of two, easy ways to select large sets of files on their systems and upload them to S3 buckets for use in they particular field of study.

Next up?

WebSockets to provide real-time status updates on things like model building, knowledge base building, and predictions on documents. Fun stuff…