Implementing single-page web applications that work on all browsers remains a challenge. For the basic task of uploading files, you still need some sort of polyfill or library that adds support for older browsers (read IE 8 and 9, which are still in wide use).

In this tutorial I’m going to describe how to integrate one such library, called mOxie, with one client-side MVC framework, called Ember.js.

0. Getting the mOxie library

I’m going to assume you already have an Ember app going, so the first step is acquiring the mOxie files. You can either use the pre-built files or compile your own. For example, we won’t need XHR2 support in this tutorial, so we can leave it out.

1. Defining the template

The next thing we have to do is write the Handlebars template that will contain all the UI elements we need:

{{#each errors}}
<div class="error">Could not upload {{file}}: {{reason}}</div>
{{/each}}
{{#if uploading}}
<p>Uploaded {{completed}} / {{attachments.length}} files.
{{else}}
<ul class="attachments">
{{#each attachments}}
<li>
<button title="Remove file" {{action 'removeFile' this}}>x</button>
{{name}}
</li>
{{/each}}
</ul>
{{#view App.FilePicker}}
<p>
<button>Select files to upload</button>
</p>
{{/view}}
<p><button {{action 'submit'}}>Upload</button></p>
{{/if}}
view raw template.hbs hosted with ❤ by GitHub

The UI has several components:

  • error and progress notifications
  • the list of selected files
  • the button for selecting more files
  • the button for initiating the upload

2. Initializing the file picker

In the template above we placed the button inside a view. We can use that view to convert the <button> into a file picker:

App.FilePicker = Ember.View.extend({
didInsertElement: function() {
var self = this;
var fileInput = new mOxie.FileInput({
browse_button: this.$('button').get(0),
multiple: true
});
fileInput.onchange = function(e) {
self.get('controller').send('addFiles', fileInput.files);
};
fileInput.init();
}
});
view raw view.js hosted with ❤ by GitHub

Here we create a mOxie.FileInput instance once the template containing the button is rendered.

3. Adding/removing files

The view we defined in the previous step will send events up to the controller, which has to respond to them:

App.IndexController = Ember.ObjectController.extend({
errors: [],
uploading: false,
completed: 0,
attachments: [],
actions: {
'addFiles': function(files) {
var attachments = this.get('attachments');
files.forEach(function(file) {
if (!attachments.findBy('name', file.name)) {
attachments.pushObject(file);
}
});
},
'removeFile': function(file) {
var attachments = this.get('attachments');
this.set('attachments', attachments.rejectBy('name', file.name));
},
view raw controller-1.js hosted with ❤ by GitHub

The neat thing about Ember.js is that it will automatically re-render the template whenever the attachments property is modified.

4. Uploading the files

Finally, when the user wants to submit the form, we have to actually send the files to the server:

'submit': function() {
var self = this;
var errors = [];
var attachments = self.get('attachments');
if (Ember.isEmpty(attachments)) {
alert('You need to select some files to upload first.');
return;
}
self.set('uploading', true);
var promises = attachments.map(function(file) {
return loadAttachment(file)
.then(function(data) {
return uploadAttachment(file, data);
})
.then(function success() {
self.incrementProperty('completed');
}, function error(error) {
errors.push({ file: file.name, reason: error });
});
});
Ember.RSVP.all(promises).then(function() {
if (errors.length) {
self.set('errors', errors);
}
self.set('uploading', false);
self.set('attachments', []);
});
}
}
});
view raw controller-2.js hosted with ❤ by GitHub

We start uploading all the files concurrently. When one is done, we increment a counter. When all of them are done, we clear the queue. Did I mention promises are great?

And here are the helper functions used in the controller above:

/**
* Load an attachment into memory.
*
* @param Blob file - The file to load
* @return RSVP.Promise - Resolves with the binary data for the file
*/
function loadAttachment(file) {
return new Ember.RSVP.Promise(function(resolve, reject) {
var reader = new mOxie.FileReader();
reader.onloadend = function() {
resolve(reader.result);
};
reader.onerror = function() {
reject(reader.error);
};
reader.readAsBinaryString(file);
});
}
/**
* Send a file to the server.
*
* @param Blob file - The file info
* @param String data - The binary file content
* @return RSVP.Promise - Resolves when the upload is complete
*/
function uploadAttachment(file, data) {
return new Ember.RSVP.Promise(function(resolve, reject) {
var req = jQuery.post('/api/attachments', {
filename: file.name,
data: data
});
function successHandler(response) {
resolve(response);
}
function errorHandler(xhr) {
reject(xhr.responseText);
}
req.then(successHandler, errorHandler);
});
}
view raw helpers.js hosted with ❤ by GitHub

I wrapped both the mOxie.FileReader process and the AJAX request in RSVP promises so that chaining and utility methods such as .catch() always work as expected.

Demo

I’ve set up a quick demo so that you can see it in action.

This is just a starting point, of course. You can add all sorts of usability enhancements, such as progress bars, image previews etc. Happy hacking!