diff --git a/media/css/seahub.css b/media/css/seahub.css
index 0fb590a228..28a5128016 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -3545,16 +3545,20 @@ textarea:-moz-placeholder {/* for FF */
 }
 
 /* user & group folder perm */
+#share-popup .tabs-panel,
 #folder-perm-tabs .tabs-panel {
     width:550px;
 }
+#share-popup .share-permission-select,
 #folder-perm-tabs .perm-select {
     height:30px;
 }
+#share-popup .submit,
 #folder-perm-tabs .submit {
     margin-top:2px;
     height:30px;
 }
+#share-popup table,
 #folder-perm-tabs table {
     margin-top:0;
 }
diff --git a/seahub/share/urls.py b/seahub/share/urls.py
index 9f7a1172b3..17eb5f4a0a 100644
--- a/seahub/share/urls.py
+++ b/seahub/share/urls.py
@@ -37,5 +37,6 @@ urlpatterns = patterns('',
     url(r'^ajax/get-download-link/$', ajax_get_download_link, name='ajax_get_download_link'),
     url(r'^ajax/get-upload-link/$', ajax_get_upload_link, name='ajax_get_upload_link'),
     url(r'^ajax/private-share-file/$', ajax_private_share_file, name='ajax_private_share_file'),
+
     url(r'^ajax/private-share-dir/$', ajax_private_share_dir, name='ajax_private_share_dir'),
 )
