Handle form submit via ajax and crop avatar on the client

1 files changed, 35 insertions, 8 deletions

diff --git a/app/assets/javascripts/profile.js.coffee b/app/assets/javascripts/profile.js.coffee
index 20f87440551..f81d7dd6e69 100644
--- a/app/assets/javascripts/profile.js.coffee
+++ b/app/assets/javascripts/profile.js.coffee
@@ -1,5 +1,9 @@
 class @Profile
-  constructor: ->
+  constructor: (opts = {}) ->
+    {
+      @form = $('.edit-user')
+    } = opts
+
     # Automatically submit the Preferences form when any of its radio buttons change
     $('.js-preferences-form').on 'change.preference', 'input[type=radio]', ->
       $(this).parents('form').submit()
@@ -17,14 +21,37 @@ class @Profile
     $('.update-notifications').on 'ajax:complete', ->
       $(this).find('.btn-save').enable()
 
-    $('.js-choose-user-avatar-button').bind "click", ->
-      form = $(this).closest("form")
-      form.find(".js-user-avatar-input").click()
+    @bindEvents()
+
+    @avatarGlCrop = $('.js-user-avatar-input').glCrop().data 'glcrop'
+
+  bindEvents: ->
+    @form.on 'submit', @onSubmitForm
+
+  onSubmitForm: (e) =>
+    e.preventDefault()
+    @saveForm()
+
+  saveForm: ->
+    self = @
+
+    formData = new FormData(@form[0])
+    formData.append('user[avatar]', @avatarGlCrop.getBlob(), 'avatar.png')
 
-    $('.js-user-avatar-input').bind "change", ->
-      form = $(this).closest("form")
-      filename = $(this).val().replace(/^.*[\\\/]/, '')
-      form.find(".js-avatar-filename").text(filename)
+    $.ajax
+      url: @form.attr('action')
+      type: @form.attr('method')
+      data: formData
+      dataType: "json"
+      processData: false
+      contentType: false
+      success: (response) ->
+        new Flash(response.message, 'notice')
+      error: (jqXHR) ->
+        new Flash(jqXHR.responseJSON.message, 'alert')
+      complete: ->
+        window.scrollTo 0, 0
+        self.form.find(':input[disabled]').enable()
 
 $ ->
   # Extract the SSH Key title from its comment