Integrating Plupload into a Backbone View to handle file uploads.
When building web applications, we like to create an interface that is void of unnecessary loads, resulting in a much better user experience. For us to be able to accomplish this, we need to write our interface primarily in Javascript. To help us with this task, we rely on Backbone JS.
From Wikipedia.
Backbone.js is a JavaScript library with a RESTful JSON interface and is based on the model–view–presenter (MVP) application design paradigm. Backbone is known for being lightweight, as its only dependency is on one JavaScript library,[2]Underscore.js.
However, there are times when there is a particular functionality we require that isn’t built in and there aren’t any third party solutions available that match all of our needs.
For example, a requirement recently came up in one of our Backbone applications were we needed to integrate some sort of file upload. We’ve had experience using Plupload in the past, and found it to be very versatile, therefore we wanted it to be part of our solution.
A quick search in Google came up with a couple valid options, however, none of them used Plupload. Naturally, we fell to writing our own and figured we’d share it.
Our implementation is fairly specific to our use case in that we use require.js to load our dependencies, we use Handlebars for our templates, our template uses Bootstrap styles, and we’re using Backbone Marionnette instead of just Backbone. However, what we’ve written should be easily adaptable to whatever environment is being used.
Requirements
Plupload – http://www.plupload.com/
The View and Template
Can be found at the following Gist – https://gist.github.com/nedga055/8057490.
Example Usage
this.fileUploadView = new FileUploadView({
el: ‘#upload-container’,
url: ‘upload.php’,
successMessage: 'Your file uploaded successfully.'
});
this.fileUploadView.render();