Merge pull request #1139 from haiwen/fileupload2

Fileupload

media/css/seahub.css

@@ -358,6 +358,7 @@ p { margin:0.5em 0; }
 .label { color:#333; font-size:12px; font-style:normal; }
 .italic { font-style:italic; }
 .alc { text-align: center;}
+.inline-block { display: inline-block; }
 .cspt { cursor:pointer; }
 .pos-rel { position:relative; }
 .top-tip {
@@ -2086,36 +2087,6 @@ button.dropdown-toggle:focus {
     margin-top:8px;
 }
 /* file upload */
-.repo-op .upload-file-btn {
-    display: inline-block;
-    height: auto;
-    padding: 5px 6px;
-    border: 1px solid #c5c5c5;
-    border-radius: 2px;
-    position:relative;
-    overflow:hidden;
-}
-#upload-menu,
-#add-pub-lib-menu {
-    position:absolute;
-    z-index:12; /* make it on top of a checkbox */
-    border:1px solid #c5c5c5;
-    border-radius:2px;
-    box-shadow: 0 0 2px #c5c5c5;
-    background:#fff;
-}
-#upload-menu .item,
-#add-pub-lib-menu .item {
-    padding:0 10px;
-    height:27px;
-    line-height:27px;
-    cursor:pointer;
-}
-#upload-menu .item {
-    position:relative;
-    text-align:left;
-    overflow:hidden; /* for 'hover', as long 'input' in it. */
-}
 .fixed-upload-file-dialog {
     width: 540px;
     position: fixed;
@@ -2162,9 +2133,7 @@ button.dropdown-toggle:focus {
     font-size:13px;
     color:#333;
 }
-.fileinput-button input,
+.fileinput-button input {
-#upload-file input,
-#upload-menu input {
     position: absolute;
     top: 0;
     right: 0;

seahub/templates/js/templates.html

@@ -100,21 +100,24 @@
         <button id="cp-dirents" title="{% trans 'Copy' %}" class="op-btn sf2-icon-copy op-icon"></button>
         <button id="del-dirents" title="{% trans 'Delete' %}" class="op-btn sf2-icon-delete op-icon"></button>
     </div>
-    <div id="upload-file" class="op-btn upload-file-btn">
+    <div id="basic-upload" class="inline-block">
-        <span>{% trans "Upload" %}</span>
+        <button class="op-btn basic-upload-btn" >{% trans "Upload" %}</button>
-        <input type="file" name="file" multiple />
+        <input id="basic-upload-input" class="hide" type="file" name="file" multiple />
     </div>
     <% if (enable_upload_folder) { %>
-    <ul id="upload-menu" class="hide">
+    <div id="advanced-upload" class="dropdown dropdown-inline">
-        <li class="item">
+        <button class="dropdown-toggle op-btn">{% trans "Upload" %}</button>
-        <span>{% trans "Upload Files" %}</span>
+        <ul id="upload-menu" class="dropdown-menu hide">
-        <input type="file" name="file" multiple />
+            <li>
+                <a class="op advanced-upload-file" href="#">{% trans "Upload Files" %}</a>
+                <input id="advanced-upload-file-input" class="hide" type="file" name="file" multiple />
             </li>
-        <li class="item">
+            <li>
-        <span>{% trans "Upload Folder" %}</span>
+                <a class="op advanced-upload-folder" href="#">{% trans "Upload Folder" %}</a>
-        <input type="file" name="file" multiple directory webkitdirectory />
+                <input id="advanced-upload-folder-input" class="hide" type="file" name="file" multiple directory webkitdirectory />
             </li>
         </ul>
+    </div>
     <% } %>
     <button id="add-new-dir" class="op-btn">{% trans "New Folder" %}</button>
     <button id="add-new-file" class="op-btn">{% trans "New File" %}</button>

seahub/templates/sysadmin/admin_repo_view.html

@@ -27,9 +27,9 @@
             </p>
             {% if is_default_repo %}
             <div class="repo-op fright">
-                <div id="upload-file" class="op-btn upload-file-btn">
+                <div id="upload-file" class="inline-block">
-                    <span class="icon-upload-alt"></span><span>{% trans "Upload"%}</span>
+                    <button class="op-btn"><span class="icon-upload-alt"></span><span>{% trans "Upload"%}</span></button>
-                    <input type="file" name="file" multiple />
+                    <input class="hide" type="file" name="file" multiple />
                 </div>
                 <button id="add-new-dir" class="op-btn"><span class="icon-plus-sign-alt"></span>{% trans "New Directory"%}</button>
             </div>
@@ -257,6 +257,10 @@ $(function() {
     });
 });
 
