The online journey of a technophile, by Steve Brownlee
ExtJS 4: Using HTML5 FormData and XmlHttpRequest for uploads
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.
And here’s the function from DatasetAPI that does the heavy lifting.
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.
WebSockets to provide real-time status updates on things like model building, knowledge base building, and predictions on documents. Fun stuff…
I am a technologist, and have been ever since 1980 when I got my very first TRS-80 and programmed it to do my math homework. I love to share the gift of technology with others and show them the wonderful things it can do for them, and how they should not fear it, but embrace it.