Merge pull request #3740 from movilla/progress_upload

Add progress percentage to upload images. Close #3633

Changelog.md

@@ -17,6 +17,7 @@
 * Add possibility to contact the administrator. [#3792](https://github.com/diaspora/diaspora/pull/3792)
 * Add simple background for unread messages/conversations mobile. [#3724](https://github.com/diaspora/diaspora/pull/3724)
 * Add flash warning to conversation mobile, unification of flash warning with login and register mobile, and add support for flash warning to Opera browser. [#3686](https://github.com/diaspora/diaspora/pull/3686)
+* Add progress percentage to upload images. [#3740](https://github.com/diaspora/diaspora/pull/3740)
 
 ## Bug Fixes
 

app/assets/javascripts/app/views/publisher_view.js

@@ -99,6 +99,9 @@ app.views.Publisher = Backbone.View.extend(_.extend(
     this.$("input[name='photos[]']").remove();
     this.el_wrapper.removeClass("with_attachments");
 
+    // empty upload-photo
+    this.$('#fileInfo').empty();
+
     // close publishing area (CSS)
     this.close();
 

app/assets/stylesheets/application.css.sass

@@ -2839,3 +2839,7 @@ a.toggle_selector
     :color #666
     :color #666
 
+#fileInfo
+  :font-size small
+  :text-align right
+  :margin 5px 2px

app/views/photos/_new_photo.haml

@@ -17,6 +17,8 @@
        sizeLimit: 4194304,
 
        onProgress: function(id, fileName, loaded, total){
+        var progress = Math.round(loaded / total * 100 );
+         $('#fileInfo').text(fileName + ' ' + progress + '%').fadeTo(200, 1);
        },
 
        messages: {
@@ -38,7 +40,7 @@
        },
 
        onComplete: function(id, fileName, responseJSON) {
-        $('#fileInfo').text(fileName + ' completed');
+        $('#fileInfo').text(Diaspora.I18n.t("photo_uploader.completed", file=fileName)).fadeTo(2000, 0);
         var id = responseJSON.data.photo.id,
             url = responseJSON.data.photo.unprocessed_image.url,
             currentPlaceholder = $('li.loading').first();
@@ -69,7 +71,7 @@
                   success: function() {
                             photo.fadeOut(400, function(){
                               photo.remove();
-                              if ( $('.publisher_photo').length  == 0){
+                              if ( $('.publisher_photo').length == 0){
                                 app.publisher.el_wrapper.removeClass("with_attachments");
                               }
                             });

app/views/shared/_publisher.html.haml

@@ -14,6 +14,7 @@
       = status.error_messages
       %div
         %params
+          #fileInfo
           #publisher_textarea_wrapper
             = link_to( image_tag('deletelabel.png'), "#", :id => "hide_publisher", :title => t('.discard_post'))
             %ul#photodropzone

config/locales/javascript/javascript.en.yml

@@ -71,6 +71,7 @@ en:
       preparing_your_stream: "Preparing your personalized stream..."
     photo_uploader:
       looking_good: "OMG, you look awesome!"
+      completed: "<%= file %> completed"
     tags:
       wasnt_that_interesting: "OK, I suppose #<%= tagName %> wasn't all that interesting..."
     people: