File upload with Ember data

Question

Can someone provide code examples or documentation on implementing a form with a file field using EmberJS and Ember Data?

I'm familiar with Ember Data already but I'm not sure how to implement file-uploads correctly.

if you have to support anything lower than IE10, as of right now, all of the answers below will not work. Prior to IE10, you'd have to create a form and a hidden iframe for it to target and upload your file separate from the rest of your data if you wanted to do anything asynchronous. FileReader and FormData are not supported in IE9. Plainly put, unless you're really restricting your usership to "modern" browsers, these answers are inadequate. — Ben Lesh

Toran Billups Toran Billups · Accepted Answer · 2012-11-30T21:23:01

Here is part of an ember-data adapter I wrote to do file uploads (same server -not cross domain)

DS.DjangoRESTAdapter = DS.RESTAdapter.extend({
        bulkCommit: false,

        createRecord: function(store, type, record) {
            var root = this.rootForType(type), json = {};

            var data = new FormData();
            data.append('username', record.get('username'));
            data.append('attachment', record.get('attachment'));

            this.django_file_ajax('http://localhost:8000/people/new/', "POST", {
                data: data,
                context: this,
                success: function(pre_json) {
                    json[root] = pre_json;
                    this.didCreateRecord(store, type, record, json);
                }
            });
        },

        django_file_ajax: function(url, type, hash) {
            hash.url = url;
            hash.type = type;
            hash.contentType = false;
            hash.processData = false;
            hash.context = this;

            jQuery.ajax(hash);
        }

    });

})();

It's not IE8 friendly as is because I'm using the "FormData" helper to do multipart file upload but it's a good proof of concept.

Here is the ember-data model to go w/ the above adapter

PersonApp.Person = DS.Model.extend({
  id: DS.attr('number'),
  username: DS.attr('string'),
  attachment: DS.attr('string')
});

Here is the handlebars template

<script type="text/x-handlebars" data-template-name="person">
{{view PersonApp.UploadFileView name="logo_image" contentBinding="content"}}
</script>

Here is the custom ember view

PersonApp.PersonView = Ember.View.extend({
  templateName: 'person'
});

PersonApp.UploadFileView = Ember.TextField.extend({
    type: 'file',
    attributeBindings: ['name'],
    change: function(evt) {
      var self = this;
      var input = evt.target;
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        var that = this;
        reader.onload = function(e) {
          var fileToUpload = e.srcElement.result;
          var person = PersonApp.Person.createRecord({ username: 'heyo', attachment: fileToUpload });
          self.get('controller.target').get('store').commit();
        }
        reader.readAsDataURL(input.files[0]);
      }
    }
});

If you want to see a full blown spike with this in action checkout a multi file upload example I did recently.

https://github.com/toranb/ember-file-upload

File upload with Ember data

4 Answers