Merge pull request #614 from ZogStriP/implemented-cancel-image-upload

users can now cancel image upload

app/assets/javascripts/discourse/models/composer.js

@@ -248,7 +248,6 @@ Discourse.Composer = Discourse.Model.extend({
     if (opts.postId) {
       this.set('loading', true);
       Discourse.Post.load(opts.postId).then(function(result) {
-        console.log(result);
         composer.set('post', result);
         composer.set('loading', false);
       });

app/assets/javascripts/discourse/templates/composer.js.handlebars

@@ -53,7 +53,7 @@
                <div class='saving-draft'></div>
                {{#if view.loadingImage}}
                 <div id="image-uploading">
-                  {{i18n image_selector.uploading_image}} {{view.uploadProgress}}% <a {{action cancelUpload target="view"}}>{{i18n cancel}}</a>
+                  {{i18n image_selector.uploading_image}} {{view.uploadProgress}}% <a id="cancel-image-upload">{{i18n cancel}}</a>
                 </div>
               {{/if}}
             {{/if}}

app/assets/javascripts/discourse/views/composer_view.js

@@ -158,10 +158,6 @@ Discourse.ComposerView = Discourse.View.extend({
     });
   }, 100),
 
-  cancelUpload: function() {
-    // TODO
-  },
-
   initEditor: function() {
     // not quite right, need a callback to pass in, meaning this gets called once,
     // but if you start replying to another topic it will get the avatars wrong
@@ -281,7 +277,6 @@ Discourse.ComposerView = Discourse.View.extend({
     });
 
     var addImages = function (e, data) {
-      console.log('addImages');
       // can only upload one image at a time
       if (data.files.length > 1) {
         bootbox.alert(Em.String.i18n('post.errors.upload_too_many_images'));
@@ -311,6 +306,23 @@ Discourse.ComposerView = Discourse.View.extend({
     // drop
     $uploadTarget.on('fileuploaddrop', addImages);
 
+    // send
+    $uploadTarget.on('fileuploadsend', function (e, data) {
+      // cf. https://github.com/blueimp/jQuery-File-Upload/wiki/API#how-to-cancel-an-upload
+      var jqXHR = data.xhr();
+      // need to wait for the link to show up in the DOM
+      Em.run.next(function() {
+        // bind on the click event on the cancel link
+        $('#cancel-image-upload').on('click', function() {
+          // cancel the upload
+          // NOTE: this will trigger a 'fileuploadfail' event with status = 0
+          if (jqXHR) jqXHR.abort();
+          // unbind
+          $(this).off('click');
+        });
+      });
+    });
+
     // progress all
     $uploadTarget.on('fileuploadprogressall', function (e, data) {
       var progress = parseInt(data.loaded / data.total * 100, 10);
@@ -327,20 +339,27 @@ Discourse.ComposerView = Discourse.View.extend({
 
     // fail
     $uploadTarget.on('fileuploadfail', function (e, data) {
+      // hide upload status
       _this.set('loadingImage', false);
-      // 413 == entity too large, returned usually from nginx
-      if(data.jqXHR && data.jqXHR.status === 413) {
-        bootbox.alert(Em.String.i18n('post.errors.upload_too_large', {max_size_kb: Discourse.SiteSettings.max_upload_size_kb}));
-      } else {
-        bootbox.alert(Em.String.i18n('post.errors.upload'));
+      // deal with meaningful errors first
+      if (data.jqXHR) {
+        switch (data.jqXHR.status) {
+          // 0 == cancel from the user
+          case 0: return;
+          // 413 == entity too large, returned usually from nginx
+          case 413:
+            bootbox.alert(Em.String.i18n('post.errors.upload_too_large', {max_size_kb: Discourse.SiteSettings.max_upload_size_kb}));
+            return;
+        }
       }
+      // otherwise, display a generic error message
+      bootbox.alert(Em.String.i18n('post.errors.upload'));
     });
 
     // I hate to use Em.run.later, but I don't think there's a way of waiting for a CSS transition
     // to finish.
     return Em.run.later(jQuery, (function() {
-      var replyTitle;
-      replyTitle = $('#reply-title');
+      var replyTitle = $('#reply-title');
       _this.resize();
       if (replyTitle.length) {
         return replyTitle.putCursorAtEnd();
@@ -351,11 +370,9 @@ Discourse.ComposerView = Discourse.View.extend({
   },
 
   addMarkdown: function(text) {
-    var caretPosition, ctrl, current,
-      _this = this;
-    ctrl = $('#wmd-input').get(0);
-    caretPosition = Discourse.Utilities.caretPosition(ctrl);
-    current = this.get('content.reply');
+    var ctrl = $('#wmd-input').get(0),
+        caretPosition = Discourse.Utilities.caretPosition(ctrl),
+        current = this.get('content.reply');
     this.set('content.reply', current.substring(0, caretPosition) + text + current.substring(caretPosition, current.length));
     return Em.run.next(function() {
       return Discourse.Utilities.setCaretPosition(ctrl, caretPosition + text.length);
@@ -364,11 +381,9 @@ Discourse.ComposerView = Discourse.View.extend({
 
   // Uses javascript to get the image sizes from the preview, if present
   imageSizes: function() {
-    var result;
-    result = {};
+    var result = {};
     $('#wmd-preview img').each(function(i, e) {
-      var $img;
-      $img = $(e);
+      var $img = $(e);
       result[$img.prop('src')] = {
         width: $img.width(),
         height: $img.height()
@@ -384,9 +399,10 @@ Discourse.ComposerView = Discourse.View.extend({
 
 // not sure if this is the right way, keeping here for now, we could use a mixin perhaps
 Discourse.NotifyingTextArea = Ember.TextArea.extend({
-  placeholder: (function() {
+  placeholder: function() {
     return Em.String.i18n(this.get('placeholderKey'));
-  }).property('placeholderKey'),
+  }.property('placeholderKey'),
+
   didInsertElement: function() {
     return this.get('parent').childDidInsertElement(this);
   }