Implement rough UI for uploading avatars

ember/app/components/user/avatar-editor.js

@@ -0,0 +1,45 @@
+import Ember from 'ember';
+
+import config from 'flarum/config/environment';
+
+var $ = Ember.$;
+
+export default Ember.Component.extend({
+  layoutName: 'components/user/avatar-editor',
+  classNames: ['avatar-editor', 'dropdown'],
+  classNameBindings: ['loading'],
+
+  click: function(e) {
+    if (! this.get('user.avatarUrl')) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.send('upload');
+    }
+  },
+
+  actions: {
+    upload: function() {
+      if (this.get('loading')) { return; }
+
+      var $input = $('<input type="file">');
+      var userId = this.get('user.id');
+      var component = this;
+      $input.appendTo('body').hide().click().on('change', function() {
+        var formData = new FormData();
+        formData.append('avatar', $(this)[0].files[0]);
+        component.set('loading', true);
+        $.ajax({
+          type: 'POST',
+          url: config.apiURL+'/users/'+userId+'/avatar',
+          data: formData,
+          cache: false,
+          contentType: false,
+          processData: false,
+          complete: function() {
+            component.set('loading', false);
+          }
+        });
+      });
+    }
+  }
+});