+$('#upload-file button').click(function() {
+    $('#upload-file input').click();
+});
+
 // fold/unfold the dialog
 $('#upload-file-dialog .fold-switch').click(function() {
     var popup = $('#upload-file-dialog');

static/scripts/app/views/dir.js

@@ -12,10 +12,11 @@ define([
     'app/views/dirent',
     'app/views/dirent-grid',
     'app/views/fileupload',
-    'app/views/share'
+    'app/views/share',
+    'app/views/widgets/dropdown'
     ], function($, progressbar, magnificPopup, simplemodal, _, Backbone, Common,
         FileTree, Cookies, DirentCollection, DirentView, DirentGridView,
-        FileUploadView, ShareView) {
+        FileUploadView, ShareView, DropdownView) {
         'use strict';
 
         var DirView = Backbone.View.extend({
@@ -204,10 +205,47 @@ define([
                 this.dir.limit = 100;
                 this.render_dirents_slice(this.dir.last_start, this.dir.limit);
 
-                this.fileUploadView.setFileInput();
+                this.setFileInput();
+
                 this.getImageThumbnail();
             },
 
+            // for fileupload
+            setFileInput: function () {
+                var dir = this.dir;
+                if (!dir.user_perm || dir.user_perm != 'rw') {
+                    return;
+                }
+
+                var $popup = this.fileUploadView.$el;
+
+                if (app.pageOptions.enable_upload_folder) {
+                    if ('webkitdirectory' in $('#basic-upload-input')[0]) {
+                        // if enable_upload_folder and is chrome
+                        this.$("#basic-upload").remove();
+                        this.$("#advanced-upload").show();
+                        this.upload_dropdown = new DropdownView({
+                            el: this.$("#advanced-upload")
+                        });
+                        $popup.fileupload(
+                            'option',
+                            'fileInput',
+                            this.$('#advanced-upload input[type="file"]'));
+                    } else {
+                        this.$("#advanced-upload").remove();
+                        $popup.fileupload(
+                            'option',
+                            'fileInput',
+                            this.$('#basic-upload-input'));
+                    }
+                } else {
+                    $popup.fileupload(
+                        'option',
+                        'fileInput',
+                        this.$('#basic-upload-input'));
+                }
+            },
+
             getImageThumbnail: function() {
                 if (!app.pageOptions.enable_thumbnail || this.dir.encrypted) {
                     return false;
@@ -429,7 +467,24 @@ define([
                 'click #cp-dirents': 'cp',
                 'click #del-dirents': 'del',
                 'click .by-name': 'sortByName',
-                'click .by-time': 'sortByTime'
+                'click .by-time': 'sortByTime',
+                'click .basic-upload-btn': 'uploadFile',
+                'click .advanced-upload-file': 'advancedUploadFile',
+                'click .advanced-upload-folder': 'advancedUploadFolder'
+            },
+
+            uploadFile: function() {
+                this.$('#basic-upload-input').trigger('click');
+            },
+
+            advancedUploadFile: function() {
+                this.$('#advanced-upload-file-input').trigger('click');
+                return false;
+            },
+
+            advancedUploadFolder: function() {
+                this.$('#advanced-upload-folder-input').trigger('click');
+                return false;
             },
 
             newDir: function() {

static/scripts/app/views/fileupload.js

@@ -98,8 +98,7 @@ define([
                 // hide the upload menu
                 var menu = dirView.$('#upload-menu');
                 if (!menu.hasClass('hide')) {
-                    menu.find('.item').removeAttr('style')
+                    menu.addClass('hide');
-                        .end().addClass('hide');
                 }
 
                 var file = data.files[0];
@@ -422,15 +421,6 @@ define([
                 window.location.href.replace(/\/repo\/[-a-z0-9]{36}\/.*/, app.config.mediaUrl + 'cors/result.html?%s')
             );
 
-            $(document).click(function(e) {
-                var target = e.target || event.srcElement;
-                var closePopup = function(popup, popup_switch) {
-                    if (!popup.hasClass('hide') && !popup.is(target) && !popup.find('*').is(target) && !popup_switch.is(target) && !popup_switch.find('*').is(target) ) {
-                        popup.addClass('hide');
-                    }
-                };
-                closePopup(dirView.$('#upload-menu'), dirView.$('#upload-file'));
-            });
         },
 
         events: {
@@ -455,51 +445,6 @@ define([
             var popup = this.$el;
             popup.addClass('hide');
             $('.files', popup).empty();
-        },
-
-        setFileInput: function () {
-            var dirView = this.dirView,
-                dir = dirView.dir;
-
-            var popup = this.$el;
-            if (dir.user_perm && dir.user_perm == 'rw') {
-                popup.fileupload(
-                    'option',
-                    'fileInput',
-                    dirView.$('#upload-file input'));
-            }
-            if (!app.pageOptions.enable_upload_folder) {
-                return;
-            }
-            var upload_btn = dirView.$('#upload-file'),
-                upload_menu = dirView.$('#upload-menu');
-
-            if (dir.user_perm && dir.user_perm == 'rw' &&
-                'webkitdirectory' in $('input[type="file"]', upload_btn)[0]) {
-                upload_btn.find('input').remove().end().addClass('cspt');
-                $('.item', upload_menu).click(function() {
-                    popup.fileupload(
-                        'option',
-                        'fileInput',
-                        $('input[type="file"]', $(this))
-                    );
-                })
-                .hover(
-                    function() {
-                        $(this).css({'background':'#f3f3f3'});
-                    },
-                    function() {
-                        $(this).css({'background':'transparent'});
-                    }
-                );
-                upload_btn.click(function () {
-                    upload_menu.toggleClass('hide');
-                    upload_menu.css({
-                        'left': upload_btn.position().left,
-                        'top': parseInt(dirView.$('.repo-op').css('padding-top')) + upload_btn.outerHeight(true)
-                    });
-                });
-            }
         }
     });