Display spinning icon when plugin loads

zephyx · Jun 13, 2014 · 8f00c81 · 8f00c81
1 parent be8c5cb
commit 8f00c81
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 9 deletions.
diff --git a/css/fileinput.css b/css/fileinput.css
@@ -9,6 +9,17 @@
  * Year: 2013
  * For more Yii related demos visit http://demos.krajee.com
  */
+.file-loading {
+    top: 0;
+    right: 0;
+    width: 25px;
+    height: 25px;
+    font-size: 999px;
+    text-align: right;
+    color: #fff;
+    background: transparent url('../img/loading.gif') top left no-repeat;
+    border: none;
+}
 .btn-file {
     position: relative;
     overflow: hidden;

diff --git a/css/fileinput.min.css b/css/fileinput.min.css
diff --git a/img/loading.gif b/img/loading.gif
diff --git a/js/fileinput.js b/js/fileinput.js
@@ -147,6 +147,7 @@
                 hiddenVal: self.$hidden.val()
             };
             this.options = options;
+            self.$element.removeClass('file-loading');
         },
         listen: function () {
             var self = this;
@@ -415,16 +416,19 @@
         elPreviewStatus: null
     };
 
+    var $input = $('input.file[type=file]'), count = Object.keys($input).length;
+
+    if (count > 0) {
+        $input.addClass('file-loading');
+    }
     /**
      * Convert automatically file inputs with class 'file'
      * into a bootstrap fileinput control.
      */
-    $(function () {
-        var $element = $('input.file[type=file]');
-        if ($element.length > 0) {
-            $element.fileinput();
+    $(document).ready(function () {
+        if (count > 0) {
+            $input.fileinput();
         }
-
     });
 
 })(window.jQuery);