From cf9b5d1a3d4db77e908b6c0f11e449882fb21bbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9gis=20Hanol?= Date: Mon, 1 Apr 2013 19:01:29 +0200 Subject: [PATCH] users can now cancel image upload --- .../javascripts/discourse/models/composer.js | 1 - .../templates/composer.js.handlebars | 2 +- .../discourse/views/composer_view.js | 62 ++++++++++++------- 3 files changed, 40 insertions(+), 25 deletions(-) diff --git a/app/assets/javascripts/discourse/models/composer.js b/app/assets/javascripts/discourse/models/composer.js index 8a2a66c614a..1da614f3cec 100644 --- a/app/assets/javascripts/discourse/models/composer.js +++ b/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); }); diff --git a/app/assets/javascripts/discourse/templates/composer.js.handlebars b/app/assets/javascripts/discourse/templates/composer.js.handlebars index cfae2f1f168..74095abed8a 100644 --- a/app/assets/javascripts/discourse/templates/composer.js.handlebars +++ b/app/assets/javascripts/discourse/templates/composer.js.handlebars @@ -53,7 +53,7 @@
{{#if view.loadingImage}}
- {{i18n image_selector.uploading_image}} {{view.uploadProgress}}% {{i18n cancel}} + {{i18n image_selector.uploading_image}} {{view.uploadProgress}}% {{i18n cancel}}
{{/if}} {{/if}} diff --git a/app/assets/javascripts/discourse/views/composer_view.js b/app/assets/javascripts/discourse/views/composer_view.js index 0eb07b7d0a2..9662369a0d8 100644 --- a/app/assets/javascripts/discourse/views/composer_view.js +++ b/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')); @@ -308,6 +303,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); @@ -324,20 +336,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(); @@ -348,11 +367,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); @@ -361,11 +378,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() @@ -381,9 +396,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); }