display progress bar while photo is uploading in modal upload.

2 files changed, 28 insertions, 26 deletions

diff --git a/app/assets/javascripts/backbone/templates/photos/new-modal.jst.ejs b/app/assets/javascripts/backbone/templates/photos/new-modal.jst.ejs
index c728331f..329e988b 100644
--- a/app/assets/javascripts/backbone/templates/photos/new-modal.jst.ejs
+++ b/app/assets/javascripts/backbone/templates/photos/new-modal.jst.ejs
@@ -9,6 +9,11 @@
     </span>
     <img id="preview-image" src="#" alt="your image" class="hide" />
   </form>
+  <% if (uploading()) { %>
+  <div class="progress progress-striped active">
+    <div class="bar" style="width: <%= percentComplete %>%;"></div>
+  </div>
+  <% } %>
 </div>
 <div class="modal-footer">
   <a href="#" class="btn" data-dismiss="modal">Close</a>
diff --git a/app/assets/javascripts/backbone/views/photos/new_modal_view.js.coffee b/app/assets/javascripts/backbone/views/photos/new_modal_view.js.coffee
index df35450b..dd54736b 100644
--- a/app/assets/javascripts/backbone/views/photos/new_modal_view.js.coffee
+++ b/app/assets/javascripts/backbone/views/photos/new_modal_view.js.coffee
@@ -1,55 +1,52 @@
 CakeSide.Views.Photos ||= {}
 
-class CakeSide.Views.Photos.NewModalView extends Backbone.View
+class CakeSide.Views.Photos.NewModalView extends Marionette.ItemView
   template: JST["backbone/templates/photos/new-modal"]
+  ui:
+    upload_button: "#upload-photo-button"
+
+  modelEvents:
+    'progress': 'displayProgress'
 
   events:
     "click #upload-photo-button": "save"
     "change #photo-attachment": "displayPreview"
 
+  templateHelpers:
+    uploading: ->
+      typeof(@percentComplete) != "undefined"
+
+
   constructor: (options) ->
     super(options)
     @collection = CakeSide.Application.request('PhotosRepository', options.cake.id)
     @cake = options.cake
     @model = new @collection.model(cake_id: @cake.id)
-
-    @model.bind("change:errors", () =>
-      this.render()
-    )
+    @model.set('percentComplete', 20)
 
   save: (e) ->
     e.preventDefault()
     e.stopPropagation()
-
-    @model.unset("errors")
-
-    fileObject = @$(':input[type="file"]')[0].files[0]
-    @model.set('image', fileObject)
-    @model.on('progress', @displayProgress)
-    @collection.create(@model.toJSON(),
-      success: (photo) =>
-        @model = photo
-        $('#modal').modal('hide')
-
-      error: (photo, jqXHR) =>
-        @model.set({errors: $.parseJSON(jqXHR.responseText)})
-    )
-
-  render: ->
-    $(@el).html(@template(@model.toJSON()))
-    this.$("form").backboneLink(@model)
-    return this
+    @ui.upload_button.attr('disabled', 'disabled')
+    @collection.create(@model, success: @photoUploaded)
 
   displayPreview: (event) ->
     input = event.currentTarget
     if (input.files && input.files[0])
+      file = input.files[0]
       reader = new FileReader()
       reader.onload = (e) ->
         $('#preview-image').attr('src', e.target.result)
         $('#preview-image').removeClass('hide')
-      reader.readAsDataURL(input.files[0])
+      reader.readAsDataURL(file)
+      @model.set('image', file)
     else
       $('#preview-image').addClass('hide')
 
-  displayProgress: (event) ->
+  displayProgress: (percentComplete) ->
     CakeSide.Application.vent.trigger('uploading', event)
+    @model.set('percentComplete', percentComplete*100)
+    @render()
+
+  photoUploaded: (photo) ->
+    $('#modal').modal('hide')