diff --git a/seahub/share/views.py b/seahub/share/views.py
index 30cd5d54ff..0e36f84870 100644
--- a/seahub/share/views.py
+++ b/seahub/share/views.py
@@ -359,7 +359,7 @@ def ajax_repo_remove_share(request):
 @login_required
 def repo_remove_share(request):
     """
-    If repo is shared from one person to another person, only these two peson
+    If repo is shared from one person to another person, only these two person
     can remove share.
     If repo is shared from one person to a group, then only the one share the
     repo and group staff can remove share.
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index c7b972e352..af1e6bfb80 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -328,8 +328,9 @@
                 <% if (user_perm == 'rw' && !repo_encrypted) { %>
             <li class="tab"><a href="#dir-upload-link-share" class="a">{% trans "Upload Link" %}</a></li>
                 <% } %>
-                <% if (!is_virtual && is_repo_owner) { %>
-            <li class="tab"><a href="#dir-private-share" class="a">{% trans "Private Share" %}</a></li>
+            <% if (!is_virtual && is_repo_owner) { %> {# dir private share #}
+            <li class="tab"><a href="#dir-user-share" class="a">{% trans "Share to user" %}</a></li>
+            <li class="tab"><a href="#dir-group-share" class="a">{% trans "Share to group" %}</a></li>
                 <% } %>
             <% } %>
         </ul>
@@ -423,28 +424,56 @@
 
                 <% if (!is_virtual && is_repo_owner) { %>
                     <% if (!repo_encrypted) { %>
-            <div id="dir-private-share" class="tabs-panel hide">
+            <div id="dir-user-share" class="tabs-panel hide">
                     <% } else { %>
-            <div id="dir-private-share" class="tabs-panel"> {# enc lib only has 'dir-private-share' #}
+            <div id="dir-user-share" class="tabs-panel">
                     <% } %>
-                <form id="dir-private-share-form" action="" class="hide">
-                    <label class="label">{% trans "People:" %}</label><br />
-                    <input type="hidden" name="emails" class="w100" /><br />
-
-                    <label class="label">{% trans "Groups:" %}</label><br />
-                    <select name="groups" class="w100" multiple="multiple"></select><br />
-
-                    <label class="label">{% trans "Permission:" %}</label><br />
-                    <select name="permission" class="share-permission-select w100">
-                        <option value="rw" selected="selected">{% trans "Read-Write"%}</option>
-                        <option value="r">{% trans "Read-Only"%}</option>
-                    </select>
-                    <p class="error hide"></p>
-                    <input type="submit" value="{% trans "Submit" %}" class="submit" />
-                </form>
+                <table>
+                    <tr>
+                        <th width="55%">{% trans "User" %}</th>
+                        <th width="25%">{% trans "Permission" %}</th>
+                        <th width="20%"></th>
+                    </tr>
+                    <tr id="add-dir-user-share-item">
+                        <td>
+                            <input type="hidden" name="emails" class="w100" />
+                        </td>
+                        <td>
+                            <select name="permission" class="share-permission-select w100">
+                                <option value="rw" selected="selected">{% trans "Read-Write" %}</option>
+                                <option value="r">{% trans "Read-Only" %}</option>
+                            </select>
+                        </td>
+                        <td><input type="submit" value="{% trans "Submit" %}" class="submit" /></td>
+                    </tr>
+                </table>
+                <p class="error hide"></p>
             </div>
-                <% } %>
-            <% } %>
+
+            <div id="dir-group-share" class="tabs-panel hide">
+                <table>
+                    <tr>
+                        <th width="55%">{% trans "Group" %}</th>
+                        <th width="25%">{% trans "Permission" %}</th>
+                        <th width="20%"></th>
+                    </tr>
+                    <tr id="add-dir-group-share-item">
+                        <td>
+                            <select name="groups" class="w100" multiple="multiple"></select>
+                        </td>
+                        <td>
+                            <select name="permission" class="share-permission-select w100">
+                                <option value="rw" selected="selected">{% trans "Read-Write" %}</option>
+                                <option value="r">{% trans "Read-Only" %}</option>
+                            </select>
+                        </td>
+                        <td><input type="submit" value="{% trans "Submit" %}" class="submit" /></td>
+                    </tr>
+                </table>
+                <p class="error hide"></p>
+            </div>
+                <% } %> {# if (!is_virtual && is_repo_owner) #}
+            <% } %> {# if is_dir #}
 
             <% if (!is_dir && is_repo_owner) { %>
             <div id="file-private-share" class="tabs-panel hide">
@@ -608,7 +637,7 @@
 </form>
 </script>
 <script type="text/template" id="folder-perm-item-tmpl">
-    <% if (is_user_perm) { %>
+    <% if (for_user) { %>
     <td>
         <a href="{{ SITE_ROOT }}profile/<% print(encodeURIComponent(user)); %>/" target="_blank" title="<%- user %>"><%- user_name %></a>
     </td>
@@ -639,7 +668,7 @@
         </select>
     </td>
     <td>
-        <img src="{{ MEDIA_URL }}img/rm.png" class="perm-delete-icon op-icon vh" alt="" title="{% trans "Delete" %}" />
+        <img src="{{ MEDIA_URL }}img/rm.png" class="delete-icon op-icon vh" alt="" title="{% trans "Delete" %}" />
     </td>
 </script>
 <script type="text/template" id="folder-perm-popup-tmpl">
diff --git a/seahub/urls.py b/seahub/urls.py
index e1d3532ec3..44c0d37e64 100644
--- a/seahub/urls.py
+++ b/seahub/urls.py
@@ -177,8 +177,11 @@ urlpatterns = patterns('',
 
     url(r'^_templates/(?P<template>.*)$', underscore_template, name="underscore_template"),
 
+
     ## ajax lib
     url(r'^ajax/lib/(?P<repo_id>[-0-9a-f]{36})/dir/$', list_lib_dir, name="list_lib_dir"),
+    url(r'^ajax/lib/(?P<repo_id>[-0-9a-f]{36})/dir-user-share-items/$', get_dir_user_share_items, name='get_dir_user_share_items'),
+    url(r'^ajax/lib/(?P<repo_id>[-0-9a-f]{36})/dir-group-share-items/$', get_dir_group_share_items, name='get_dir_group_share_items'),
 
     url(r'^ajax/unset-inner-pub-repo/(?P<repo_id>[-0-9a-f]{36})/$', ajax_unset_inner_pub_repo, name='ajax_unset_inner_pub_repo'),
 
diff --git a/seahub/views/ajax.py b/seahub/views/ajax.py
index 12637748a0..74fa02f7a4 100644
--- a/seahub/views/ajax.py
+++ b/seahub/views/ajax.py
@@ -16,7 +16,8 @@ from django.contrib import messages
 from django.template.defaultfilters import filesizeformat
 
 import seaserv
-from seaserv import seafile_api, seafserv_rpc, is_passwd_set, \
+from seaserv.api import seafile_api
+from seaserv import seafserv_rpc, is_passwd_set, \
     get_related_users_by_repo, get_related_users_by_org_repo, \
     CALC_SHARE_USAGE, seafserv_threaded_rpc, ccnet_threaded_rpc, \
     get_user_quota_usage, get_user_share_usage, edit_repo, \
@@ -2708,3 +2709,86 @@ def ajax_unset_inner_pub_repo(request, repo_id):
     except SearpcError:
         return HttpResponse(json.dumps({"error": _('Internal server error')}),
                 status=500, content_type=content_type)
+
+@login_required_ajax
+def get_dir_user_share_items(request, repo_id):
+    """
+    Get share items for a dir: share to users
+    """
+    content_type = 'application/json; charset=utf-8'
+    result = {}
+
+    repo = get_repo(repo_id)
+    if not repo:
+        result["error"] = _('Library does not exist.')
+        return HttpResponse(json.dumps(result),
+                            status=400, content_type=content_type)
+
+    path = request.GET.get('p', None)
+    if not path:
+        result["error"] = _(u'Argument missing')
+        return HttpResponse(json.dumps(result),
+                status=400, content_type=content_type)
+
+    user = request.user.username
+    try:
+        if path == '/':
+            share_items = seafile_api.list_repo_shared_to(user, repo_id)
+        else:
+            share_items = seafile_api.get_shared_users_for_subdir(repo_id, path, user)
+
+        share_items_ = []
+        for item in share_items:
+            share_item = {
+                "user": item.user,
+                "user_name": email2nickname(item.user),
+                "perm": item.perm,
+            }
+            share_items_.append(share_item)
+        return HttpResponse(json.dumps(share_items_), content_type=content_type)
+    except SearpcError, e:
+        logger.error(e)
+        result["error"] = _('Internal server error')
+        return HttpResponse(json.dumps(result), status=500, content_type=content_type)
+
+@login_required_ajax
+def get_dir_group_share_items(request, repo_id):
+    """
+    Get share items for a dir: share to groups
+
+    """
+    content_type = 'application/json; charset=utf-8'
+    result = {}
+
+    repo = get_repo(repo_id)
+    if not repo:
+        result["error"] = _('Library does not exist.')
+        return HttpResponse(json.dumps(result),
+                            status=400, content_type=content_type)
+
+    path = request.GET.get('p', None)
+    if not path:
+        result["error"] = _(u'Argument missing')
+        return HttpResponse(json.dumps(result),
+                status=400, content_type=content_type)
+
+    user = request.user.username
+    try:
+        if path == '/':
+            share_items = seafile_api.list_repo_shared_group(user, repo_id)
+        else:
+            share_items = seafile_api.get_shared_groups_for_subdir(repo_id, path, user)
+
+        share_items_ = []
+        for item in share_items:
+            share_item = {
+                "group_id": item.group_id,
+                "group_name": get_group(item.group_id).group_name,
+                "perm": item.perm,
+            }
+            share_items_.append(share_item)
+        return HttpResponse(json.dumps(share_items_), content_type=content_type)
+    except SearpcError, e:
+        logger.error(e)
+        result["error"] = _('Internal server error')
+        return HttpResponse(json.dumps(result), status=500, content_type=content_type)
diff --git a/static/scripts/app/views/folder-perm-item.js b/static/scripts/app/views/folder-perm-item.js
index c943582a6b..9978e2daab 100644
--- a/static/scripts/app/views/folder-perm-item.js
+++ b/static/scripts/app/views/folder-perm-item.js
@@ -29,7 +29,7 @@ define([
             'mouseleave': 'hidePermOpIcons',
             'click .perm-edit-icon': 'editIconClick',
             'change .perm-toggle-select': 'editPerm',
-            'click .perm-delete-icon': 'deletePerm'
+            'click .delete-icon': 'deletePerm'
         },
 
         showPermOpIcons: function () {
@@ -54,15 +54,15 @@ define([
                 'path': this.path,
                 'type': 'modify'
             };
-            var is_user_perm = this.item_data.is_user_perm;
-            if (is_user_perm) {
+            var for_user = this.item_data.for_user;
+            if (for_user) {
                 $.extend(post_data, {'user': this.item_data.user});
             } else {
                 $.extend(post_data, {'group_id': this.item_data.group_id});
             }
             $.ajax({
                 url: Common.getUrl({
-                    name: is_user_perm ? 'set_user_folder_perm' : 'set_group_folder_perm',
+                    name: for_user ? 'set_user_folder_perm' : 'set_group_folder_perm',
                     repo_id: this.repo_id
                 }),
                 type: 'POST',
@@ -81,7 +81,7 @@ define([
                     } else {
                         err = gettext("Failed. Please check the network.");
                     }
-                    if (is_user_perm) {
+                    if (for_user) {
                         $('#user-folder-perm .error').html(err).removeClass('hide');
                     } else {
                         $('#group-folder-perm .error').html(err).removeClass('hide');
@@ -97,15 +97,15 @@ define([
                 'path': this.path,
                 'type': 'delete'
             };
-            var is_user_perm = this.item_data.is_user_perm;
-            if (is_user_perm) {
+            var for_user = this.item_data.for_user;
+            if (for_user) {
                 $.extend(post_data, {'user': this.item_data.user});
             } else {
                 $.extend(post_data, {'group_id': this.item_data.group_id});
             }
             $.ajax({
                 url: Common.getUrl({
-                    name: is_user_perm ? 'set_user_folder_perm' : 'set_group_folder_perm',
+                    name: for_user ? 'set_user_folder_perm' : 'set_group_folder_perm',
                     repo_id: this.repo_id
                 }),
                 type: 'POST',
@@ -123,7 +123,7 @@ define([
                     } else {
                         err = gettext("Failed. Please check the network.");
                     }
-                    if (is_user_perm) {
+                    if (for_user) {
                         $('#user-folder-perm .error').html(err).removeClass('hide');
                     } else {
                         $('#group-folder-perm .error').html(err).removeClass('hide');
diff --git a/static/scripts/app/views/folder-perm.js b/static/scripts/app/views/folder-perm.js
index 76afdecbf3..1071ff954c 100644
--- a/static/scripts/app/views/folder-perm.js
+++ b/static/scripts/app/views/folder-perm.js
@@ -72,7 +72,7 @@ define([
                         var perm_item = new FolderPermItemView({
                             'repo_id': _this.repo_id,
                             'path': _this.path,
-                            'item_data':$.extend(item, {'is_user_perm': true})
+                            'item_data':$.extend(item, {'for_user': true})
                         });
                         $add_user_perm.after(perm_item.el);
                     });
@@ -81,7 +81,7 @@ define([
                         var perm_item = new FolderPermItemView({
                             'repo_id': _this.repo_id,
                             'path': _this.path,
-                            'item_data':$.extend(item, {'is_user_perm': false})
+                            'item_data':$.extend(item, {'for_user': false})
                         });
                         $add_group_perm.after(perm_item.el);
                     });
@@ -139,7 +139,7 @@ define([
                                 'user': email,
                                 'user_name': item.user_name,
                                 'perm': perm,
-                                'is_user_perm': true
+                                'for_user': true
                             }
                         });
                         form.after(perm_item.el);
@@ -188,7 +188,7 @@ define([
                             'repo_id': _this.repo_id,
                             'path': _this.path,
                             'item_data': {
-                                'is_user_perm': false,
+                                'for_user': false,
                                 'perm': perm,
                                 'group_id': item.group_id,
                                 'group_name': item.group_name
diff --git a/static/scripts/app/views/folder-share-item.js b/static/scripts/app/views/folder-share-item.js
new file mode 100644
index 0000000000..2af626e6c4
--- /dev/null
+++ b/static/scripts/app/views/folder-share-item.js
@@ -0,0 +1,96 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common'
+], function($, _, Backbone, Common) {
+    'use strict';
+
+    var FolderShareItemView = Backbone.View.extend({
+        tagName: 'tr',
+
+        template: _.template($('#folder-perm-item-tmpl').html()),
+
+        initialize: function(options) {
+            this.item_data = options.item_data;
+            this.repo_id = options.repo_id;
+            this.path = options.path;
+
+            this.render();
+        },
+
+        render: function () {
+            this.$el.html(this.template(this.item_data));
+            return this;
+        },
+
+        events: {
+            'mouseenter': 'showOpIcons',
+            'mouseleave': 'hideOpIcons',
+            'click .perm-edit-icon': 'editIconClick',
+            'change .perm-toggle-select': 'editPerm',
+            'click .delete-icon': 'del'
+        },
+
+        showOpIcons: function () {
+            this.$el.find('.op-icon').removeClass('vh');
+        },
+
+        hideOpIcons: function () {
+            this.$el.find('.op-icon').addClass('vh');
+        },
+
+        editIconClick: function (e) {
+            $(e.currentTarget).closest('td')
+                .find('.perm').addClass('hide').end()
+                .find('.perm-toggle-select').removeClass('hide');
+        },
+
+        editPerm: function (e) {
+            var _this = this;
+            var item_data = this.item_data;
+            var for_user = item_data.for_user;
+            var share_type = for_user ? 'personal' : 'group';
+            var perm = $(e.currentTarget).val();
+            var post_data = {
+                repo_id: this.repo_id,
+                email_or_group: for_user ? item_data.user : item_data.group_id,
+                permission: perm 
+            };
+
+            $.ajax({
+                url: Common.getUrl({
+                    name: 'share_permission_admin' 
+                }) + '?share_type=' + share_type,
+                type: 'POST',
+                dataType: 'json',
+                cache: false,
+                beforeSend: Common.prepareCSRFToken,
+                data: post_data,
+                success: function() {
+                    item_data.perm = perm;
+                    _this.render();
+                },
+                error: function(xhr) {
+                    var err;
+                    if (xhr.responseText) {
+                        err = $.parseJSON(xhr.responseText).error;
+                    } else {
+                        err = gettext("Failed. Please check the network.");
+                    }
+                    if (share_type == 'personal') {
+                        $('#dir-user-share .error').html(err).removeClass('hide');
+                    } else {
+                        $('#dir-group-group .error').html(err).removeClass('hide');
+                    }
+                }
+            });
+        },
+
+        del: function () {
+        }
+
+    });
+
+    return FolderShareItemView;
+});
diff --git a/static/scripts/app/views/share.js b/static/scripts/app/views/share.js
index 870ed0c51f..eebd37c48d 100644
--- a/static/scripts/app/views/share.js
+++ b/static/scripts/app/views/share.js
@@ -4,8 +4,9 @@ define([
     'backbone',
     'common',
     'jquery.ui.tabs',
-    'select2'
-], function($, _, Backbone, Common, Tabs, Select2) {
+    'select2',
+    'app/views/folder-share-item'
+], function($, _, Backbone, Common, Tabs, Select2, FolderShareItemView) {
     'use strict';
 
     var SharePopupView = Backbone.View.extend({
@@ -45,7 +46,8 @@ define([
                     this.uploadLinkPanelInit();
                 }
                 if (!this.is_virtual && this.is_repo_owner) {
-                    this.dirPrivateSharePanelInit();
+                    this.dirUserSharePanelInit();
+                    this.dirGroupSharePanelInit();
                 }
             }
         },
@@ -88,7 +90,8 @@ define([
             'submit #file-private-share-form': 'filePrivateShare',
 
             // dir private share
-            'submit #dir-private-share-form': 'dirPrivateShare'
+            'click #add-dir-user-share-item .submit': 'dirUserShare',
+            'click #add-dir-group-share-item .submit': 'dirGroupShare'
         },
 
         highlightCheckbox: function (e) {
@@ -458,14 +461,44 @@ define([
             return false;
         },
 
-        dirPrivateSharePanelInit: function() {
-            // no 'share to all'
-            var form = this.$('#dir-private-share-form');
+        dirUserSharePanelInit: function() {
+            var form = this.$('#dir-user-share');
 
             $('[name="emails"]', form).select2($.extend({
-                width: '400px'
+                width: '297px'
             },Common.contactInputOptionsForSelect2()));
 
+            // show existing items
+            var $add_item = $('#add-dir-user-share-item');
+            var repo_id = this.repo_id, 
+                path = this.dirent_path;
+            Common.ajaxGet({
+                'get_url': Common.getUrl({
+                    name: 'get_dir_user_share_items',
+                    repo_id: repo_id
+                }), 
+                'data': {'p': path},
+                'after_op_success': function (data) {
+                    $(data).each(function(index, item) {
+                        var new_item = new FolderShareItemView({
+                            'repo_id': repo_id,
+                            'path': path,
+                            'item_data':$.extend(item, {
+                                'for_user': true
+                            })
+                        }); 
+                        $add_item.after(new_item.el);
+                    }); 
+                }
+            }); 
+
+            form.removeClass('hide');
+            this.$('.loading-tip').hide();
+        },
+
+        dirGroupSharePanelInit: function() {
+            var form = this.$('#dir-group-share');
+
             var groups = app.pageOptions.groups || [];
             var g_opts = '';
             for (var i = 0, len = groups.length; i < len; i++) {
@@ -473,48 +506,117 @@ define([
             }
             $('[name="groups"]', form).html(g_opts).select2({
                 placeholder: gettext("Select groups"),
-                width: '400px',
+                width: '297px',
                 escapeMarkup: function(m) { return m; }
             });
 
+            // show existing items
+            var $add_item = $('#add-dir-group-share-item');
+            var repo_id = this.repo_id, 
+                path = this.dirent_path;
+            Common.ajaxGet({
+                'get_url': Common.getUrl({
+                    name: 'get_dir_group_share_items',
+                    repo_id: repo_id
+                }), 
+                'data': {'p': path},
+                'after_op_success': function (data) {
+                    $(data).each(function(index, item) {
+                        var new_item = new FolderShareItemView({
+                            'repo_id': repo_id,
+                            'path': path,
+                            'item_data': $.extend(item, {
+                                'for_user': false
+                            })
+                        }); 
+                        $add_item.after(new_item.el);
+                    });
+                }   
+            }); 
+
             form.removeClass('hide');
             this.$('.loading-tip').hide();
         },
 
-        dirPrivateShare: function () {
-            var form = this.$('#dir-private-share-form'),
+        dirUserShare: function () {
+            var form = this.$('#add-dir-user-share-item'),
                 form_id = form.attr('id');
 
-            var emails = $('[name="emails"]', form).val(), // string
-                groups = $('[name="groups"]', form).val(); // null or [group.id]
-
-            if (!emails && !groups) {
-                Common.showFormError(form_id, gettext("Please select a contact or a group."));
+            var emails_input = $('[name="emails"]', form),
+                emails = emails_input.val(); // string
+            if (!emails) {
                 return false;
             }
 
+            var $add_item = $('#add-dir-user-share-item');
+            var repo_id = this.repo_id, 
+                path = this.dirent_path;
+            var perm = $('[name="permission"]', form).val();
             var post_data = {
-                'repo_id': this.repo_id,
-                'path': this.dirent_path
+                'repo_id': repo_id,
+                'path': path,
+                'emails': emails,
+                'perm': perm 
             };
-            if (emails) {
-                post_data['emails'] = emails;
-            }
-            if (groups) {
-                post_data['groups'] = groups.join(',');
-            }
-            post_data['perm'] = $('[name="permission"]', form).val();
-            var post_url = Common.getUrl({name: 'private_share_dir'});
+            var post_url = Common.getUrl({name: 'private_share_dir'}); // TODO: modify url
             var after_op_success = function(data) {
-                $.modal.close();
-                var msg = gettext("Successfully shared to {placeholder}")
-                    .replace('{placeholder}', Common.HTMLescape(data['shared_success'].join(', ')));
-                Common.feedback(msg, 'success');
-                if (data['shared_failed'].length > 0) {
-                    msg += '<br />' + gettext("Failed to share to {placeholder}")
-                        .replace('{placeholder}', Common.HTMLescape(data['shared_failed'].join(', ')));
-                    Common.feedback(msg, 'info');
-                }
+                $(data).each(function(index, item) {
+                    var new_item = new FolderShareItemView({
+                        'repo_id': repo_id,
+                        'path': path,
+                        'item_data': $.extend(item, {
+                            'for_user': false
+                        })
+                    }); 
+                    $add_item.after(new_item.el);
+                });
+                emails_input.select2("val", "");
+            };
+
+            Common.ajaxPost({
+                'form': form,
+                'post_url': post_url,
+                'post_data': post_data,
+                'after_op_success': after_op_success,
+                'form_id': form_id
+            });
+            return false;
+        },
+
+        dirGroupShare: function () {
+            var form = this.$('#add-dir-group-share-item'),
+                form_id = form.attr('id');
+
+            var groups_input = $('[name="groups"]', form),
+                groups = groups_input.val(); // null or [group.id]
+
+            if (!groups) {
+                return false;
+            }
+
+            var $add_item = $('#add-dir-group-share-item');
+            var repo_id = this.repo_id, 
+                path = this.dirent_path;
+            var perm = $('[name="permission"]', form).val();
+            var post_data = {
+                'repo_id': repo_id,
+                'path': path,
+                'groups': groups.join(','),
+                'perm': perm 
+            };
+            var post_url = Common.getUrl({name: 'private_share_dir'}); // TODO: modify url
+            var after_op_success = function(data) {
+                $(data).each(function(index, item) {
+                    var new_item = new FolderShareItemView({
+                        'repo_id': repo_id,
+                        'path': path,
+                        'item_data': $.extend(item, {
+                            'for_user': false
+                        })
+                    }); 
+                    $add_item.after(new_item.el);
+                });
+                groups_input.select2("val", "");
             };
 
             Common.ajaxPost({
@@ -526,6 +628,7 @@ define([
             });
             return false;
         }
+
     });
 
     return SharePopupView;
diff --git a/static/scripts/common.js b/static/scripts/common.js
index 92ee71cfdf..d1c35ae8a4 100644
--- a/static/scripts/common.js
+++ b/static/scripts/common.js
@@ -113,6 +113,9 @@ define([
               case 'starred_files': return siteRoot + 'api2/starredfiles/';
               case 'shared_repos': return siteRoot + 'api2/shared-repos/' + options.repo_id + '/';
               case 'search_user': return siteRoot + 'api2/search-user/';
+              case 'share_permission_admin': return siteRoot + 'share/permission_admin/';
+              case 'get_dir_user_share_items': return siteRoot + 'ajax/lib/' + options.repo_id + '/dir-user-share-items/';
+              case 'get_dir_group_share_items': return siteRoot + 'ajax/lib/' + options.repo_id + '/dir-group-share-items/';
             }
         },