From 17bab5022fffb571a23aa94b73279a90618f1272 Mon Sep 17 00:00:00 2001
From: Nikita Verkhovin <vernik91@gmail.com>
Date: Mon, 10 Aug 2015 13:18:02 +0600
Subject: [PATCH] Add dropzone upload progress

---
 Gemfile.lock                                      | 4 ++--
 app/assets/javascripts/dropzone_input.js.coffee   | 9 ++++++++-
 app/assets/stylesheets/generic/markdown_area.scss | 9 +++++++++
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index e72b7fe4927..643c513161f 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -154,7 +154,7 @@ GEM
     doorkeeper (2.1.3)
       railties (>= 3.2)
     dotenv (0.9.0)
-    dropzonejs-rails (0.4.14)
+    dropzonejs-rails (0.7.1)
       rails (> 3.1)
     email_spec (1.6.0)
       launchy (~> 2.1)
@@ -373,7 +373,7 @@ GEM
     mini_portile (0.6.2)
     minitest (5.3.5)
     mousetrap-rails (1.4.6)
-    multi_json (1.11.1)
+    multi_json (1.11.2)
     multi_xml (0.5.5)
     multipart-post (1.2.0)
     mysql2 (0.3.16)
diff --git a/app/assets/javascripts/dropzone_input.js.coffee b/app/assets/javascripts/dropzone_input.js.coffee
index a4f511301c1..a0dcaa8c27a 100644
--- a/app/assets/javascripts/dropzone_input.js.coffee
+++ b/app/assets/javascripts/dropzone_input.js.coffee
@@ -8,6 +8,7 @@ class @DropzoneInput
     divAlert = "<div class=\"" + alertClass + "\"></div>"
     iconPaperclip = "<i class=\"fa fa-paperclip div-dropzone-icon\"></i>"
     iconSpinner = "<i class=\"fa fa-spinner fa-spin div-dropzone-icon\"></i>"
+    uploadProgress = $("<div class=\"div-dropzone-progress\"></div>")
     btnAlert = "<button type=\"button\"" + alertAttr + ">&times;</button>"
     project_uploads_path = window.project_uploads_path or null
     markdown_preview_path = window.markdown_preview_path or null
@@ -28,6 +29,7 @@ class @DropzoneInput
     form_dropzone.find(".div-dropzone-hover").append iconPaperclip
     form_dropzone.append divSpinner
     form_dropzone.find(".div-dropzone-spinner").append iconSpinner
+    form_dropzone.find(".div-dropzone-spinner").append uploadProgress
     form_dropzone.find(".div-dropzone-spinner").css
       "opacity": 0
       "display": "none"
@@ -112,13 +114,18 @@ class @DropzoneInput
           $(".div-dropzone-alert").append btnAlert + errorMessage
         return
 
+      totaluploadprogress: (totalUploadProgress) ->
+        uploadProgress.text Math.round(totalUploadProgress) + "%"
+        return
+
       sending: ->
         form_dropzone.find(".div-dropzone-spinner").css
           "opacity": 0.7
           "display": "inherit"
         return
 
-      complete: ->
+      queuecomplete: ->
+        uploadProgress.text ""
         $(".dz-preview").remove()
         $(".markdown-area").trigger "input"
         $(".div-dropzone-spinner").css
diff --git a/app/assets/stylesheets/generic/markdown_area.scss b/app/assets/stylesheets/generic/markdown_area.scss
index f94677d1925..a4fc82e90bf 100644
--- a/app/assets/stylesheets/generic/markdown_area.scss
+++ b/app/assets/stylesheets/generic/markdown_area.scss
@@ -40,6 +40,15 @@
       font-size: inherit;
     }
 
+    .div-dropzone-progress {
+      position: absolute;
+      top: 7px;
+      left: -40px;
+      width: 35px;
+      font-size: 13px;
+      text-align: right;
+    }
+
     .dz-preview {
       display: none;
     }
-- 
GitLab