Uploads can be hard, even with Ember

A few weeks ago we decided to build a simple application to showcase what we consider to be a good workflow for uploading files that need some processing.

We were quite surprised that the most popular StackOverflow answer for handling uploads with Ember Data is to serialize them inside the model as a Base64 string. While this approach might be okay for small payloads, it falls on it’s face as soon as you want to upload something large. We wanted to actually solve the problem and utilize the potential of XMLHttpRequest2.

Our experience building apps shows that most times your app handles uploads you want to do something with them, most time you need to do some processing, almost all the times you want to store them in a safe place for backup.

Based on these assumptions our proposed solution involves a 3rd party storage service (S3 in our example), a webserver and a background processing system (we used Rails and Sidekiq) and a websocket implementation (we used Pusher). Most of these technologies (Ember included) can be swapped out with something else.

Check out the Demo App

Fork it on GitHub

Give the demo a try to see the experience your users can get with this kind of approach. We think there’s really no excuse to provide anything less than this level of UX.

This approach is useful for any operation that requires out-of-band processing, like payments and report generation.

Slides from our talk at Toronto Ember