customization of upload package input in admin interface

applications/admin/static/css/bootstrap_essentials.css

@@ -281,6 +281,52 @@ td.cbcentered>input, th.cbcentered>input { margin-top:-1px; }
 
 .languageform input.untranslated { background-color:#FC0; }
 
+/*=============================================================
+MASKED UPLOAD INPUT (NO BOOTSTRAP RELATED)
+==============================================================*/
+#appupdate_file.masked {
+margin: 0;
+opacity: 0;
+-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
+filter: alpha(opacity=0); /* IE 7 */
+font-size: 100px;
+position: absolute;
+top: 0;
+right: 0;
+z-index: 410;
+}
+
+#fileselect {
+padding: 4px 6px;
+border: 1px solid #ccc;
+border-radius: 4px;
+color: #555;
+cursor: default;
+position: relative;
+z-index: 400;
+font-size: 14px;
+background-color: #fff;
+margin-bottom: 10px;
+overflow: hidden;
+}
+
+#fileselect span {
+position: absolute;
+left: 6px;
+top: 4px;
+}
+
+.uploadbtn {
+position: absolute;
+top: 3px;
+right: 3px;
+}
+
+.txtPlaceholder {
+font-style: italic;
+color: #ccc;
+}
+
 /*=============================================================
  MEDIA QUERIES
 ==============================================================*/

applications/admin/views/layout.html

@@ -78,11 +78,35 @@
                 jQuery("[rel=tooltip]").tooltip();
             });
         </script>
-	{{if request.function in ('index','site'):}}
+        <script>
-	<a style="position:fixed;bottom:0;left:0;z-index:1000" href="https://groups.google.com/forum/?fromgroups#!forum/web2py" target="_blank">
+            // ====================
-	  <!-- http://webchat.freenode.net/?channels=web2py" //-->
+            // upload input mask
-	  <img src="{{=URL('static','images/questions.png')}}" />
+            // ====================
-	</a>
+
-	{{pass}}
+            function FileSelectHandler(e) {
+                e.stopPropagation();
+                var filename = e.target.value.split(/\\|\//).pop();
+                jQuery('#fileselect>span').removeClass('txtPlaceholder').text(filename)
+            }
+
+            jQuery(document).ready(function(){
+                var iupload = jQuery('#appupdate_file');
+                var ow = 300, oh = 20;
+                var iplaceholder = jQuery('<span class="txtPlaceholder">{{=T("no package selected")}}</span>'),
+                    iuploadbtn = jQuery('<button class="btn btn-inverse btn-mini uploadbtn"><i class="icon-white icon-circle-arrow-up"></i></button>');
+                iupload
+                    .addClass('masked')
+                    .wrap('<div id="fileselect" style="width:'+ow+'px;height:'+oh+'px"></div>')
+                    .on('change', function(event){FileSelectHandler(event)});
+                jQuery('#fileselect').append(iplaceholder, iuploadbtn);
+            });
+        </script>
+
+        {{if request.function in ('index','site'):}}
+        <a style="position:fixed;bottom:0;left:0;z-index:1000" href="https://groups.google.com/forum/?fromgroups#!forum/web2py" target="_blank">
+            <!-- http://webchat.freenode.net/?channels=web2py" //-->
+            <img src="{{=URL('static','images/questions.png')}}" />
+        </a>
+        {{pass}}
     </body>
 </html>