Merge pull request #4605 from manwithtwowatches/feature/4509-image-upload-response-errors

Feature/4509 image upload response errors

Changelog.md

@@ -40,6 +40,7 @@
 * Fix avatar display on mobile profile [#4591](https://github.com/diaspora/diaspora/pull/4591)
 * Add lightbox to unauthenticated header, fix [#4432](https://github.com/diaspora/diaspora/issues/4432)
 * Fix "more picture" indication (+n) on mobile by adding a link on the indication [#4592](https://github.com/diaspora/diaspora/pull/4592)
+* Display errors when photo upload fails [#4509](https://github.com/diaspora/diaspora/issues/4509)
 
 ## Features
 * Add oEmbed content to the mobile view [#4343](https://github.com/diaspora/diaspora/pull/4353)

app/assets/javascripts/app/views/publisher/uploader_view.js

@@ -60,6 +60,7 @@ app.views.PublisherUploader = Backbone.View.extend({
   },
 
   uploadCompleteHandler: function(id, fileName, response) {
+    if (response.success){
       this.el_info.text(Diaspora.I18n.t('photo_uploader.completed', {file: fileName})).fadeTo(2000, 0);
 
       var id  = response.data.photo.id,
@@ -67,6 +68,11 @@ app.views.PublisherUploader = Backbone.View.extend({
 
       this._addFinishedPhoto(id, url);
       this.trigger('change');
+    } else {
+      this._cancelPhotoUpload();
+      this.trigger('change');
+      this.el_info.text(Diaspora.I18n.t('photo_uploader.error', {file: fileName}));
+    }
   },
 
   // replace the first photo placeholder with the finished uploaded image and
@@ -96,6 +102,14 @@ app.views.PublisherUploader = Backbone.View.extend({
     }
   },
 
+  _cancelPhotoUpload: function() {
+    var publisher = this.options.publisher;
+    var placeholder = publisher.el_photozone.find('li.loading').first();
+    placeholder
+      .removeClass('loading')
+      .find('img').remove();
+  },
+
   // remove an already uploaded photo
   _removePhoto: function(evt) {
     var self  = this;

config/locales/javascript/javascript.en.yml

@@ -81,6 +81,7 @@ en:
     photo_uploader:
       looking_good: "OMG, you look awesome!"
       completed: "<%= file %> completed"
+      error: "A problem occurred while uploading file <%= file %>"
       invalid_ext: "{file} has invalid extension. Only {extensions} are allowed."
       size_error: "{file} is too large, maximum file size is {sizeLimit}."
       empty: "{file} is empty, please select files again without it."

spec/javascripts/app/views/publisher_view_spec.js

@@ -382,15 +382,17 @@ describe("app.views.Publisher", function() {
         });
       });
 
-      context('completion', function() {
+      context('successful completion', function() {
         beforeEach(function() {
           Diaspora.I18n.loadLocale({ photo_uploader: { completed: '<%= file %> completed' }});
           $('#photodropzone').html('<li class="publisher_photo loading"><img src="" /></li>');
 
-          this.uploader.onComplete(null, 'test.jpg', { data: { photo: {
+          this.uploader.onComplete(null, 'test.jpg', {
+            data: { photo: {
               id: '987',
               unprocessed_image: { url: 'test.jpg' }
-          }}});
+            }},
+            success: true });
         });
 
         it('shows it in text form', function() {
@@ -417,6 +419,25 @@ describe("app.views.Publisher", function() {
           expect(this.view.el_preview.prop('disabled')).toBeFalsy();
         });
       });
+
+      context('unsuccessful completion', function() {
+        beforeEach(function() {
+          Diaspora.I18n.loadLocale({ photo_uploader: { completed: '<%= file %> completed' }});
+          $('#photodropzone').html('<li class="publisher_photo loading"><img src="" /></li>');
+
+          this.uploader.onComplete(null, 'test.jpg', {
+            data: { photo: {
+              id: '987',
+              unprocessed_image: { url: 'test.jpg' }
+            }},
+            success: false });
+        });
+
+        it('shows error message', function() {
+          var info = this.view.view_uploader.el_info;
+          expect(info.text()).toBe(Diaspora.I18n.t('photo_uploader.error', {file: 'test.jpg'}))
+        });
+      });
     });
 
     context('photo removal', function() {