diff --git a/frontend/src/components/cur-dir-path/dir-tool.js b/frontend/src/components/cur-dir-path/dir-tool.js
index c6002ea559..f6515a4334 100644
--- a/frontend/src/components/cur-dir-path/dir-tool.js
+++ b/frontend/src/components/cur-dir-path/dir-tool.js
@@ -12,7 +12,7 @@ import ListTaggedFilesDialog from '../dialog/list-taggedfiles-dialog';
 const propTypes = {
   repoID: PropTypes.string.isRequired,
   repoName: PropTypes.string.isRequired,
-  permission: PropTypes.bool.isRequired,
+  userPerm: PropTypes.string,
   currentPath: PropTypes.string.isRequired,
   updateUsedRepoTags: PropTypes.func.isRequired,
   onDeleteRepoTag: PropTypes.func.isRequired,
@@ -81,12 +81,12 @@ class DirTool extends React.Component {
   }
 
   render() {
-    let { repoID, repoName, permission, currentPath } = this.props;
+    let { repoID, repoName, userPerm, currentPath } = this.props;
     let isFile = this.isMarkdownFile(currentPath);
     let name = Utils.getFileName(currentPath);
     let trashUrl = siteRoot + 'repo/' + repoID + '/trash/';
     let historyUrl = siteRoot + 'repo/history/' + repoID + '/';
-    if (permission) {
+    if (userPerm === 'rw') {
       if (!isFile) {
         if (name) { // name not '' is not root path
           trashUrl = siteRoot + 'repo/' + repoID + '/trash/?path=' + encodeURIComponent(currentPath);
diff --git a/frontend/src/components/cur-dir-path/index.js b/frontend/src/components/cur-dir-path/index.js
index 76d550b22e..ae8ca89fed 100644
--- a/frontend/src/components/cur-dir-path/index.js
+++ b/frontend/src/components/cur-dir-path/index.js
@@ -8,7 +8,7 @@ import DirTool from './dir-tool';
 const propTypes = {
   repoID: PropTypes.string.isRequired,
   repoName: PropTypes.string.isRequired,
-  permission: PropTypes.bool.isRequired,
+  userPerm: PropTypes.string,
   currentPath: PropTypes.string.isRequired,
   onPathClick: PropTypes.func.isRequired,
   onTabNavClick: PropTypes.func,
@@ -52,7 +52,7 @@ class CurDirPath extends React.Component {
         <DirTool
           repoID={this.props.repoID}
           repoName={this.props.repoName}
-          permission={this.props.permission}
+          userPerm={this.props.userPerm}
           currentPath={this.props.currentPath}
           updateUsedRepoTags={this.props.updateUsedRepoTags}
           onDeleteRepoTag={this.props.onDeleteRepoTag}
diff --git a/frontend/src/components/dialog/custom-permission/add-custom-permission.js b/frontend/src/components/dialog/custom-permission/add-custom-permission.js
new file mode 100644
index 0000000000..edff682986
--- /dev/null
+++ b/frontend/src/components/dialog/custom-permission/add-custom-permission.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CustomPermissionEditor from './custom-permission-editor';
+
+const propTypes = {
+  onChangeMode: PropTypes.func.isRequired,
+  addCustomPermission: PropTypes.func.isRequired,
+};
+
+class AddCustomPermission extends React.Component {
+
+  onUpdateCustomPermission = (permission_name, permission_desc, permission) => {
+    this.props.addCustomPermission(permission_name, permission_desc, permission)
+  }
+
+  render() {
+    return (
+      <CustomPermissionEditor 
+        mode={'add'}
+        onChangeMode={this.props.onChangeMode}
+        onUpdateCustomPermission={this.onUpdateCustomPermission}
+      />
+    );
+  }
+  
+}
+
+AddCustomPermission.propTypes = propTypes;
+
+export default AddCustomPermission;
diff --git a/frontend/src/components/dialog/custom-permission/custom-permission-editor.js b/frontend/src/components/dialog/custom-permission/custom-permission-editor.js
new file mode 100644
index 0000000000..e6010d7e7c
--- /dev/null
+++ b/frontend/src/components/dialog/custom-permission/custom-permission-editor.js
@@ -0,0 +1,208 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Alert, FormGroup, Input, Label, Tooltip } from 'reactstrap';
+import { gettext } from '../../../utils/constants';
+import Loading from '../../loading';
+
+const propTypes = {
+  mode: PropTypes.string,
+  permission: PropTypes.object,
+  onChangeMode: PropTypes.func.isRequired,
+  onUpdateCustomPermission: PropTypes.func.isRequired,
+};
+
+class CustomPermissionEditor extends React.Component {
+
+  static defaultProps = {
+    mode: 'add'
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      permission_name: '',
+      permission_desc: '',
+      permission: {
+        upload: false,
+        download: false,
+        modify: false,
+        copy: false,
+        delete: false,
+        preview: false,
+        download_external_link: false,
+      },
+      errMessage: '',
+      tooltipOpen: false,
+    };
+  }
+
+  componentDidMount() {
+    const { permission } = this.props;
+    if (permission) {
+      this.setState({
+        permission_name: permission.name,
+        permission_desc: permission.description,
+        permission: permission.permission,
+        isLoading: false
+      });
+    } else {
+      this.setState({isLoading: false});
+    }
+
+  }
+
+  onChangePermissionName = (evt) => {
+    const { permission_name } = this.state;
+    const newName = evt.target.value;
+    if (newName === permission_name) return;
+    this.setState({permission_name: newName});
+  }
+  
+  onChangePermissionDescription = (evt) => {
+    const { permission_desc } = this.state;
+    const newDescription = evt.target.value;
+    if (newDescription === permission_desc) return;
+    this.setState({permission_desc: newDescription});
+  }
+
+  onChangePermission = (type) => {
+    return () => {
+      const { permission } = this.state;
+      const value = !permission[type];
+      const newPermission = Object.assign({}, permission, {[type]: value});
+      this.setState({permission: newPermission});
+    }
+  }
+
+  validParams = () => {
+    const { permission_name, permission_desc } = this.state;
+    let isValid = false;
+    let errMessage = '';
+    if (!permission_name || !permission_name.trim()) {
+      errMessage = gettext('Name is required');
+      return { isValid, errMessage };
+    }
+    if (!permission_desc || !permission_desc.trim()) {
+      errMessage = gettext('Description is required');
+      return { isValid, errMessage };
+    }
+    
+    isValid = true;
+    return { isValid };
+  }
+
+  onUpdateCustomPermission = () => {
+    const { permission_name, permission_desc, permission } = this.state;
+    const { isValid, errMessage } = this.validParams();
+    if (!isValid) {
+      this.setState({errMessage});
+      return;
+    }
+    this.props.onUpdateCustomPermission(permission_name, permission_desc, permission);
+  }
+
+  toggle = () => {
+    this.setState({tooltipOpen: !this.state.tooltipOpen});
+  }
+
+  render() {
+
+    const { mode } = this.props;
+    const title = mode === 'add' ? gettext('Add permission') : gettext('Edit permission');
+    
+    const { isLoading, permission_name, permission_desc, permission, errMessage } = this.state;
+
+    return (
+      <div className="custom-permission">
+        <div className="permission-header">
+          <div className="title">
+            <div onClick={this.props.onChangeMode}>
+              <i className="fa fa-arrow-left"></i>
+            </div>
+            <div>{title}</div>
+          </div>
+          <div className="operation">
+            <button type="button" className="btn btn-outline-primary" onClick={this.onUpdateCustomPermission}>{gettext('Submit')}</button>
+          </div>
+        </div>
+        <div className="permission-main mt-4">
+          {isLoading && <Loading />}
+          {!isLoading && (
+            <Fragment>
+              <div className="permission-name-desc d-flex">
+                <FormGroup className="permission-name">
+                  <Label>{gettext('Permission name')}</Label>
+                  <Input value={permission_name || ''} onChange={this.onChangePermissionName} />
+                </FormGroup>
+                <FormGroup className="permission-desc">
+                  <Label>{gettext('Description')}</Label>
+                  <Input value={permission_desc || ''} onChange={this.onChangePermissionDescription} />
+                </FormGroup>
+              </div>
+              {errMessage && <Alert color="danger">{errMessage}</Alert>}
+              <div className="permission-options">
+                <FormGroup check>
+                  <Label check>
+                    <Input type="checkbox" onChange={this.onChangePermission('upload')} checked={permission.upload}/>
+                    <span>{gettext('Upload')}</span>
+                  </Label>
+                </FormGroup>
+                <FormGroup check>
+                  <Label check>
+                    <Input type="checkbox" onChange={this.onChangePermission('download')} checked={permission.download}/>
+                    <span>{gettext('Download')}</span>
+                  </Label>
+                </FormGroup>
+                <FormGroup check>
+                  <Label check>
+                    <Input type="checkbox" onChange={this.onChangePermission('modify')} checked={permission.modify}/>
+                    <span>{gettext('Modify')}</span>
+                    <span id="modify-tip" className="fa fa-question-circle ml-2" style={{color: '#999'}}></span>
+                    <Tooltip
+                      toggle={this.toggle}
+                      delay={{show: 0, hide: 0}}
+                      target={'modify-tip'}
+                      placement='bottom'
+                      isOpen={this.state.tooltipOpen}>
+                      ({gettext('Modify includes modify file, create file and folder, move/rename file and folder')})
+                    </Tooltip>
+                  </Label>
+                </FormGroup>
+                <FormGroup check>
+                  <Label check>
+                    <Input type="checkbox" onChange={this.onChangePermission('copy')} checked={permission.copy}/>
+                    <span>{gettext('Copy')}</span>
+                  </Label>
+                </FormGroup>
+                <FormGroup check>
+                  <Label check>
+                    <Input type="checkbox" onChange={this.onChangePermission('delete')} checked={permission.delete}/>
+                    <span>{gettext('Delete')}</span>
+                  </Label>
+                </FormGroup>
+                <FormGroup check>
+                  <Label check>
+                    <Input type="checkbox" onChange={this.onChangePermission('preview')} checked={permission.preview}/>
+                    <span>{gettext('Preview online')}</span>
+                  </Label>
+                </FormGroup>
+                <FormGroup check>
+                  <Label check>
+                    <Input type="checkbox" onChange={this.onChangePermission('download_external_link')} checked={permission.download_external_link}/>
+                    <span>{gettext('Generate share link')}</span>
+                  </Label>
+                </FormGroup>
+              </div>
+            </Fragment>
+          )}
+        </div>
+      </div>
+    );
+  }
+  
+}
+
+CustomPermissionEditor.propTypes = propTypes;
+
+export default CustomPermissionEditor;
diff --git a/frontend/src/components/dialog/custom-permission/custom-permission-item.js b/frontend/src/components/dialog/custom-permission/custom-permission-item.js
new file mode 100644
index 0000000000..f31cadd6be
--- /dev/null
+++ b/frontend/src/components/dialog/custom-permission/custom-permission-item.js
@@ -0,0 +1,67 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  permission: PropTypes.object.isRequired,
+  onEditCustomPermission: PropTypes.func.isRequired,
+  onDeleteCustomPermission: PropTypes.func.isRequired,
+};
+
+class CustomPermissionItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isShowOperations: false
+    };
+  }
+
+  onMouseEnter = () => {
+    this.setState({isShowOperations: true});
+  }
+  
+  onMouseOver = () => {
+    this.setState({isShowOperations: true});
+  }
+  
+  onMouseLeave = () => {
+    this.setState({isShowOperations: false});
+  }
+
+  onEditCustomPermission = () => {
+    const { permission } = this.props;
+    this.props.onEditCustomPermission(permission)
+  }
+
+  onDeleteCustomPermission = () => {
+    const { permission } = this.props;
+    this.props.onDeleteCustomPermission(permission)
+  }
+
+  render() {
+    const { permission } = this.props;
+    const { id, name, description } = permission;
+    return (
+      <tr key={id} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onMouseOver={this.onMouseOver}>
+        <td width='22%' className="text-truncate" title={name}>{name}</td>
+        <td width='56%' className="text-truncate">{description}</td>
+        <td width='22%'>
+          {this.state.isShowOperations && (
+            <Fragment>
+              <span className="permission-operation-btn edit" onClick={this.onEditCustomPermission}>
+                <i className="fa fa-pencil-alt attr-action-icon"></i>
+              </span>
+              <span className="permission-operation-btn delete" onClick={this.onDeleteCustomPermission}>
+                <i className="fa fa-trash attr-action-icon"></i>
+              </span>
+            </Fragment>
+          )}
+        </td>
+      </tr>
+    );
+  }
+}
+
+CustomPermissionItem.propTypes = propTypes;
+
+export default CustomPermissionItem;
diff --git a/frontend/src/components/dialog/custom-permission/custom-permission-manager.js b/frontend/src/components/dialog/custom-permission/custom-permission-manager.js
new file mode 100644
index 0000000000..98526ac255
--- /dev/null
+++ b/frontend/src/components/dialog/custom-permission/custom-permission-manager.js
@@ -0,0 +1,159 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ListCustomPermission from './list-custom-permissions';
+import AddCustomPermission from './add-custom-permission';
+import EditCustomPermission from './edit-custom-permission';
+import Loading from '../../loading';
+import { seafileAPI } from '../../../utils/seafile-api';
+import toaster from '../../toast';
+import { Utils } from '../../../utils/utils';
+import CustomPermission from '../../../models/custom-permission';
+
+const propTypes = {
+  repoID: PropTypes.string.isRequired
+};
+
+const MANAGER_STATE = {
+  LIST: 'list',
+  ADD: 'add',
+  EDIT: 'edit',
+};
+
+class CustomPermissionManager extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentMode: MANAGER_STATE.LIST,
+      isLoading: true,
+      permissions: [],
+      currentPermission: null,
+    };
+  }
+
+  componentDidMount() {
+    this.listCustomPermissions();
+  }
+
+  listCustomPermissions = () => {
+    const { repoID } = this.props;
+    seafileAPI.listCustomPermissions(repoID).then(res => {
+      const permissions = res.data.permission_list.map(item => new CustomPermission(item));
+      this.setState({
+        isLoading: false,
+        permissions: permissions
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+      this.setState({isLoading: false});
+    });
+  }
+
+  addCustomPermission = (permission_name, permission_desc, permission) => {
+    const { repoID } = this.props;
+    seafileAPI.createCustomPermission(repoID, permission_name, permission_desc, permission).then(res => {
+      const { permissions } = this.state;
+      const customPermission = new CustomPermission(res.data.permission);
+      permissions.unshift(customPermission)
+      this.setState({
+        permissions,
+        currentMode: MANAGER_STATE.LIST
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  editCustomPermission = (newPermission) => {
+    const { repoID } = this.props;
+    seafileAPI.updateCustomPermission(repoID, newPermission).then(res => {
+      const customPermission = new CustomPermission(res.data.permission);
+      const { permissions } = this.state;
+      const newPermissions = permissions.map(item => {
+        if (item.id === customPermission.id) {
+          return customPermission;
+        }
+        return item;
+      });
+      this.setState({
+        permissions: newPermissions,
+        currentMode: MANAGER_STATE.LIST
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  deleteCustomPermission = (permission) => {
+    const { repoID } = this.props;
+    const { id: permissionID } = permission;
+    seafileAPI.deleteCustomPermission(repoID, permissionID).then(res => {
+      const { permissions } = this.state;
+      const newPermissions = permissions.filter(permission => permission.id !== permissionID);
+      this.setState({permissions: newPermissions});
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  onChangeMode = () => {
+    this.setState({currentMode: MANAGER_STATE.LIST});
+  }
+
+  onAddCustomPermission = () => {
+    this.setState({currentMode: MANAGER_STATE.ADD});
+  }
+
+  onEditCustomPermission = (permission) => {
+    this.setState({
+      currentMode: MANAGER_STATE.EDIT,
+      currentPermission: permission
+    });
+  }
+
+  onDeleteCustomPermission = (permission) => {
+    this.deleteCustomPermission(permission);
+  }
+
+  render() {
+
+    if (this.state.isLoading) {
+      return <Loading />
+    }
+    
+    const { currentMode, permissions, currentPermission } = this.state;
+    return (
+      <div className="custom-permission-manager">
+        {currentMode === MANAGER_STATE.LIST && (
+          <ListCustomPermission 
+            permissions={permissions}
+            onAddCustomPermission={this.onAddCustomPermission}
+            onEditCustomPermission={this.onEditCustomPermission}
+            onDeleteCustomPermission={this.onDeleteCustomPermission}
+          />
+        )}
+        {currentMode === MANAGER_STATE.ADD && (
+          <AddCustomPermission 
+            onChangeMode={this.onChangeMode}
+            addCustomPermission={this.addCustomPermission}
+          />
+        )}
+        {currentMode === MANAGER_STATE.EDIT && (
+          <EditCustomPermission
+            permission={currentPermission}
+            onChangeMode={this.onChangeMode} 
+            editCustomPermission={this.editCustomPermission}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+CustomPermissionManager.propTypes = propTypes;
+
+export default CustomPermissionManager;
diff --git a/frontend/src/components/dialog/custom-permission/edit-custom-permission.js b/frontend/src/components/dialog/custom-permission/edit-custom-permission.js
new file mode 100644
index 0000000000..74a746cb04
--- /dev/null
+++ b/frontend/src/components/dialog/custom-permission/edit-custom-permission.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CustomPermissionEditor from './custom-permission-editor';
+
+const propTypes = {
+  permission: PropTypes.object.isRequired,
+  onChangeMode: PropTypes.func.isRequired,
+  editCustomPermission: PropTypes.func.isRequired
+};
+
+class EditCustomPermission extends React.Component {
+
+  onUpdateCustomPermission = (permission_name, permission_desc, permission) => {
+    const { permission: editPermission } = this.props;
+    const newPermission = Object.assign({}, editPermission, {
+      name: permission_name,
+      description: permission_desc,
+      permission: permission
+    });
+    this.props.editCustomPermission(newPermission);
+  }
+
+  render() {
+    return (
+      <CustomPermissionEditor 
+        mode={'edit'}
+        permission={this.props.permission}
+        onChangeMode={this.props.onChangeMode}
+        onUpdateCustomPermission={this.onUpdateCustomPermission}
+      />
+    );
+  }
+}
+
+EditCustomPermission.propTypes = propTypes;
+
+export default EditCustomPermission;
diff --git a/frontend/src/components/dialog/custom-permission/list-custom-permissions.js b/frontend/src/components/dialog/custom-permission/list-custom-permissions.js
new file mode 100644
index 0000000000..1cc649c441
--- /dev/null
+++ b/frontend/src/components/dialog/custom-permission/list-custom-permissions.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CustomPermissionItem from './custom-permission-item';
+import { gettext } from '../../../utils/constants';
+
+const propTypes = {
+  permissions: PropTypes.array.isRequired,
+  onAddCustomPermission: PropTypes.func.isRequired,
+  onEditCustomPermission: PropTypes.func.isRequired,
+  onDeleteCustomPermission: PropTypes.func.isRequired,
+};
+
+class ListCustomPermissions extends React.Component {
+
+  render() {
+    const { permissions } = this.props;
+
+    return (
+      <div className="custom-permission">
+        <div className="permission-header">
+          <div className="title">{gettext('Permission')}</div>
+          <div className="operation">
+            <button type="button" className="btn btn-outline-primary" onClick={this.props.onAddCustomPermission}>{gettext('Add permission')}</button>
+          </div>
+        </div>
+        <div className="permission-main mt-4">
+          <table className="permissions-list-header">
+            <thead>
+              <tr>
+                <th width='22%'>{gettext('Permission name')}</th>
+                <th width='56%'>{gettext('Description')}</th>
+                <th width='22%'></th>
+              </tr>
+            </thead>
+          </table>
+          <div className="permissions-list-body">
+            <table>
+              <tbody>
+                {permissions.map(permission => {
+                  return (
+                    <CustomPermissionItem
+                      key={permission.id} 
+                      permission={permission}
+                      onEditCustomPermission={this.props.onEditCustomPermission}
+                      onDeleteCustomPermission={this.props.onDeleteCustomPermission}
+                    />
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ListCustomPermissions.propTypes = propTypes;
+
+export default ListCustomPermissions;
diff --git a/frontend/src/components/dialog/generate-share-link.js b/frontend/src/components/dialog/generate-share-link.js
index 80584bca74..bda28c9876 100644
--- a/frontend/src/components/dialog/generate-share-link.js
+++ b/frontend/src/components/dialog/generate-share-link.js
@@ -18,6 +18,7 @@ const propTypes = {
   itemPath: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
   closeShareDialog: PropTypes.func.isRequired,
+  userPerm: PropTypes.string,
 };
 
 const inputWidth = Utils.isDesktop() ? 250 : 210;
@@ -367,6 +368,9 @@ class GenerateShareLink extends React.Component {
     passwordLengthTip = passwordLengthTip.replace('{passwordLength}', shareLinkPasswordMinLength)
                                          .replace('{shareLinkPasswordStrengthLevel}', shareLinkPasswordStrengthLevel);
 
+    const { userPerm } = this.props;
+    const { isCustomPermission } = Utils.getUserPermission(userPerm);
+
     if (this.state.sharedLinkInfo) {
       let sharedLinkInfo = this.state.sharedLinkInfo;
       let currentPermission = Utils.getShareLinkPermissionStr(sharedLinkInfo.permissions);
@@ -525,7 +529,7 @@ class GenerateShareLink extends React.Component {
               </div>
             }
           </FormGroup>
-          {isPro && (
+          {(isPro && !isCustomPermission) && (
             <FormGroup check>
               <Label check>
                 <span>{gettext('Set permission')}</span>
diff --git a/frontend/src/components/dialog/move-dirent-dialog.js b/frontend/src/components/dialog/move-dirent-dialog.js
index c1477ff61f..d11b8f0042 100644
--- a/frontend/src/components/dialog/move-dirent-dialog.js
+++ b/frontend/src/components/dialog/move-dirent-dialog.js
@@ -159,6 +159,11 @@ class MoveDirent extends React.Component {
       title = gettext('Move selected item(s) to:');
     }
     let mode = this.props.repoEncrypted ? 'only_current_library':'current_repo_and_other_repos';
+    const { permission } = this.props.dirent;
+    const { isCustomPermission } = Utils.getUserPermission(permission);
+    if (isCustomPermission) {
+      mode = 'only_current_library';
+    }
     return (
       <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}><div dangerouslySetInnerHTML={{__html: title}}></div></ModalHeader>
diff --git a/frontend/src/components/dialog/perm-select.js b/frontend/src/components/dialog/perm-select.js
index 0bc9c8950a..99821399c2 100644
--- a/frontend/src/components/dialog/perm-select.js
+++ b/frontend/src/components/dialog/perm-select.js
@@ -2,8 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalBody } from 'reactstrap';
 import { Utils } from '../../utils/utils';
+import CustomPermission from '../../models/custom-permission';
+import Loading from '../loading';
+import toaster from '../toast';
+import { seafileAPI } from '../../utils/seafile-api';
 
 const propTypes = {
+  repoID: PropTypes.string,
   currentPerm: PropTypes.string.isRequired,
   permissions: PropTypes.array.isRequired,
   changePerm: PropTypes.func.isRequired,
@@ -16,8 +21,36 @@ class PermSelect extends React.Component {
     super(props);
 
     this.state = {
-      currentOption: this.props.currentPerm
+      isLoading: true,
+      currentOption: this.props.currentPerm,
+      customPermissions: []
     };
+
+    this.customPermissions = null;
+  }
+
+  componentDidMount() {
+    if (this.props.repoID) {
+      this.listCustomPermissions();
+    } else {
+      this.setState({isLoading: false});
+    }
+  }
+
+  listCustomPermissions = () => {
+    const { repoID } = this.props;
+    seafileAPI.listCustomPermissions(repoID).then(res => {
+      const { permission_list: permissions } = res.data;
+      const customPermissions = permissions.map(item => new CustomPermission(item));
+      this.setState({
+        isLoading: false,
+        customPermissions: customPermissions
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+      this.setState({isLoading: false});
+    });
   }
 
   switchOption = (e) => {
@@ -34,21 +67,62 @@ class PermSelect extends React.Component {
     this.props.toggleDialog();
   }
 
+  translatePermission = (permission) => {
+    let value = Utils.sharePerms(permission);
+    if (!value) {
+      const { customPermissions } = this.state;
+      const item = customPermissions.find(item => item.id + '' === permission);
+      value = item && item.name;
+    }
+    return value;
+    
+  }
+  
+  translateExplanation = (explanation) => {
+    let value = Utils.sharePermsExplanation(explanation);
+    if (!value) {
+      const { customPermissions } = this.state;
+      const item = customPermissions.find(item => item.id + '' === explanation);
+      value = item && item.description;
+    }
+    return value;
+  }
+
+  getPermissions = () => {
+    const { permissions } = this.props;
+    let newPermissions = permissions.slice();
+    const { customPermissions } = this.state;
+    if (!this.customPermissions) {
+      if (customPermissions.length > 0) {
+        customPermissions.forEach(item => {
+          newPermissions.push(item.id + '');
+        });
+      }
+      this.customPermissions = newPermissions;
+    }
+    return this.customPermissions;
+  }
+
+
   render() {
-    const options = this.props.permissions;
-    const { currentOption } = this.state;
+    const { isLoading, currentOption } = this.state;
+    let permissions = [];
+    if (!isLoading) {
+      permissions = this.getPermissions();
+    }
 
     return (
       <Modal isOpen={true} toggle={this.props.toggleDialog}>
-        <ModalBody>
-          {options.map((item, index) => {
+        <ModalBody style={{maxHeight: '400px', overflow: 'auto'}}>
+          {isLoading && <Loading />}
+          {!isLoading && permissions.map((item, index) => {
             return (
               <div className="d-flex" key={index}>
                 <input id={`option-${index}`} className="mt-1" type="radio" name="permission" value={item} checked={currentOption == item} onChange={this.switchOption} />
                 <label htmlFor={`option-${index}`} className="ml-2">
-                  {Utils.sharePerms(item)}
+                  {this.translatePermission(item)}
                   <p className="text-secondary small m-0">
-                    {Utils.sharePermsExplanation(item)}
+                    {this.translateExplanation(item)}
                   </p>
                 </label>
               </div>
diff --git a/frontend/src/components/dialog/share-dialog.js b/frontend/src/components/dialog/share-dialog.js
index 44f7a68003..645ad8ec94 100644
--- a/frontend/src/components/dialog/share-dialog.js
+++ b/frontend/src/components/dialog/share-dialog.js
@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
-import { gettext, username, canGenerateShareLink, canGenerateUploadLink, canInvitePeople, additionalShareDialogNote, enableOCM } from '../../utils/constants';
+import { gettext, username, canGenerateShareLink, canGenerateUploadLink, canInvitePeople, additionalShareDialogNote, enableOCM, isPro } from '../../utils/constants';
 import ShareToUser from './share-to-user';
 import ShareToGroup from './share-to-group';
 import ShareToInvitePeople from './share-to-invite-people';
@@ -13,6 +13,8 @@ import { seafileAPI } from '../../utils/seafile-api';
 import Loading from '../loading';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
+import CustomPermissionManager from './custom-permission/custom-permission-manager';
+
 import '../../css/share-link-dialog.css';
 
 const propTypes = {
@@ -79,6 +81,10 @@ class ShareDialog extends React.Component {
     }
   }
 
+  onAddCustomPermissionToggle = () => {
+    this.toggle('customSharePermission');
+  }
+
   renderDirContent = () => {
 
     if (!this.state.isRepoJudgemented) {
@@ -96,6 +102,8 @@ class ShareDialog extends React.Component {
       enableDirPrivateShare = itemType == 'library';
     }
 
+    const { isCustomPermission } = Utils.getUserPermission(userPerm);
+
     return (
       <Fragment>
         <div className="share-dialog-side">
@@ -133,6 +141,13 @@ class ShareDialog extends React.Component {
                     {gettext('Share to group')}
                   </NavLink>
                 </NavItem>
+                {isPro && !isCustomPermission && (
+                  <NavItem>
+                    <NavLink className={activeTab === 'customSharePermission' ? 'active' : ''} onClick={this.toggle.bind(this, 'customSharePermission')}>
+                      {gettext('Custom sharing permissions')}
+                    </NavLink>
+                  </NavItem>
+                )}
                 {canInvitePeople &&
                   <NavItem>
                     <NavLink className={activeTab === 'invitePeople' ? 'active' : ''} onClick={this.toggle.bind(this, 'invitePeople')}>
@@ -184,12 +199,26 @@ class ShareDialog extends React.Component {
               <Fragment>
                 {activeTab === 'shareToUser' &&
                   <TabPane tabId="shareToUser">
-                    <ShareToUser itemType={this.props.itemType} isGroupOwnedRepo={this.props.isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} isRepoOwner={this.state.isRepoOwner} />
+                    <ShareToUser 
+                      itemType={this.props.itemType} 
+                      isGroupOwnedRepo={this.props.isGroupOwnedRepo} 
+                      itemPath={this.props.itemPath} 
+                      repoID={this.props.repoID} 
+                      isRepoOwner={this.state.isRepoOwner} 
+                      onAddCustomPermissionToggle={this.onAddCustomPermissionToggle}
+                    />
                   </TabPane>
                 }
                 {activeTab === 'shareToGroup' &&
                   <TabPane tabId="shareToGroup">
-                    <ShareToGroup itemType={this.props.itemType} isGroupOwnedRepo={this.props.isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} isRepoOwner={this.state.isRepoOwner} />
+                    <ShareToGroup 
+                      itemType={this.props.itemType} 
+                      isGroupOwnedRepo={this.props.isGroupOwnedRepo} 
+                      itemPath={this.props.itemPath} 
+                      repoID={this.props.repoID} 
+                      isRepoOwner={this.state.isRepoOwner} 
+                      onAddCustomPermissionToggle={this.onAddCustomPermissionToggle}
+                    />
                   </TabPane>
                 }
                 {(canInvitePeople && activeTab === 'invitePeople') &&
@@ -199,6 +228,11 @@ class ShareDialog extends React.Component {
                 }
               </Fragment>
             }
+            {isPro && activeTab === 'customSharePermission' && (
+              <TabPane tabId="customSharePermission">
+                <CustomPermissionManager repoID={this.props.repoID}/>
+              </TabPane>
+            )}
             {enableOCM && itemType === 'library' && activeTab === 'shareToOtherServer' &&
               <TabPane tabId="shareToOtherServer">
                 <ShareToOtherServer itemType={this.props.itemType} isGroupOwnedRepo={this.props.isGroupOwnedRepo} itemPath={this.props.itemPath} repoID={this.props.repoID} isRepoOwner={this.state.isRepoOwner} />
@@ -212,7 +246,7 @@ class ShareDialog extends React.Component {
 
   renderFileContent = () => {
     let activeTab = this.state.activeTab;
-    const { itemType, itemName, repoEncrypted } = this.props;
+    const { itemType, itemName, repoEncrypted, userPerm } = this.props;
     const enableShareLink = !repoEncrypted && canGenerateShareLink;
 
     return (
@@ -242,6 +276,7 @@ class ShareDialog extends React.Component {
                   repoID={this.props.repoID}
                   closeShareDialog={this.props.toggleDialog}
                   itemType={itemType}
+                  userPerm={userPerm}
                 />
               </TabPane>
             }
diff --git a/frontend/src/components/dialog/share-to-group.js b/frontend/src/components/dialog/share-to-group.js
index 565c874ede..5dc10da933 100644
--- a/frontend/src/components/dialog/share-to-group.js
+++ b/frontend/src/components/dialog/share-to-group.js
@@ -37,12 +37,13 @@ class GroupItem extends React.Component {
 
   render() {
     let item = this.props.item;
-    let currentPermission = item.is_admin ? 'admin' : item.permission;
+    let currentPermission = Utils.getSharedPermission(item);
     return (
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td className='name'>{item.group_info.name}</td>
         <td>
           <SharePermissionEditor
+            repoID={this.props.repoID}
             isTextMode={true}
             isEditIconShow={this.state.isOperationShow}
             currentPermission={currentPermission}
@@ -74,6 +75,7 @@ class GroupList extends React.Component {
             <GroupItem
               key={index}
               item={item}
+              repoID={this.props.repoID}
               permissions={this.props.permissions}
               deleteShareItem={this.props.deleteShareItem}
               onChangeUserPermission={this.props.onChangeUserPermission}
@@ -91,6 +93,7 @@ const propTypes = {
   itemType: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
   isRepoOwner: PropTypes.bool.isRequired,
+  onAddCustomPermissionToggle: PropTypes.func,
 };
 
 const NoOptionsMessage = (props) => {
@@ -322,11 +325,14 @@ class ShareToGroup extends React.Component {
               </td>
               <td>
                 <SharePermissionEditor
+                  repoID={this.props.repoID}
                   isTextMode={false}
                   isEditIconShow={false}
                   currentPermission={this.state.permission}
                   permissions={this.permissions}
                   onPermissionChanged={this.setPermission}
+                  enableAddCustomPermission={isPro}
+                  onAddCustomPermissionToggle={this.props.onAddCustomPermissionToggle}
                 />
               </td>
               <td>
@@ -349,6 +355,7 @@ class ShareToGroup extends React.Component {
           <table className="table-thead-hidden w-xs-200">
             {thead}
             <GroupList
+              repoID={this.props.repoID}
               items={this.state.sharedItems}
               permissions={this.permissions}
               deleteShareItem={this.deleteShareItem}
diff --git a/frontend/src/components/dialog/share-to-user.js b/frontend/src/components/dialog/share-to-user.js
index 0fafe4630b..cc623e5a19 100644
--- a/frontend/src/components/dialog/share-to-user.js
+++ b/frontend/src/components/dialog/share-to-user.js
@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import {gettext, isPro, siteRoot} from '../../utils/constants';
+import { gettext, isPro } from '../../utils/constants';
 import { Button } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api.js';
 import { Utils } from '../../utils/utils';
@@ -49,7 +49,7 @@ class UserItem extends React.Component {
 
   render() {
     let item = this.props.item;
-    let currentPermission = item.is_admin ? 'admin' : item.permission;
+    let currentPermission = Utils.getSharedPermission(item);
     const { isUserDetailsPopoverOpen } = this.state;
     return (
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
@@ -79,6 +79,7 @@ class UserItem extends React.Component {
         </td>
         <td>
           <SharePermissionEditor
+            repoID={this.props.repoID}
             isTextMode={true}
             isEditIconShow={this.state.isOperationShow}
             currentPermission={currentPermission}
@@ -110,6 +111,7 @@ class UserList extends React.Component {
             <UserItem
               key={index}
               item={item}
+              repoID={this.props.repoID}
               permissions={this.props.permissions}
               deleteShareItem={this.props.deleteShareItem}
               onChangeUserPermission={this.props.onChangeUserPermission}
@@ -127,6 +129,7 @@ const propTypes = {
   itemType: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
   isRepoOwner: PropTypes.bool.isRequired,
+  onAddCustomPermissionToggle: PropTypes.func,
 };
 
 class ShareToUser extends React.Component {
@@ -333,11 +336,14 @@ class ShareToUser extends React.Component {
               </td>
               <td>
                 <SharePermissionEditor
+                  repoID={this.props.repoID}
                   isTextMode={false}
                   isEditIconShow={false}
                   currentPermission={this.state.permission}
                   permissions={this.permissions}
                   onPermissionChanged={this.setPermission}
+                  enableAddCustomPermission={isPro}
+                  onAddCustomPermissionToggle={this.props.onAddCustomPermissionToggle}
                 />
               </td>
               <td>
@@ -365,6 +371,7 @@ class ShareToUser extends React.Component {
           <table className="table-thead-hidden w-xs-200">
             {thead}
             <UserList
+              repoID={this.props.repoID}
               items={sharedItems}
               permissions={this.permissions}
               deleteShareItem={this.deleteShareItem}
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js
index 154f99dfdb..659395226e 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js
@@ -38,12 +38,13 @@ class GroupItem extends React.Component {
 
   render() {
     let item = this.props.item;
-    let currentPermission = item.is_admin ? 'admin' : item.permission;
+    let currentPermission = Utils.getSharedPermission(item);
     return (
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td className='name'>{item.group_name}</td>
         <td>
           <SharePermissionEditor
+            repoID={item.repo_id}
             isTextMode={true}
             isEditIconShow={this.state.isOperationShow}
             currentPermission={currentPermission}
@@ -252,6 +253,7 @@ class SysAdminShareToGroup extends React.Component {
               </td>
               <td>
                 <SharePermissionEditor
+                  repoID={this.props.repoID}
                   isTextMode={false}
                   isEditIconShow={false}
                   currentPermission={this.state.permission}
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js
index d4083c12e3..f57076cad5 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js
@@ -37,12 +37,13 @@ class UserItem extends React.Component {
 
   render() {
     let item = this.props.item;
-    let currentPermission = item.is_admin ? 'admin' : item.permission;
+    let currentPermission = Utils.getSharedPermission(item);
     return (
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td className="name">{item.user_name}</td>
         <td>
           <SharePermissionEditor
+            repoID={item.repo_id}
             isTextMode={true}
             isEditIconShow={this.state.isOperationShow}
             currentPermission={currentPermission}
@@ -227,6 +228,7 @@ class SysAdminShareToUser extends React.Component {
               </td>
               <td>
                 <SharePermissionEditor
+                  repoID={this.props.repoID}
                   isTextMode={false}
                   isEditIconShow={false}
                   currentPermission={this.state.permission}
diff --git a/frontend/src/components/dir-view-mode/dir-column-nav.js b/frontend/src/components/dir-view-mode/dir-column-nav.js
index 1067e2f571..618a874aee 100644
--- a/frontend/src/components/dir-view-mode/dir-column-nav.js
+++ b/frontend/src/components/dir-view-mode/dir-column-nav.js
@@ -14,7 +14,7 @@ import { Utils } from '../../utils/utils';
 
 const propTypes = {
   currentPath: PropTypes.string.isRequired,
-  repoPermission: PropTypes.bool.isRequired,
+  userPerm: PropTypes.string.isRequired,
   isTreeDataLoading: PropTypes.bool.isRequired,
   treeData: PropTypes.object.isRequired,
   currentNode: PropTypes.object,
@@ -256,7 +256,7 @@ class DirColumnNav extends React.Component {
           {this.props.isTreeDataLoading ?
             (<Loading/>) :
             (<TreeView
-              repoPermission={this.props.repoPermission}
+              userPerm={this.props.userPerm}
               isNodeMenuShow={this.isNodeMenuShow}
               treeData={this.props.treeData}
               currentPath={this.props.currentPath}
diff --git a/frontend/src/components/dir-view-mode/dir-column-view.js b/frontend/src/components/dir-view-mode/dir-column-view.js
index 8a5ef81992..fc32b9c38e 100644
--- a/frontend/src/components/dir-view-mode/dir-column-view.js
+++ b/frontend/src/components/dir-view-mode/dir-column-view.js
@@ -9,7 +9,6 @@ const propTypes = {
   repoID: PropTypes.string.isRequired,
   // repoinfo
   currentRepoInfo: PropTypes.object.isRequired,
-  repoPermission: PropTypes.bool.isRequired,
   enableDirPrivateShare: PropTypes.bool.isRequired,
   userPerm: PropTypes.string,
   isGroupOwnedRepo: PropTypes.bool.isRequired,
@@ -152,7 +151,7 @@ class DirColumnView extends React.Component {
       <div className="dir-colunm-view" onMouseMove={onResizeMove} onMouseUp={this.onResizeMouseUp} ref="viewModeContainer">
         <DirColumnNav
           currentPath={this.props.path}
-          repoPermission={this.props.repoPermission}
+          userPerm={this.props.userPerm}
           isTreeDataLoading={this.props.isTreeDataLoading}
           treeData={this.props.treeData}
           currentNode={this.props.currentNode}
diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-item.js b/frontend/src/components/dirent-grid-view/dirent-grid-item.js
index 996e42f963..004eeb7e72 100644
--- a/frontend/src/components/dirent-grid-view/dirent-grid-item.js
+++ b/frontend/src/components/dirent-grid-view/dirent-grid-item.js
@@ -27,6 +27,19 @@ class DirentGridItem extends React.Component {
       isGridSelected: false,
       isGridDropTipShow: false,
     };
+
+    const { dirent } = this.props;
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(dirent.permission);
+    this.isCustomPermission = isCustomPermission;
+    this.customPermission = customPermission;
+    this.canPreview = true;
+    this.canDrag = dirent.permission === 'rw';
+    if (isCustomPermission) {
+      const { preview, modify } = customPermission.permission;
+      this.canPreview = preview || modify;
+      this.canDrag = modify;
+    }
+
   }
 
   componentWillReceiveProps(nextProps) {
@@ -45,8 +58,18 @@ class DirentGridItem extends React.Component {
     e.preventDefault();
     e.stopPropagation();
 
-    const dirent = this.props.dirent;
-    if (this.props.dirent === this.props.activeDirent) {
+    const { dirent, activeDirent } = this.props;
+    if (dirent.isDir()) {
+      this.props.onItemClick(dirent);
+      return;
+    }
+
+    // is have preview permission
+    if (!this.canPreview) {
+      return;
+    }
+
+    if (dirent === activeDirent) {
       this.setState({isGridSelected: false});
       if (Utils.imageCheck(dirent.name)) {
         this.props.showImagePopup(dirent);
@@ -62,6 +85,17 @@ class DirentGridItem extends React.Component {
   onItemLinkClick = (e) => {
     e.preventDefault();
     const dirent = this.props.dirent;
+
+    if (dirent.isDir()) {
+      this.props.onItemClick(dirent);
+      return;
+    }
+
+    // is have preview permission
+    if (!this.canPreview) {
+      return;
+    }
+
     if (Utils.imageCheck(dirent.name)) {
       this.props.showImagePopup(dirent);
     } else {
@@ -70,6 +104,9 @@ class DirentGridItem extends React.Component {
   }
 
   onGridItemDragStart = (e) => {
+    if (Utils.isIEBrower() || !this.canDrag) {
+      return false;
+    }
     let dragStartItemData = {nodeDirent: this.props.dirent, nodeParentPath: this.props.path};
     dragStartItemData = JSON.stringify(dragStartItemData);
 
@@ -78,21 +115,33 @@ class DirentGridItem extends React.Component {
   }
 
   onGridItemDragEnter = (e) => {
+    if (Utils.isIEBrower() || !this.canDrag) {
+      return false;
+    }
     if (this.props.dirent.type === 'dir') {
       this.setState({isGridDropTipShow: true});
     }
   }
 
   onGridItemDragOver = (e) => {
+    if (Utils.isIEBrower() || !this.canDrag) {
+      return false;
+    }
     e.preventDefault();
     e.dataTransfer.dropEffect = 'move';
   }
 
   onGridItemDragLeave = (e) => {
+    if (Utils.isIEBrower() || !this.canDrag) {
+      return false;
+    }
     this.setState({isGridDropTipShow: false});
   }
 
   onGridItemDragDrop = (e) => {
+    if (Utils.isIEBrower() || !this.canDrag) {
+      return false;
+    }
     this.setState({isGridDropTipShow: false});
     if (e.dataTransfer.files.length) { // uploaded files
       return;
@@ -158,12 +207,12 @@ class DirentGridItem extends React.Component {
     let lockedInfo = gettext('locked by {name}');
     lockedInfo = lockedInfo.replace('{name}', dirent.lock_owner_name);
 
-    return(
+    return (
       <Fragment>
         <li className="grid-item" onContextMenu={this.onGridItemContextMenu} onMouseDown={this.onGridItemMouseDown}>
           <div
             className={gridClass}
-            draggable="true"
+            draggable={this.canDrag}
             onClick={this.onItemClick}
             onDragStart={this.onGridItemDragStart}
             onDragEnter={this.onGridItemDragEnter}
@@ -177,7 +226,7 @@ class DirentGridItem extends React.Component {
             }
             {dirent.is_locked && <img className="grid-file-locked-icon" src={mediaUrl + 'img/file-locked-32.png'} alt={gettext('locked')} title={lockedInfo}/>}
           </div>
-          <div className="grid-file-name" onDragStart={this.onGridItemDragStart} draggable="true" >
+          <div className="grid-file-name" onDragStart={this.onGridItemDragStart} draggable={this.canDrag} >
             {(dirent.type !== 'dir' && dirent.file_tags && dirent.file_tags.length > 0) && (
               <Fragment>
                 <div id={`tag-list-title-${toolTipID}`} className="dirent-item tag-list tag-list-stacked d-inline-block align-middle">
@@ -193,7 +242,10 @@ class DirentGridItem extends React.Component {
                 </UncontrolledTooltip>
               </Fragment>
             )}
-            <a className={`grid-file-name-link ${this.state.isGridSelected ? 'grid-link-selected-active' : ''}`} href={dirent.type === 'dir' ? dirHref : fileHref} onClick={this.onItemLinkClick}>{dirent.name}</a>
+            {(!dirent.isDir() && !this.canPreview) ? 
+              <a className={`sf-link grid-file-name-link ${this.state.isGridSelected ? 'grid-link-selected-active' : ''}`} onClick={this.onItemLinkClick}>{dirent.name}</a> :
+              <a className={`grid-file-name-link ${this.state.isGridSelected ? 'grid-link-selected-active' : ''}`} href={dirent.type === 'dir' ? dirHref : fileHref} onClick={this.onItemLinkClick}>{dirent.name}</a>
+            }
           </div>
         </li>
       </Fragment>
diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js
index bb9cadb8a5..0ff53692be 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -73,6 +73,18 @@ class DirentListItem extends React.Component {
       isPermissionDialogOpen: false,
       isOpMenuOpen: false // for mobile
     };
+
+    const { dirent } = this.props;
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(dirent.permission);
+    this.isCustomPermission = isCustomPermission;
+    this.customPermission = customPermission;
+    this.canPreview = true;
+    this.canDrag = dirent.permission === 'rw';
+    if (isCustomPermission) {
+      const { preview, modify } = customPermission.permission;
+      this.canPreview = preview || modify;
+      this.canDrag = modify;
+    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -102,7 +114,9 @@ class DirentListItem extends React.Component {
         isOperationShow: true,
       });
     }
-    this.setState({isDragTipShow: true});
+    if (this.canDrag) {
+      this.setState({isDragTipShow: true});
+    }
   }
 
   onMouseOver = () => {
@@ -112,7 +126,9 @@ class DirentListItem extends React.Component {
         isOperationShow: true,
       });
     }
-    this.setState({isDragTipShow: true});
+    if (this.canDrag) {
+      this.setState({isDragTipShow: true});
+    }
   }
 
   onMouseLeave = () => {
@@ -175,6 +191,16 @@ class DirentListItem extends React.Component {
     if (this.state.isRenameing) {
       return;
     }
+
+    if (dirent.isDir()) {
+      this.props.onItemClick(dirent);
+      return;
+    }
+
+    if (!this.canPreview) {
+      return;
+    }
+
     if (Utils.imageCheck(dirent.name)) {
       this.props.showImagePopup(dirent);
     } else {
@@ -388,7 +414,7 @@ class DirentListItem extends React.Component {
   }
 
   onItemDragStart = (e) => {
-    if (Utils.isIEBrower()) {
+    if (Utils.isIEBrower() || !this.canDrag) {
       return false;
     }
     e.dataTransfer.effectAllowed = 'move';
@@ -418,7 +444,7 @@ class DirentListItem extends React.Component {
   }
 
   onItemDragEnter = (e) => {
-    if (Utils.isIEBrower()) {
+    if (Utils.isIEBrower() || !this.canDrag) {
       return false;
     }
     if (this.props.dirent.type === 'dir') {
@@ -428,7 +454,7 @@ class DirentListItem extends React.Component {
   }
 
   onItemDragOver = (e) => {
-    if (Utils.isIEBrower()) {
+    if (Utils.isIEBrower() || !this.canDrag) {
       return false;
     }
     if (e.dataTransfer.dropEffect === 'copy') {
@@ -439,7 +465,7 @@ class DirentListItem extends React.Component {
   }
 
   onItemDragLeave = (e) => {
-    if (Utils.isIEBrower()) {
+    if (Utils.isIEBrower() || !this.canDrag) {
       return false;
     }
 
@@ -450,7 +476,7 @@ class DirentListItem extends React.Component {
   }
 
   onItemDragDrop = (e) => {
-    if (Utils.isIEBrower()) {
+    if (Utils.isIEBrower() || !this.canDrag) {
       return false;
     }
     this.setState({isDropTipshow: false});
@@ -510,6 +536,14 @@ class DirentListItem extends React.Component {
 
   renderItemOperation = () => {
     let { dirent, currentRepoInfo, selectedDirentList } = this.props;
+    let canDownload = true;
+    let canDelete = true;
+    const { isCustomPermission, customPermission } = this;
+    if (isCustomPermission) {
+      const { permission } = customPermission;
+      canDownload = permission.download;
+      canDelete = permission.delete;
+    }
 
     // https://dev.seafile.com/seahub/lib/d6f300e7-bb2b-4722-b83e-cf45e370bfbc/file/seaf-server%20%E5%8A%9F%E8%83%BD%E8%AE%BE%E8%AE%A1/%E6%9D%83%E9%99%90%E7%9B%B8%E5%85%B3/%E8%B5%84%E6%96%99%E5%BA%93%E6%9D%83%E9%99%90%E8%A7%84%E8%8C%83.md
     let showShareBtn = Utils.isHasPermissionToShare(currentRepoInfo, dirent.permission, dirent);
@@ -526,6 +560,11 @@ class DirentListItem extends React.Component {
                       <i className="op-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemDownload}></i>
                     </li>
                   )}
+                  {(isCustomPermission && canDownload) && (
+                    <li className="operation-group-item">
+                      <i className="op-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemDownload}></i>
+                    </li>
+                  )}
                   {showShareBtn && (
                     <li className="operation-group-item">
                       <i className="op-icon sf2-icon-share" title={gettext('Share')} onClick={this.onItemShare}></i>
@@ -536,6 +575,11 @@ class DirentListItem extends React.Component {
                       <i className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i>
                     </li>
                   )}
+                  {(isCustomPermission && canDelete) && (
+                    <li className="operation-group-item">
+                      <i className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i>
+                    </li>
+                  )}
                   <li className="operation-group-item">
                     <ItemDropdownMenu
                       item={this.props.dirent}
@@ -560,12 +604,22 @@ class DirentListItem extends React.Component {
                       <i className="op-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemDownload}></i>
                     </li>
                   )}
+                  {(isCustomPermission && canDownload) && (
+                    <li className="operation-group-item">
+                      <i className="op-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemDownload}></i>
+                    </li>
+                  )}
                   {showShareBtn && (
                     <li className="operation-group-item">
                       <i className="op-icon sf2-icon-share" title={gettext('Share')} onClick={this.onItemShare}></i>
                     </li>
                   )}
-                  {dirent.permission === 'rw' && (
+                  {(dirent.permission === 'rw') && (
+                    <li className="operation-group-item">
+                      <i className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i>
+                    </li>
+                  )}
+                  {(isCustomPermission && canDelete) && (
                     <li className="operation-group-item">
                       <i className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i>
                     </li>
@@ -619,7 +673,7 @@ class DirentListItem extends React.Component {
     const desktopItem = (
       <tr
         className={trClass}
-        draggable="true"
+        draggable={this.canDrag}
         onMouseEnter={this.onMouseEnter}
         onMouseOver={this.onMouseOver}
         onMouseLeave={this.onMouseLeave}
@@ -650,10 +704,15 @@ class DirentListItem extends React.Component {
           </div>
         </td>
         <td className="name">
-          {this.state.isRenameing ?
-            <Rename hasSuffix={dirent.type !== 'dir'} name={dirent.name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel} /> :
-            <a href={dirent.type === 'dir' ? dirHref : fileHref} onClick={this.onItemClick}>{dirent.name}</a>
-          }
+          {this.state.isRenameing && <Rename hasSuffix={dirent.type !== 'dir'} name={dirent.name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel} />}
+          {!this.state.isRenameing && (
+            <Fragment>
+              {(!dirent.isDir() && !this.canPreview) ? 
+                <a className="sf-link" onClick={this.onItemClick}>{dirent.name}</a> :
+                <a href={dirent.type === 'dir' ? dirHref : fileHref} onClick={this.onItemClick}>{dirent.name}</a>
+              }
+            </Fragment>
+          )}
         </td>
         <td className="tag-list-title">
           {(dirent.type !== 'dir' && dirent.file_tags && dirent.file_tags.length > 0) && (
@@ -689,10 +748,15 @@ class DirentListItem extends React.Component {
           </div>
         </td>
         <td onClick={this.onItemClick}>
-          {this.state.isRenameing ?
-            <Rename hasSuffix={dirent.type !== 'dir'} name={dirent.name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel} /> :
-            <a href={dirent.type === 'dir' ? dirHref : fileHref}>{dirent.name}</a>
-          }
+          {this.state.isRenameing && <Rename hasSuffix={dirent.type !== 'dir'} name={dirent.name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel} /> }
+          {!this.state.isRenameing && (
+            <Fragment>
+              {(!dirent.isDir() && !this.canPreview) ?
+                <a className="sf-link">{dirent.name}</a> :
+                <a href={dirent.type === 'dir' ? dirHref : fileHref}>{dirent.name}</a>
+              }
+            </Fragment>
+          )}
           <br />
           {dirent.size && <span className="item-meta-info">{dirent.size}</span>}
           <span className="item-meta-info">{dirent.mtime_relative}</span>
diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js
index ed0ef31889..5f7f3661cb 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-view.js
@@ -83,6 +83,14 @@ class DirentListView extends React.Component {
     this.currentItemRef = null;
 
     this.zipToken = null;
+
+    const { userPerm } = props;
+    this.canDrop = userPerm === 'rw';
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
+    if (isCustomPermission) {
+      const { modify } = customPermission.permission;
+      this.canDrop = modify;
+    }
   }
 
   freezeItem = () => {
@@ -315,12 +323,21 @@ class DirentListView extends React.Component {
     event.preventDefault();
     // Display menu items based on the permissions of the current path
     let permission = this.props.userPerm;
-    if (permission !== 'admin' && permission !== 'rw') {
+
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(this.props.userPerm);
+    if (permission !== 'admin' && permission !== 'rw' && !isCustomPermission) {
       return;
     }
 
     if (this.props.selectedDirentList.length === 0) {
       let id = 'dirent-container-menu';
+      
+      // custom permission judgement
+      if (isCustomPermission) {
+        const { modify } = customPermission.permission;
+        if (!modify) return;
+      }
+
       let menuList = [TextTranslation.NEW_FOLDER, TextTranslation.NEW_FILE];
       this.handleContextClick(event, id, menuList);
     } else {
@@ -334,6 +351,13 @@ class DirentListView extends React.Component {
           this.onDirentClick(null);
           event.preventDefault();
           event.persist();
+
+          // custom permission judgement
+          if (isCustomPermission) {
+            const { modify } = customPermission.permission;
+            if (!modify) return;
+          }
+
           setTimeout(() => {
             let id = 'dirent-container-menu';
             let menuList = [TextTranslation.NEW_FOLDER, TextTranslation.NEW_FILE];
@@ -342,7 +366,17 @@ class DirentListView extends React.Component {
         }
       } else {
         let id = 'dirents-menu';
-        let menuList = [TextTranslation.MOVE, TextTranslation.COPY, TextTranslation.DOWNLOAD, TextTranslation.DELETE];
+        let menuList = [];
+        if (isCustomPermission) {
+          const { modify: canModify, copy: canCopy, download: canDownload, delete: canDelete } = customPermission.permission; 
+          canModify && menuList.push(TextTranslation.MOVE);
+          canCopy && menuList.push(TextTranslation.COPY);
+          canDownload && menuList.push(TextTranslation.DOWNLOAD);
+          canDelete && menuList.push(TextTranslation.DELETE);
+        } else {
+          menuList = [TextTranslation.MOVE, TextTranslation.COPY, TextTranslation.DOWNLOAD, TextTranslation.DELETE];
+        }
+
         this.handleContextClick(event, id, menuList);
       }
     }
@@ -448,7 +482,7 @@ class DirentListView extends React.Component {
   }
 
   onTableDragEnter = (e) => {
-    if (Utils.isIEBrower()) {
+    if (Utils.isIEBrower() || !this.canDrop) {
       return false;
     }
     this.enteredCounter++;
@@ -461,7 +495,7 @@ class DirentListView extends React.Component {
   }
 
   onTableDragOver = (e) => {
-    if (Utils.isIEBrower()) {
+    if (Utils.isIEBrower() || !this.canDrop) {
       return false;
     }
     if (e.dataTransfer.dropEffect === 'copy') {
@@ -472,7 +506,7 @@ class DirentListView extends React.Component {
   }
 
   onTableDragLeave = (e) => {
-    if (Utils.isIEBrower()) {
+    if (Utils.isIEBrower() || !this.canDrop) {
       return false;
     }
     this.enteredCounter--;
@@ -482,7 +516,7 @@ class DirentListView extends React.Component {
   }
 
   tableDrop = (e) => {
-    if (Utils.isIEBrower()) {
+    if (Utils.isIEBrower() || !this.canDrop) {
       return false;
     }
     e.persist();
@@ -540,7 +574,7 @@ class DirentListView extends React.Component {
 
     return (
       <div
-        className={`table-container ${this.state.isListDropTipShow ? 'table-drop-active' : ''}`}
+        className={`table-container ${(this.state.isListDropTipShow && this.canDrop) ? 'table-drop-active' : ''}`}
         onMouseDown={this.onContainerMouseDown}
         onContextMenu={this.onContainerContextMenu}
         onClick={this.onContainerClick}
diff --git a/frontend/src/components/file-uploader/file-uploader.js b/frontend/src/components/file-uploader/file-uploader.js
index e99d758c0d..4327448a2c 100644
--- a/frontend/src/components/file-uploader/file-uploader.js
+++ b/frontend/src/components/file-uploader/file-uploader.js
@@ -26,9 +26,14 @@ const propTypes = {
   dragAndDrop: PropTypes.bool.isRequired,
   path: PropTypes.string.isRequired,
   onFileUploadSuccess: PropTypes.func.isRequired,
+  isCustomPermission: PropTypes.bool,
 };
 
 class FileUploader extends React.Component {
+  
+  static defaultProps = {
+    isCustomPermission: false
+  }
 
   constructor(props) {
     super(props);
@@ -181,15 +186,18 @@ class FileUploader extends React.Component {
   }
 
   onFileAdded = (resumableFile, files) => {
+    const { isCustomPermission } = this.props;
     let isFile = resumableFile.fileName === resumableFile.relativePath;
     // uploading is file and only upload one file
     if (isFile && files.length === 1) {
       let hasRepetition = false;
-      let direntList = this.props.direntList;
-      for (let i = 0; i < direntList.length; i++) {
-        if (direntList[i].type === 'file' && direntList[i].name === resumableFile.fileName) {
-          hasRepetition = true;
-          break;
+      if (!isCustomPermission) {
+        let direntList = this.props.direntList;
+        for (let i = 0; i < direntList.length; i++) {
+          if (direntList[i].type === 'file' && direntList[i].name === resumableFile.fileName) {
+            hasRepetition = true;
+            break;
+          }
         }
       }
       if (hasRepetition) {
diff --git a/frontend/src/components/file-view/file-toolbar.js b/frontend/src/components/file-view/file-toolbar.js
index 215369f516..3711432e76 100644
--- a/frontend/src/components/file-view/file-toolbar.js
+++ b/frontend/src/components/file-view/file-toolbar.js
@@ -6,6 +6,8 @@ import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import ModalPortal from '../modal-portal';
 import ShareDialog from '../dialog/share-dialog';
+import { seafileAPI } from '../../utils/seafile-api';
+import toaster from '../toast';
 
 const propTypes = {
   isLocked: PropTypes.bool.isRequired,
@@ -32,12 +34,33 @@ class FileToolbar extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      isLoading: true,
       dropdownOpen: false,
       moreDropdownOpen: false,
       isShareDialogOpen: false,
     };
   }
 
+  async componentDidMount() {
+    if (filePerm && filePerm.startsWith('custom-')) {
+      this.isCustomPermission = true;
+      const permissionID = filePerm.split('-')[1];
+      try {
+        const permissionRes = await seafileAPI.getCustomPermission(repoID, permissionID);
+        this.customPermission = permissionRes.data.permission;
+        // share dialog need a global custom_permission
+        window.custom_permission = this.customPermission;
+        this.setState({isLoading: false});
+      } catch(error) {
+        let errorMsg = Utils.getErrorMsg(error);
+        toaster.danger(errorMsg);
+        this.setState({isLoading: false});
+      }
+    } else {
+      this.setState({isLoading: false});
+    }
+  }
+
   toggleShareDialog = () => {
     this.setState({isShareDialogOpen: !this.state.isShareDialogOpen});
   }
@@ -55,6 +78,10 @@ class FileToolbar extends React.Component {
   }
 
   render() {
+    if (this.state.isLoading) {
+      return null;
+    }
+
     const { isLocked, lockedByMe } = this.props;
     const { moreDropdownOpen } = this.state;
     let showLockUnlockBtn = false;
@@ -78,6 +105,14 @@ class FileToolbar extends React.Component {
       showShareBtn = true;
     }
 
+    let canComment = enableComment;
+    const { isCustomPermission, customPermission } = this;
+    if (isCustomPermission) {
+      const { download_external_link } = customPermission.permission;
+      showShareBtn = download_external_link;
+      canComment = false;
+    }
+
     return (
       <Fragment>
         <ButtonGroup className="d-none d-md-block">
@@ -153,7 +188,7 @@ class FileToolbar extends React.Component {
               <span className="fas fa-ellipsis-v"></span>
             </DropdownToggle>
             <DropdownMenu right={true}>
-              {enableComment && (
+              {canComment && (
                 <DropdownItem onClick={this.props.toggleCommentPanel}>
                   {gettext('Comment')}
                 </DropdownItem>
@@ -192,8 +227,7 @@ class FileToolbar extends React.Component {
                 )}
           </ButtonGroup>
 
-          <DropdownToggle className="sf2-icon-more mx-1" aria-label={gettext('More Operations')}>
-          </DropdownToggle>
+          <DropdownToggle className="sf2-icon-more mx-1" aria-label={gettext('More Operations')}></DropdownToggle>
           <DropdownMenu right={true}>
             <DropdownItem>
               <a href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`} className="text-inherit">
@@ -224,7 +258,7 @@ class FileToolbar extends React.Component {
                 </a>
               </DropdownItem>
             )}
-            {enableComment && (
+            {canComment && (
               <DropdownItem onClick={this.props.toggleCommentPanel}>
                 {gettext('Comment')}
               </DropdownItem>
@@ -233,19 +267,19 @@ class FileToolbar extends React.Component {
           </DropdownMenu>
         </Dropdown>
 
-        {this.state.isShareDialogOpen &&
-        <ModalPortal>
-          <ShareDialog
-            itemType='file'
-            itemName={fileName}
-            itemPath={filePath}
-            userPerm={filePerm}
-            repoID={repoID}
-            repoEncrypted={repoEncrypted}
-            toggleDialog={this.toggleShareDialog}
-          />
-        </ModalPortal>
-        }
+        {this.state.isShareDialogOpen && (
+          <ModalPortal>
+            <ShareDialog
+              itemType='file'
+              itemName={fileName}
+              itemPath={filePath}
+              userPerm={filePerm}
+              repoID={repoID}
+              repoEncrypted={repoEncrypted}
+              toggleDialog={this.toggleShareDialog}
+            />
+          </ModalPortal>
+        )}
       </Fragment>
     );
   }
diff --git a/frontend/src/components/select-editor/select-editor.js b/frontend/src/components/select-editor/select-editor.js
index d1dc41ea56..81df388bed 100644
--- a/frontend/src/components/select-editor/select-editor.js
+++ b/frontend/src/components/select-editor/select-editor.js
@@ -13,10 +13,17 @@ const propTypes = {
   translateExplanation: PropTypes.func,
   onOptionChanged: PropTypes.func.isRequired,
   toggleItemFreezed: PropTypes.func,
+  enableAddCustomPermission: PropTypes.bool,
+  onAddCustomPermissionToggle: PropTypes.func,
+
 };
 
 class SelectEditor extends React.Component {
 
+  static defaultProps = {
+    enableAddCustomPermission: false,
+  }
+
   constructor(props) {
     super(props);
     this.state = {
@@ -45,6 +52,21 @@ class SelectEditor extends React.Component {
       this.options.push(option);
     }
 
+    const { enableAddCustomPermission } = this.props;
+    if (enableAddCustomPermission) {
+      const option = {
+        value: gettext('Add custom permission'),
+        isDisabled: true,
+        label: (
+          <div className="btn-add-custom-permission" onClick={this.props.onAddCustomPermissionToggle}>
+            <i className="fa fa-plus"></i>
+            <span>{gettext('Add custom permission')}</span>
+          </div>
+        )
+      };
+      this.options.push(option);
+    }
+
     this.setState({
       options: this.options
     });
diff --git a/frontend/src/components/select-editor/share-permission-editor.js b/frontend/src/components/select-editor/share-permission-editor.js
index 8e1646b0ac..1848a85676 100644
--- a/frontend/src/components/select-editor/share-permission-editor.js
+++ b/frontend/src/components/select-editor/share-permission-editor.js
@@ -2,35 +2,132 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Utils } from '../../utils/utils';
 import SelectEditor from './select-editor';
+import { seafileAPI } from '../../utils/seafile-api';
+import CustomPermission from '../../models/custom-permission';
+import toaster from '../toast';
+import { isPro } from '../../utils/constants';
 
 const propTypes = {
+  repoID: PropTypes.string,
   isTextMode: PropTypes.bool.isRequired,
   isEditIconShow: PropTypes.bool.isRequired,
   permissions: PropTypes.array.isRequired,
   currentPermission: PropTypes.string.isRequired,
-  onPermissionChanged: PropTypes.func.isRequired
+  onPermissionChanged: PropTypes.func.isRequired,
+  enableAddCustomPermission: PropTypes.bool,
+  onAddCustomPermissionToggle: PropTypes.func,
 };
 
 class SharePermissionEditor extends React.Component {
 
-  translatePermission = (permission) => {
-    return Utils.sharePerms(permission);
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      customPermissions: []
+    };
+
+    this.customPermissions = null;
+    const { repoID } = this.props;
+    this.CACHE_KEY = repoID ? `custom_permissions_${repoID}` : '';
   }
 
+  componentDidMount() {
+    if (this.props.repoID && isPro) {
+      this.listCustomPermissions();
+    } else {
+      this.setState({
+        isLoading: false,
+        customPermissions: [],
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    isPro && localStorage.removeItem(this.CACHE_KEY);
+  }
+
+  listCustomPermissions = () => {
+    const { repoID } = this.props;
+    const cacheData = localStorage.getItem(this.CACHE_KEY);
+    if (cacheData) {
+      const { permission_list: permissions } = JSON.parse(cacheData);
+      const customPermissions = permissions.map(item => new CustomPermission(item));
+      this.setState({
+        isLoading: false,
+        customPermissions: customPermissions
+      });
+      return;
+    }
+
+    seafileAPI.listCustomPermissions(repoID).then(res => {
+      const { permission_list: permissions } = res.data;
+      localStorage.setItem(this.CACHE_KEY, JSON.stringify(res.data));
+      const customPermissions = permissions.map(item => new CustomPermission(item));
+      this.setState({
+        isLoading: false,
+        customPermissions: customPermissions
+      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+      this.setState({isLoading: false});
+    });
+  }
+
+  translatePermission = (permission) => {
+    let value = Utils.sharePerms(permission);
+    if (!value) {
+      const { customPermissions } = this.state;
+      const item = customPermissions.find(item => item.id + '' === permission);
+      value = item && item.name;
+    }
+    return value;
+  }
+  
   translateExplanation = (explanation) => {
-    return Utils.sharePermsExplanation(explanation);
+    let value = Utils.sharePermsExplanation(explanation);
+    if (!value) {
+      const { customPermissions } = this.state;
+      const item = customPermissions.find(item => item.id + '' === explanation);
+      value = item && item.description;
+    }
+    return value;
+  }
+
+  getPermissions = () => {
+    const { permissions } = this.props;
+    let newPermissions = permissions.slice();
+    const { customPermissions } = this.state;
+    if (!this.customPermissions) {
+      if (customPermissions.length > 0) {
+        customPermissions.forEach(item => {
+          newPermissions.push(item.id + '');
+        });
+      }
+      this.customPermissions = newPermissions;
+    }
+    return this.customPermissions;
   }
 
   render() {
+
+    const { isLoading } = this.state;
+    if (isLoading) {
+      return null;
+    }
+
     return (
       <SelectEditor
         isTextMode={this.props.isTextMode}
         isEditIconShow={this.props.isEditIconShow}
-        options={this.props.permissions}
+        options={this.getPermissions()}
         currentOption={this.props.currentPermission}
         onOptionChanged={this.props.onPermissionChanged}
         translateOption={this.translatePermission}
         translateExplanation={this.translateExplanation}
+        enableAddCustomPermission={this.props.enableAddCustomPermission}
+        onAddCustomPermissionToggle={this.props.onAddCustomPermissionToggle}
       />
     );
   }
diff --git a/frontend/src/components/toolbar/dir-operation-toolbar.js b/frontend/src/components/toolbar/dir-operation-toolbar.js
index a39b467ac0..3094fb4e98 100644
--- a/frontend/src/components/toolbar/dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/dir-operation-toolbar.js
@@ -166,15 +166,28 @@ class DirOperationToolbar extends React.Component {
     let itemType = path === '/' ? 'library' : 'dir';
     let itemName = path == '/' ? repoName : Utils.getFolderName(path);
 
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
+    let canUpload = true;
+    let canModify = true;
+    if (isCustomPermission) {
+      const { permission } = customPermission;
+      canUpload = permission.upload;
+      canModify = permission.modify;
+    }
+
     let content = null;
     if (Utils.isDesktop()) {
       let { showShareBtn } = this.props;
       content = (
         <Fragment>
-          {Utils.isSupportUploadFolder() ?
-            <button className="btn btn-secondary operation-item" title={gettext('Upload')} onClick={this.onUploadClick}>{gettext('Upload')}</button> :
-            <button className="btn btn-secondary operation-item" title={gettext('Upload')} onClick={this.onUploadFile}>{gettext('Upload')}</button>}
-          <button className="btn btn-secondary operation-item" title={gettext('New')} onClick={this.onCreateClick}>{gettext('New')}</button>
+          {canUpload && (
+            <Fragment>
+              {Utils.isSupportUploadFolder() ?
+                <button className="btn btn-secondary operation-item" title={gettext('Upload')} onClick={this.onUploadClick}>{gettext('Upload')}</button> :
+                <button className="btn btn-secondary operation-item" title={gettext('Upload')} onClick={this.onUploadFile}>{gettext('Upload')}</button>}
+            </Fragment>
+          )}
+          {canModify && <button className="btn btn-secondary operation-item" title={gettext('New')} onClick={this.onCreateClick}>{gettext('New')}</button>}
           {showShareBtn && <button className="btn btn-secondary operation-item" title={gettext('Share')} onClick={this.onShareClick}>{gettext('Share')}</button>}
         </Fragment>
       );
@@ -183,9 +196,15 @@ class DirOperationToolbar extends React.Component {
         <Dropdown isOpen={this.state.isMobileOpMenuOpen} toggle={this.toggleMobileOpMenu}>
           <DropdownToggle tag="span" className="sf2-icon-plus mobile-toolbar-icon" />
           <DropdownMenu>
-            <DropdownItem onClick={this.onUploadFile}>{gettext('Upload')}</DropdownItem>
-            <DropdownItem onClick={this.onCreateFolderToggle}>{gettext('New Folder')}</DropdownItem>
-            <DropdownItem onClick={this.onCreateFileToggle}>{gettext('New File')}</DropdownItem>
+            {canUpload && (
+              <DropdownItem onClick={this.onUploadFile}>{gettext('Upload')}</DropdownItem>
+            )}
+            {canModify && (
+              <Fragment>
+                <DropdownItem onClick={this.onCreateFolderToggle}>{gettext('New Folder')}</DropdownItem>
+                <DropdownItem onClick={this.onCreateFileToggle}>{gettext('New File')}</DropdownItem>
+              </Fragment>
+            )}
           </DropdownMenu>
         </Dropdown>
       );
@@ -193,7 +212,7 @@ class DirOperationToolbar extends React.Component {
 
     return (
       <Fragment>
-        {(userPerm === 'rw' || userPerm === 'admin') && (
+        {(userPerm === 'rw' || userPerm === 'admin' || isCustomPermission) && (
           <div className="dir-operation">
             <div className="operation">
               {content}
@@ -217,7 +236,7 @@ class DirOperationToolbar extends React.Component {
             )}
           </div>
         )}
-        {Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} />}
+        {Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} isCustomPermission={isCustomPermission} />}
         {this.state.isCreateFileDialogShow && (
           <ModalPortal>
             <CreateFile
diff --git a/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js b/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
index a182a15295..99cc34d058 100644
--- a/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
@@ -339,26 +339,39 @@ class MultipleDirOperationToolbar extends React.Component {
 
     const { repoID, userPerm } = this.props;
     const dirent = this.props.selectedDirentList[0];
+    const direntPath = this.getDirentPath(dirent);
 
-    let direntPath = this.getDirentPath(dirent);
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
+    let canDelete = true;
+    let canDownload = true;
+    let canCopy = true;
+    let canModify = true;
+    if (isCustomPermission) {
+      const { permission } = customPermission;
+      canDelete = permission.delete;
+      canDownload = permission.download;
+      canCopy = permission.copy;
+      canModify = permission.modify;
+    }
 
     return (
       <Fragment>
         <div className="dir-operation">
           <div className="d-flex">
             <ButtonGroup className="flex-row group-operations">
-              {(userPerm === 'rw' || userPerm === 'admin') && (
+              {(userPerm === 'rw' || userPerm === 'admin' || isCustomPermission) && (
                 <Fragment>
-                  <Button className="secondary group-op-item action-icon sf2-icon-move" title={gettext('Move')} onClick={this.onMoveToggle}></Button>
-                  <Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onCopyToggle}></Button>
-                  <Button className="secondary group-op-item action-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemsDelete}></Button>
+                  {canModify && <Button className="secondary group-op-item action-icon sf2-icon-move" title={gettext('Move')} onClick={this.onMoveToggle}></Button>}
+                  {canCopy && <Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onCopyToggle}></Button>}
+                  {canDelete && <Button className="secondary group-op-item action-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemsDelete}></Button>}
+                  {canDownload && <Button className="secondary group-op-item action-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemsDownload}></Button>}
                 </Fragment>
               )}
               {userPerm === 'r' && (
-                <Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onCopyToggle}></Button>
-              )}
-              {(userPerm === 'rw' || userPerm === 'admin' || userPerm === 'r') && (
-                <Button className="secondary group-op-item action-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemsDownload}></Button>
+                <Fragment>
+                  <Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onCopyToggle}></Button>
+                  <Button className="secondary group-op-item action-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemsDownload}></Button>
+                </Fragment>
               )}
               {this.props.selectedDirentList.length === 1 &&
                 <ItemDropdownMenu
@@ -372,7 +385,7 @@ class MultipleDirOperationToolbar extends React.Component {
             </ButtonGroup>
           </div>
         </div>
-        {Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} />}
+        {Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} isCustomPermission={isCustomPermission} />}
         {this.state.isMoveDialogShow &&
           <MoveDirentDialog
             path={this.props.path}
diff --git a/frontend/src/components/toolbar/view-mode-toolbar.js b/frontend/src/components/toolbar/view-mode-toolbar.js
index ba48f7e921..ab109c61f1 100644
--- a/frontend/src/components/toolbar/view-mode-toolbar.js
+++ b/frontend/src/components/toolbar/view-mode-toolbar.js
@@ -5,10 +5,15 @@ import { gettext } from '../../utils/constants';
 const propTypes = {
   currentMode: PropTypes.string.isRequired,
   switchViewMode: PropTypes.func.isRequired,
+  isCustomPermission: PropTypes.bool,
 };
 
 class ViewModeToolbar extends React.Component {
 
+  static defaultProps = {
+    isCustomPermission: false,
+  }
+
   switchViewMode = (e) => {
     e.preventDefault();
     let id = e.target.id;
@@ -27,9 +32,11 @@ class ViewModeToolbar extends React.Component {
           <button className={`${baseClass} sf2-icon-grid-view ${this.props.currentMode === 'grid' ? 'current-mode' : ''}`} id='grid' title={gettext('Grid')} onClick={this.switchViewMode}></button>
           <button className={`${baseClass} sf2-icon-two-columns ${this.props.currentMode === 'column' ? 'current-mode' : ''}`} id='column' title={gettext('Column')} onClick={this.switchViewMode}></button>
         </div>
-        <div className="detail-btn btn-group">
-          <button className="btn btn-secondary btn-icon ml-1 fas fa-info" id='detail' title={gettext('Detail')} onClick={this.switchViewMode}></button>
-        </div>
+        {!this.props.isCustomPermission && (
+          <div className="detail-btn btn-group">
+            <button className="btn btn-secondary btn-icon ml-1 fas fa-info" id='detail' title={gettext('Detail')} onClick={this.switchViewMode}></button>
+          </div>
+        )}
       </React.Fragment>
     );
   }
diff --git a/frontend/src/components/tree-view/tree-node-view.js b/frontend/src/components/tree-view/tree-node-view.js
index 69804be597..75b3e9730d 100644
--- a/frontend/src/components/tree-view/tree-node-view.js
+++ b/frontend/src/components/tree-view/tree-node-view.js
@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 import { permission } from '../../utils/constants';
 import TextTranslation from '../../utils/text-translation';
 import ItemDropdownMenu from '../dropdown-menu/item-dropdown-menu';
+import { Utils } from '../../utils/utils';
 
 const propTypes = {
-  repoPermission: PropTypes.bool,
+  userPerm: PropTypes.string,
   node: PropTypes.object.isRequired,
   currentPath: PropTypes.string.isRequired,
   paddingLeft: PropTypes.number.isRequired,
@@ -34,6 +35,13 @@ class TreeNodeView extends React.Component {
       isShowOperationMenu: false,
       isNodeDropShow: false,
     };
+    const { userPerm } = props;
+    this.canDrag = userPerm === 'rw';
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
+    if (isCustomPermission) {
+      const { modify } = customPermission.permission;
+      this.canDrag = modify;
+    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -73,6 +81,17 @@ class TreeNodeView extends React.Component {
   }
 
   onNodeClick = () => {
+    const { node } = this.props;
+    const { object } = node;
+    if (object.isDir()) {
+      this.props.onNodeClick(this.props.node);
+      return;
+    }
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(object.permission);
+    if (isCustomPermission) {
+      const { preview: canPreview, modify: canModify } = customPermission.permission;
+      if (!canPreview && !canModify) return;
+    } 
     this.props.onNodeClick(this.props.node);
   }
 
@@ -87,10 +106,16 @@ class TreeNodeView extends React.Component {
   }
 
   onNodeDragStart = (e) => {
+    if (Utils.isIEBrower() || !this.canDrag) {
+      return false;
+    }
     this.props.onNodeDragStart(e, this.props.node);
   }
 
   onNodeDragEnter = (e) => {
+    if (Utils.isIEBrower() || !this.canDrag) {
+      return false;
+    }
     if (this.props.node.object.type === 'dir') {
       this.setState({isNodeDropShow: true});
     }
@@ -98,15 +123,24 @@ class TreeNodeView extends React.Component {
   }
 
   onNodeDragMove = (e) => {
+    if (Utils.isIEBrower() || !this.canDrag) {
+      return false;
+    }
     this.props.onNodeDragMove(e);
   }
 
   onNodeDragLeave = (e) => {
+    if (Utils.isIEBrower() || !this.canDrag) {
+      return false;
+    }
     this.setState({isNodeDropShow: false});
     this.props.onNodeDragLeave(e, this.props.node);
   }
 
   onNodeDrop = (e) => {
+    if (Utils.isIEBrower() || !this.canDrag) {
+      return false;
+    }
     e.stopPropagation();
     this.setState({isNodeDropShow: false});
     this.props.onNodeDrop(e, this.props.node);
@@ -168,14 +202,35 @@ class TreeNodeView extends React.Component {
     return {icon, type};
   }
 
-  caculateMenuList(node) {
+  calculateMenuList = (node) => {
     let { NEW_FOLDER, NEW_FILE, COPY, MOVE, RENAME, DELETE, OPEN_VIA_CLIENT} =  TextTranslation;
 
+    let menuList = [RENAME, DELETE, COPY, MOVE, OPEN_VIA_CLIENT];
     if (node.object.type === 'dir') {
-      return [NEW_FOLDER, NEW_FILE, COPY, MOVE, RENAME, DELETE];
+       menuList = [NEW_FOLDER, NEW_FILE, COPY, MOVE, RENAME, DELETE];
     }
 
-    return [RENAME, DELETE, COPY, MOVE, OPEN_VIA_CLIENT];
+    const { userPerm } = this.props;
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
+    if (!isCustomPermission) {
+      return menuList;
+    }
+
+    menuList = [];
+    const { modify: canModify, delete: canDelete, copy: canCopy } = customPermission.permission;
+    if (node.object.type === 'dir') { 
+      canModify && menuList.push(NEW_FOLDER, NEW_FILE);
+    }
+    
+    canCopy && menuList.push(COPY);
+    canModify && menuList.push(MOVE, RENAME);
+    canDelete && menuList.push(DELETE);
+
+    if (node.object.type !== 'dir') { 
+      menuList.push(OPEN_VIA_CLIENT);
+    }
+
+    return menuList;
   }
 
   renderChildren = () => {
@@ -191,7 +246,7 @@ class TreeNodeView extends React.Component {
               key={item.path}
               node={item}
               paddingLeft={paddingLeft}
-              repoPermission={this.props.repoPermission}
+              userPerm={this.props.userPerm}
               currentPath={this.props.currentPath}
               isNodeMenuShow={this.props.isNodeMenuShow}
               isItemFreezed={this.props.isItemFreezed}
@@ -215,12 +270,14 @@ class TreeNodeView extends React.Component {
   }
 
   render() {
-    let { currentPath, node, isNodeMenuShow } = this.props;
+    let { currentPath, node, isNodeMenuShow, userPerm } = this.props;
     let { type, icon } = this.getNodeTypeAndIcon();
     let hlClass = this.state.isHighlight ? 'tree-node-inner-hover ' : '';
     if (node.path === currentPath) {
       hlClass = 'tree-node-hight-light';
     }
+
+    const { isCustomPermission } = Utils.getUserPermission(userPerm)
     return (
       <div className="tree-node">
         <div
@@ -234,7 +291,7 @@ class TreeNodeView extends React.Component {
           onContextMenu={this.onItemContextMenu}
           onClick={this.onNodeClick}
         >
-          <div className="tree-node-text" draggable="true" onDragStart={this.onNodeDragStart} onDragEnter={this.onNodeDragEnter} onDragLeave={this.onNodeDragLeave} onDragOver={this.onNodeDragMove} onDrop={this.onNodeDrop}>{node.object.name}</div>
+          <div className="tree-node-text" draggable={this.canDrag} onDragStart={this.onNodeDragStart} onDragEnter={this.onNodeDragEnter} onDragLeave={this.onNodeDragLeave} onDragOver={this.onNodeDragMove} onDrop={this.onNodeDrop}>{node.object.name}</div>
           <div className="left-icon">
             {type === 'dir' && (!node.isLoaded ||  (node.isLoaded && node.hasChildren())) && (
               <i
@@ -247,11 +304,11 @@ class TreeNodeView extends React.Component {
           </div>
           {isNodeMenuShow && (
             <div className="right-icon">
-              {((this.props.repoPermission || permission) && this.state.isShowOperationMenu) && (
+              {((userPerm === 'rw' || permission || isCustomPermission) && this.state.isShowOperationMenu) && (
                 <ItemDropdownMenu
                   item={this.props.node}
                   toggleClass={'fas fa-ellipsis-v'}
-                  getMenuList={this.caculateMenuList}
+                  getMenuList={this.calculateMenuList}
                   onMenuItemClick={this.onMenuItemClick}
                   freezeItem={this.props.freezeItem}
                   unfreezeItem={this.unfreezeItem}
diff --git a/frontend/src/components/tree-view/tree-view.js b/frontend/src/components/tree-view/tree-view.js
index eb1dd37a37..4190736d61 100644
--- a/frontend/src/components/tree-view/tree-view.js
+++ b/frontend/src/components/tree-view/tree-view.js
@@ -7,7 +7,7 @@ import { hideMenu, showMenu } from '../context-menu/actions';
 import { Utils } from '../../utils/utils';
 
 const propTypes = {
-  repoPermission: PropTypes.bool,
+  userPerm: PropTypes.string,
   isNodeMenuShow: PropTypes.bool.isRequired,
   treeData: PropTypes.object.isRequired,
   currentPath: PropTypes.string.isRequired,
@@ -31,6 +31,13 @@ class TreeView extends React.Component {
       isItemFreezed: false,
       isTreeViewDropTipShow: false,
     };
+    const { userPerm } = props;
+    this.canDrop = userPerm === 'rw';
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
+    if (isCustomPermission) {
+      const { modify } = customPermission.permission;
+      this.canDrop = modify;
+    }
   }
 
   onItemMove = (repo, dirent, selectedPath, currentPath) => {
@@ -49,7 +56,7 @@ class TreeView extends React.Component {
   }
 
   onNodeDragEnter = (e, node) => {
-    if (Utils.isIEBrower()) {
+    if (Utils.isIEBrower() || !this.canDrop) {
       return false;
     }
     e.persist();
@@ -61,7 +68,7 @@ class TreeView extends React.Component {
   }
 
   onNodeDragMove = (e) => {
-    if (Utils.isIEBrower()) {
+    if (Utils.isIEBrower() || !this.canDrop) {
       return false;
     }
     e.preventDefault();
@@ -69,7 +76,7 @@ class TreeView extends React.Component {
   }
 
   onNodeDragLeave = (e, node) => {
-    if (Utils.isIEBrower()) {
+    if (Utils.isIEBrower() || !this.canDrop) {
       return false;
     }
     if (e.target.className === 'tree-view tree tree-view-drop') {
@@ -80,7 +87,7 @@ class TreeView extends React.Component {
   }
 
   onNodeDrop = (e, node) => {
-    if (Utils.isIEBrower()) {
+    if (Utils.isIEBrower() || !this.canDrop) {
       return false;
     }
     if (e.dataTransfer.files.length) { // uploaded files
@@ -255,6 +262,32 @@ class TreeView extends React.Component {
       menuList = [RENAME, DELETE, COPY, MOVE, OPEN_VIA_CLIENT];
     }
 
+    const { userPerm } = this.props;
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
+    if (!isCustomPermission) {
+      return menuList;
+    }
+
+    menuList = [];
+
+    const { modify: canModify, delete: canDelete, copy: canCopy } = customPermission.permission;
+    if (!node) {
+      canModify && menuList.push(NEW_FOLDER, NEW_FILE);
+      return menuList;
+    }
+
+    if (node.object.type === 'dir') { 
+      canModify && menuList.push(NEW_FOLDER, NEW_FILE);
+    }
+    
+    canCopy && menuList.push(COPY);
+    canModify && menuList.push(MOVE, RENAME);
+    canDelete && menuList.push(DELETE);
+
+    if (node.object.type !== 'dir') { 
+      menuList.push(OPEN_VIA_CLIENT);
+    }
+
     return menuList;
   }
 
@@ -269,7 +302,7 @@ class TreeView extends React.Component {
   render() {
     return (
       <div
-        className={`tree-view tree ${this.state.isTreeViewDropTipShow ? 'tree-view-drop' : ''}`}
+        className={`tree-view tree ${(this.state.isTreeViewDropTipShow && this.canDrop) ? 'tree-view-drop' : ''}`}
         onDrop={this.onNodeDrop}
         onDragEnter={this.onNodeDragEnter}
         onDragLeave={this.onNodeDragLeave}
@@ -277,7 +310,7 @@ class TreeView extends React.Component {
         onContextMenu={this.onContextMenu}
       >
         <TreeNodeView
-          repoPermission={this.props.repoPermission}
+          userPerm={this.props.userPerm}
           node={this.props.treeData.root}
           currentPath={this.props.currentPath}
           paddingLeft={PADDING_LEFT}
diff --git a/frontend/src/css/dirents-menu.css b/frontend/src/css/dirents-menu.css
index 78fa320a52..5da80075da 100644
--- a/frontend/src/css/dirents-menu.css
+++ b/frontend/src/css/dirents-menu.css
@@ -7,6 +7,7 @@
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
   width: 46px;
+  height: 30px;
 }
 .dirents-more-menu:hover {
   background-color: #fff;
diff --git a/frontend/src/css/select-editor.css b/frontend/src/css/select-editor.css
index 8b695be7d2..6ab2c94333 100644
--- a/frontend/src/css/select-editor.css
+++ b/frontend/src/css/select-editor.css
@@ -31,3 +31,34 @@
 .cur-view-content .permission-editor-select .permission-editor__indicators .permission-editor__indicator {
   padding: 0 0.5rem;
 }
+
+.permission-editor .permission-editor__menu .permission-editor__option--is-disabled {
+  color: #9c9c9c;
+  border-top: 1px solid #dedede;
+}
+
+.permission-editor .permission-editor__menu .permission-editor__option--is-disabled:hover {
+  background-color: #f0f0f0 !important;
+  color: #9c9c9c !important;
+}
+
+.permission-editor .btn-add-custom-permission {
+  display: flex;
+  align-items: center;
+  padding: .5rem 0;
+  font-size: 12px;
+  line-height: 13px;
+}
+
+.permission-editor .btn-add-custom-permission .fa {
+  font-size: 12px;
+  line-height: 13px;
+  margin-right: .25rem;
+}
+
+.share-dialog-main .permission-editor .permission-editor__placeholder,
+.share-dialog-main .true__menu,
+.share-dialog-main .true__placeholder,
+.permission-editor .btn-add-custom-permission span {
+  word-break: keep-all;
+}
diff --git a/frontend/src/css/share-link-dialog.css b/frontend/src/css/share-link-dialog.css
index c531043e4c..44c16dae51 100644
--- a/frontend/src/css/share-link-dialog.css
+++ b/frontend/src/css/share-link-dialog.css
@@ -124,3 +124,44 @@ input.expire-input {
     border-bottom-right-radius: 3px;
     border-top-right-radius: 3px;
 }
+
+.custom-permission .permission-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: .375rem 0;
+    border-bottom: 1px solid #efefef;
+}
+
+.custom-permission .permission-header .title {
+    display: flex;
+}
+
+.custom-permission .permission-header .title .fa {
+    color: #999;
+    margin-right: 10px;
+    cursor: pointer;
+}
+
+.custom-permission .permission-name-desc {
+    margin-top: .375rem;
+}
+  
+.custom-permission .permission-name-desc label {
+    font-size: 14px;
+    color: #999;
+}   
+
+.custom-permission .permission-name-desc .permission-name,
+.custom-permission .permission-name-desc .permission-desc {
+    flex: 1;
+}
+
+.custom-permission .permission-name-desc .permission-desc {
+    margin-left: .4rem;
+}
+
+.custom-permission .permissions-list-body {
+    max-height: 350px;
+    overflow-y: scroll;
+  }
diff --git a/frontend/src/markdown-editor.js b/frontend/src/markdown-editor.js
index 21cce8af61..cfb2b66b3a 100644
--- a/frontend/src/markdown-editor.js
+++ b/frontend/src/markdown-editor.js
@@ -536,46 +536,48 @@ class MarkdownEditor extends React.Component {
     });
   }
 
-  componentDidMount() {
+  async componentDidMount() {
 
-    seafileAPI.getFileInfo(repoID, filePath).then((res) => {
-      let { mtime, size, starred, permission, last_modifier_name, id } = res.data;
-      let lastModifier = last_modifier_name;
+    // get file info
+    const fileInfoRes = await seafileAPI.getFileInfo(repoID, filePath);
+    const { mtime, size, starred, permission, last_modifier_name, id } = fileInfoRes.data;
+    const lastModifier = last_modifier_name;
 
-      this.setState((prevState, props) => ({
-        fileInfo: {
-          ...prevState.fileInfo,
-          mtime,
-          size,
-          starred,
-          permission,
-          lastModifier,
-          id
-        }
-      }));
+    // get file download url
+    const fileDownloadUrlRes = await seafileAPI.getFileDownloadLink(repoID, filePath);
+    const downloadUrl = fileDownloadUrlRes.data;
 
-      seafileAPI.getFileDownloadLink(repoID, filePath).then((res) => {
-        const downLoadUrl = res.data;
-        seafileAPI.getFileContent(downLoadUrl).then((res) => {
-          const contentLength = res.data.length;
-          let isBlankFile =  (contentLength === 0 || contentLength === 1);
-          let permission = this.state.fileInfo.permission;
-          let hasPermission = (permission === 'rw' || permission === 'cloud-edit');
-          let value = deserialize(res.data);
-          this.setState({
-            markdownContent: res.data,
-            loading: false,
-            // Goto rich edit page
-            // First, the user has the relevant permissions, otherwise he can only enter the viewer interface or cannot access
-            // case1: If file is draft file
-            // case2: If mode == 'edit' and the file has no draft
-            // case3: The length of markDownContent is 1 when clear all content in editor and the file has no draft
-            readOnly: !hasPermission || hasDraft,
-            value: value,
-          });
-        });
-      });
+    // get file content 
+    const fileContentRes = await seafileAPI.getFileContent(downloadUrl);
+    const markdownContent = fileContentRes.data;
+    const value = deserialize(markdownContent);
+
+    // init permission
+    let hasPermission = permission === 'rw' || permission === 'cloud-edit';
+
+    // get custom permission
+    if (permission.startsWith('custom-')) {
+      const permissionID = permission.split('-')[1];
+      const customPermissionRes = await seafileAPI.getCustomPermission(repoID, permissionID);
+      const customPermission = customPermissionRes.data.permission;
+      const { modify: canModify } = customPermission.permission;
+      hasPermission = canModify ? true : hasPermission;
+    }
+
+    // Goto rich edit page
+    // First, the user has the relevant permissions, otherwise he can only enter the viewer interface or cannot access
+    // case1: If file is draft file
+    // case2: If mode == 'edit' and the file has no draft
+    // case3: The length of markDownContent is 1 when clear all content in editor and the file has no draft
+    const { fileInfo } = this.state;
+    this.setState({
+      loading: false,
+      fileInfo: {...fileInfo, mtime, size, starred, permission, lastModifier, id},
+      markdownContent,
+      value,
+      readOnly: !hasPermission || hasDraft,
     });
+
     if (userInfo && this.socket) {
       const { repoID, path } = this.state.fileInfo;
       this.socket.emit('presence', {
diff --git a/frontend/src/models/custom-permission.js b/frontend/src/models/custom-permission.js
new file mode 100644
index 0000000000..3a5948322c
--- /dev/null
+++ b/frontend/src/models/custom-permission.js
@@ -0,0 +1,12 @@
+class CustomPermission {
+
+  constructor(object) {
+    this.id = object.id;
+    this.name = object.name;
+    this.description = object.description;
+    this.permission = object.permission;
+  }
+
+}
+
+export default CustomPermission;
diff --git a/frontend/src/pages/lib-content-view/lib-content-container.js b/frontend/src/pages/lib-content-view/lib-content-container.js
index 6e7709c187..d863d8a6cf 100644
--- a/frontend/src/pages/lib-content-view/lib-content-container.js
+++ b/frontend/src/pages/lib-content-view/lib-content-container.js
@@ -18,7 +18,6 @@ const propTypes = {
   // repoinfo
   currentRepoInfo: PropTypes.object.isRequired,
   repoID: PropTypes.string.isRequired,
-  repoPermission: PropTypes.bool.isRequired,
   enableDirPrivateShare: PropTypes.bool.isRequired,
   isGroupOwnedRepo: PropTypes.bool.isRequired,
   userPerm: PropTypes.string,
@@ -184,7 +183,7 @@ class LibContentContainer extends React.Component {
               repoName={this.props.currentRepoInfo.repo_name}
               pathPrefix={this.props.pathPrefix}
               currentPath={this.props.path}
-              permission={this.props.repoPermission}
+              userPerm={this.props.userPerm}
               isViewFile={this.props.isViewFile}
               onTabNavClick={this.props.onTabNavClick}
               onPathClick={this.onPathClick}
@@ -245,7 +244,6 @@ class LibContentContainer extends React.Component {
                     path={this.props.path}
                     repoID={repoID}
                     currentRepoInfo={this.props.currentRepoInfo}
-                    repoPermission={this.props.repoPermission}
                     isGroupOwnedRepo={this.props.isGroupOwnedRepo}
                     userPerm={this.props.userPerm}
                     enableDirPrivateShare={this.props.enableDirPrivateShare}
@@ -277,7 +275,6 @@ class LibContentContainer extends React.Component {
                     path={this.props.path}
                     repoID={repoID}
                     currentRepoInfo={this.props.currentRepoInfo}
-                    repoPermission={this.props.repoPermission}
                     isGroupOwnedRepo={this.props.isGroupOwnedRepo}
                     userPerm={this.props.userPerm}
                     enableDirPrivateShare={this.props.enableDirPrivateShare}
diff --git a/frontend/src/pages/lib-content-view/lib-content-toolbar.js b/frontend/src/pages/lib-content-view/lib-content-toolbar.js
index 3a08a97b62..89ca036a87 100644
--- a/frontend/src/pages/lib-content-view/lib-content-toolbar.js
+++ b/frontend/src/pages/lib-content-view/lib-content-toolbar.js
@@ -6,6 +6,7 @@ import ViewModeToolbar from '../../components/toolbar/view-mode-toolbar';
 import DirOperationToolBar from '../../components/toolbar/dir-operation-toolbar';
 import MultipleDirOperationToolbar from '../../components/toolbar/multiple-dir-operation-toolbar';
 import ViewFileToolbar from '../../components/toolbar/view-file-toolbar';
+import { Utils } from '../../utils/utils';
 
 const propTypes = {
   isViewFile: PropTypes.bool.isRequired,
@@ -55,6 +56,9 @@ class LibContentToolbar extends React.Component {
 
   render() {
 
+    const { userPerm } = this.props;
+    const { isCustomPermission } = Utils.getUserPermission(userPerm);
+
     if (this.props.isViewFile) {
       return (
         <Fragment>
@@ -76,7 +80,7 @@ class LibContentToolbar extends React.Component {
               onRelatedFileChange={this.props.onRelatedFileChange}
               showShareBtn={this.props.showShareBtn}
             />
-            <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode}/>
+            <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} isCustomPermission={isCustomPermission} />
           </div>
           <CommonToolbar isLibView={true} repoID={this.props.repoID} repoName={this.props.repoName} onSearchedClick={this.props.onSearchedClick} searchPlaceholder={gettext('Search files in this library')}/>
         </Fragment>
diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index 37fa0eed95..c64ed4bb02 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -39,7 +39,6 @@ class LibContentView extends React.Component {
       hash: '',
       currentRepoInfo: null,
       repoName: '',
-      repoPermission: true,
       repoEncrypted: false,
       libNeedDecrypt: false,
       isGroupOwnedRepo: false,
@@ -124,35 +123,39 @@ class LibContentView extends React.Component {
     }
   }
 
-  componentDidMount() {
+  async componentDidMount() {
     // eg: http://127.0.0.1:8000/library/repo_id/repo_name/**/**/\
     let repoID = this.props.repoID;
     let location = window.location.href.split('#')[0];
     location = decodeURIComponent(location);
-    seafileAPI.getRepoInfo(repoID).then(res => {
-      let repoInfo = new RepoInfo(res.data);
-      let isGroupOwnedRepo = repoInfo.owner_email.indexOf('@seafile_group') > -1;
+    let path = location.slice(location.indexOf(repoID) + repoID.length + 1); // get the string after repoID
+    path = path.slice(path.indexOf('/')); // get current path
+
+    try {
+      const repoRes = await seafileAPI.getRepoInfo(repoID);
+      const repoInfo = new RepoInfo(repoRes.data);
+      const isGroupOwnedRepo = repoInfo.owner_email.indexOf('@seafile_group') > -1;
+
+      if (repoInfo.permission.startsWith('custom-')) {
+        const permissionID = repoInfo.permission.split('-')[1];
+        const permissionRes = await seafileAPI.getCustomPermission(repoID, permissionID);
+        window.custom_permission = permissionRes.data.permission;
+      }
+
+      this.isNeedUpdateHistoryState = false;
       this.setState({
         currentRepoInfo: repoInfo,
         repoName: repoInfo.repo_name,
         libNeedDecrypt: repoInfo.lib_need_decrypt,
         repoEncrypted: repoInfo.encrypted,
-        repoPermission: repoInfo.permission === 'rw',
         isGroupOwnedRepo: isGroupOwnedRepo,
+        path: path
       });
-
-      let repoID = repoInfo.repo_id;
-      let path = location.slice(location.indexOf(repoID) + repoID.length + 1); // get the string after repoID
-      path = path.slice(path.indexOf('/')); // get current path
-
-      this.isNeedUpdateHistoryState = false;
-
-      this.setState({path: path});
-
+      
       if (!repoInfo.lib_need_decrypt) {
         this.loadDirData(path);
       }
-    }).catch(error => {
+    } catch (error) {
       if (error.response) {
         if (error.response.status == 403) {
           this.setState({
@@ -174,7 +177,7 @@ class LibContentView extends React.Component {
           errorMsg: gettext('Please check the network.')
         });
       }
-    });
+    }
   }
 
   componentWillUnmount() {
@@ -1276,7 +1279,8 @@ class LibContentView extends React.Component {
         }
       }
     } else {
-      direntObject.permission = 'rw';
+      // use current dirent parent's permission as it's permission
+      direntObject.permission = this.state.userPerm;
       let dirent = new Dirent(direntObject);
       if (this.state.currentMode === 'column') {
         this.addNodeToTree(dirent.name, this.state.path, dirent.type);
@@ -1627,8 +1631,10 @@ class LibContentView extends React.Component {
   }
 
   createDirent(name, type, size) {
+    // use current dirent parent's permission as it's permission
+    const { userPerm: permission } = this.state;
     let mtime = new Date().getTime()/1000;
-    let dirent = new Dirent({name, type, mtime, size});
+    let dirent = new Dirent({name, type, mtime, size, permission});
     return dirent;
   }
 
@@ -1795,6 +1801,13 @@ class LibContentView extends React.Component {
       return index < this.state.itemsShowLength;
     });
 
+    let canUpload = true;
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
+    if (isCustomPermission) {
+      const { upload } = customPermission.permission;
+      canUpload = upload;
+    }
+
     return (
       <Fragment>
         <div className="main-panel o-hidden">
@@ -1849,7 +1862,6 @@ class LibContentView extends React.Component {
               pathExist={this.state.pathExist}
               currentRepoInfo={this.state.currentRepoInfo}
               repoID={this.props.repoID}
-              repoPermission={this.state.repoPermission}
               enableDirPrivateShare={enableDirPrivateShare}
               userPerm={userPerm}
               isGroupOwnedRepo={this.state.isGroupOwnedRepo}
@@ -1917,7 +1929,7 @@ class LibContentView extends React.Component {
               updateDetail={this.state.updateDetail}
               onListContainerScroll={this.onListContainerScroll}
             />
-            {this.state.pathExist && !this.state.isViewFile && (
+            {canUpload && this.state.pathExist && !this.state.isViewFile && (
               <FileUploader
                 ref={uploader => this.uploader = uploader}
                 dragAndDrop={true}
@@ -1925,6 +1937,7 @@ class LibContentView extends React.Component {
                 repoID={this.props.repoID}
                 direntList={this.state.direntList}
                 onFileUploadSuccess={this.onFileUploadSuccess}
+                isCustomPermission={isCustomPermission}
               />
             )}
           </div>
diff --git a/frontend/src/pages/share-admin/folders.js b/frontend/src/pages/share-admin/folders.js
index 34fc71f725..9d55c38a5e 100644
--- a/frontend/src/pages/share-admin/folders.js
+++ b/frontend/src/pages/share-admin/folders.js
@@ -188,6 +188,10 @@ class Item extends Component {
     });
     let folderUrl = `${siteRoot}library/${item.repo_id}/${encodeURIComponent(item.repo_name)}${Utils.encodePath(item.path)}`;
 
+    // custom defined permission
+    if (share_permission.startsWith('custom-')) {
+      share_permission = share_permission.slice(7);
+    }
     const desktopItem = (
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
@@ -198,6 +202,7 @@ class Item extends Component {
         </td>
         <td>
           <SharePermissionEditor
+            repoID={item.repo_id}
             isTextMode={true}
             isEditIconShow={isOpIconShown}
             currentPermission={share_permission}
@@ -238,14 +243,15 @@ class Item extends Component {
             </Dropdown>
           </td>
         </tr>
-        {isPermSelectDialogOpen &&
-        <PermSelect
-          currentPerm={share_permission}
-          permissions={this.permissions}
-          changePerm={this.changePerm}
-          toggleDialog={this.togglePermSelectDialog}
-        />
-        }
+        {isPermSelectDialogOpen &&(
+          <PermSelect
+            repoID={item.repo_id}
+            currentPerm={share_permission}
+            permissions={this.permissions}
+            changePerm={this.changePerm}
+            toggleDialog={this.togglePermSelectDialog}
+          />
+        )}
       </Fragment>
     );
 
diff --git a/frontend/src/pages/share-admin/libraries.js b/frontend/src/pages/share-admin/libraries.js
index 9fa6856219..570c6bce6c 100644
--- a/frontend/src/pages/share-admin/libraries.js
+++ b/frontend/src/pages/share-admin/libraries.js
@@ -202,6 +202,11 @@ class Item extends Component {
       share_permission = 'admin';
     }
 
+    // custom defined permission
+    if (share_permission.startsWith('custom-')) {
+      share_permission = share_permission.slice(7);
+    }
+
     const desktopItem = (
       <tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
         <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
@@ -211,6 +216,7 @@ class Item extends Component {
         </td>
         <td>
           <SharePermissionEditor
+            repoID={item.repo_id}
             isTextMode={true}
             isEditIconShow={this.state.isOpIconShown}
             currentPermission={share_permission}
@@ -251,14 +257,15 @@ class Item extends Component {
             </Dropdown>
           </td>
         </tr>
-        {isPermSelectDialogOpen &&
-        <PermSelect
-          currentPerm={share_permission}
-          permissions={this.permissions}
-          changePerm={this.changePerm}
-          toggleDialog={this.togglePermSelectDialog}
-        />
-        }
+        {isPermSelectDialogOpen && (
+          <PermSelect
+            repoID={item.repo_id}
+            currentPerm={share_permission}
+            permissions={this.permissions}
+            changePerm={this.changePerm}
+            toggleDialog={this.togglePermSelectDialog}
+          />
+        )}
       </Fragment>
     );
 
diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js
index 25ff7edda8..ca99c48456 100644
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -121,10 +121,17 @@ export const Utils = {
 
   getShareLinkPermissionList: function(itemType, permission, path, canEdit) {
     // itemType: library, dir, file
-    // permission: rw, r, admin, cloud-edit, preview
+    // permission: rw, r, admin, cloud-edit, preview, custom-*
 
     let permissionOptions = [];
 
+    const { isCustomPermission } = Utils.getUserPermission(permission);
+    if (isCustomPermission) {
+      permissionOptions.push('preview_download');
+      permissionOptions.push('preview_only');
+      return permissionOptions;
+    }
+
     if (permission == 'rw' || permission == 'admin' || permission == 'r') {
       permissionOptions.push('preview_download');
     }
@@ -454,9 +461,14 @@ export const Utils = {
     let list = [];
     const { SHARE, DOWNLOAD, DELETE, RENAME, MOVE, COPY, PERMISSION, OPEN_VIA_CLIENT } = TextTranslation;
     const permission = dirent.permission;
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(permission);
 
     if (isContextmenu) {
       if (permission == 'rw' || permission == 'r') {
+          list.push(DOWNLOAD);
+      }
+
+      if (isCustomPermission && customPermission.permission.download) {
         list.push(DOWNLOAD);
       }
 
@@ -467,10 +479,29 @@ export const Utils = {
       if (permission == 'rw') {
         list.push(DELETE, 'Divider');
       }
+      
+      if (isCustomPermission && customPermission.permission.delete) {
+        list.push(DELETE, 'Divider');
+      }
+    }
+
+    if (permission == 'rw') {
+      list.push(RENAME, MOVE);
+    }
+    
+    if (isCustomPermission && customPermission.permission.modify) {
+      list.push(RENAME, MOVE);
+    }
+
+    if (permission == 'rw') {
+      list.push(COPY);
+    }
+    
+    if (isCustomPermission && customPermission.permission.copy) {
+      list.push(COPY);
     }
 
     if (permission == 'rw') {
-      list.push(RENAME, MOVE, COPY);
       if (folderPermEnabled  && ((isRepoOwner && currentRepoInfo.has_been_shared_out) || currentRepoInfo.is_admin)) {
         list.push('Divider', PERMISSION);
       }
@@ -481,6 +512,11 @@ export const Utils = {
       list.push(COPY);
     }
 
+    // if the last item of menuList is ‘Divider’, delete the last item
+    if (list[list.length - 1] === 'Divider') {
+      list.pop();
+    }
+
     return list;
   },
 
@@ -489,11 +525,16 @@ export const Utils = {
     const { SHARE, DOWNLOAD, DELETE, RENAME, MOVE, COPY, TAGS, UNLOCK, LOCK,
       COMMENT, HISTORY, ACCESS_LOG, OPEN_VIA_CLIENT } = TextTranslation;
     const permission = dirent.permission;
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(permission);
 
     if (isContextmenu) {
       if (permission == 'rw' || permission == 'r') {
         list.push(DOWNLOAD);
       }
+      
+      if (isCustomPermission && customPermission.permission.download) {
+        list.push(DOWNLOAD);
+      }
 
       if (Utils.isHasPermissionToShare(currentRepoInfo, permission, dirent)) {
         list.push(SHARE);
@@ -503,17 +544,41 @@ export const Utils = {
         if (!dirent.is_locked || (dirent.is_locked && dirent.locked_by_me)) {
           list.push(DELETE);
         }
+        list.push('Divider');
+      }
+      
+      if (isCustomPermission && customPermission.permission.delete) {
+        if (!dirent.is_locked || (dirent.is_locked && dirent.locked_by_me)) {
+          list.push(DELETE);
+        }
+        list.push('Divider');
       }
-
-      list.push('Divider');
     }
 
     if (permission == 'rw') {
       if (!dirent.is_locked || (dirent.is_locked && dirent.locked_by_me)) {
         list.push(RENAME, MOVE);
       }
-      list.push(COPY, TAGS);
+    }
+    
+    if (isCustomPermission && customPermission.permission.modify) {
+      if (!dirent.is_locked || (dirent.is_locked && dirent.locked_by_me)) {
+        list.push(RENAME, MOVE);
+      }
+    }
 
+    if (permission == 'rw') {
+      list.push(COPY);
+    }
+
+    if (isCustomPermission) {
+      if (customPermission.permission.copy) {
+        list.push(COPY);
+      }
+    }
+
+    if (permission == 'rw') {
+      list.push(TAGS);
       if (isPro) {
         if (dirent.is_locked) {
           if (dirent.locked_by_me || dirent.lock_owner == 'OnlineOffice' || isRepoOwner || currentRepoInfo.is_admin) {
@@ -545,6 +610,11 @@ export const Utils = {
       list.push(HISTORY);
     }
 
+    // if the last item of menuList is ‘Divider’, delete the last item
+    if (list[list.length - 1] === 'Divider') {
+      list.pop();
+    }
+
     return list;
   },
 
@@ -1269,6 +1339,12 @@ export const Utils = {
    */
   isHasPermissionToShare: function(repoInfo, userDirPermission, dirent) {
 
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(userDirPermission);
+    if (isCustomPermission) {
+      const { download_external_link } = customPermission.permission;
+      return download_external_link;
+    }
+
     let { is_admin: isAdmin, is_virtual: isVirtual, encrypted: repoEncrypted, owner_email: ownerEmail } = repoInfo;
     let isRepoOwner = ownerEmail === username;
 
@@ -1381,5 +1457,35 @@ export const Utils = {
     }
     return level;
   },
+  
+  getSharedPermission(item) {
+    let permission = item.permission;
+    if (item.is_admin) {
+      permission = 'admin';
+    }
+    if (item.permission.startsWith('custom-')) {
+      permission = item.permission.slice(7);
+    }
+    return permission;
+  },
+
+  getUserPermission(userPerm) {
+    const { custom_permission } = window;
+    const common_permissions = ['rw', 'r', 'admin', 'cloud-edit', 'preview'];
+    // visit the shared repo(virtual repo) by custom permission 
+    if (!custom_permission || common_permissions.indexOf(userPerm) > -1) {
+      return { isCustomPermission: false };
+    } 
+    // userPerm is startsWith 'custom-'
+    if (custom_permission) {
+      const permissionId = custom_permission.id;
+      const userPermId = parseInt(userPerm.split('-')[1]);
+      if (permissionId === userPermId) {
+        return { isCustomPermission: true, customPermission: custom_permission };
+      }
+      // TODO user set custom permission on folder
+    }
+    return { isCustomPermission: false }; 
+  }
 
 };
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index 3c06b7aa03..642abf4075 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -146,6 +146,11 @@ a:hover { color:#eb8205; }
   margin: 0;
 }
 
+.sf-link {
+    color: #ee8204 !important;
+    cursor: pointer;
+}
+
 .vh {
     visibility: hidden;
 }
diff --git a/seahub/api2/endpoints/admin/group_owned_libraries.py b/seahub/api2/endpoints/admin/group_owned_libraries.py
index 23d556a9af..424f98b36f 100644
--- a/seahub/api2/endpoints/admin/group_owned_libraries.py
+++ b/seahub/api2/endpoints/admin/group_owned_libraries.py
@@ -20,6 +20,7 @@ from seahub.utils import is_valid_dirent_name, is_org_context, \
         is_pro_version
 from seahub.utils.repo import get_library_storages, get_repo_owner, get_available_repo_perms
 from seahub.utils.timeutils import timestamp_to_isoformat_timestr
+from seahub.share.utils import normalize_custom_permission_name
 from seahub.share.signals import share_repo_to_group_successful
 from seahub.constants import PERMISSION_READ, PERMISSION_READ_WRITE
 
@@ -69,8 +70,10 @@ class AdminGroupOwnedLibraries(APIView):
 
         permission = request.data.get('permission', PERMISSION_READ_WRITE)
         if permission not in get_available_repo_perms():
-            error_msg = 'permission invalid.'
-            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+            permission = normalize_custom_permission_name(permission)
+            if not permission:
+                error_msg = 'permission invalid.'
+                return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
         # permission check
         group_quota = seafile_api.get_group_quota(group_id)
diff --git a/seahub/api2/endpoints/admin/shares.py b/seahub/api2/endpoints/admin/shares.py
index be69094c68..6056d4bc12 100644
--- a/seahub/api2/endpoints/admin/shares.py
+++ b/seahub/api2/endpoints/admin/shares.py
@@ -17,7 +17,7 @@ from seahub.share.models import ExtraSharePermission, ExtraGroupsSharePermission
 from seahub.share.utils import update_user_dir_permission, \
         update_group_dir_permission, share_dir_to_user, share_dir_to_group, \
         has_shared_to_user, has_shared_to_group, check_user_share_out_permission, \
-        check_group_share_out_permission
+        check_group_share_out_permission, normalize_custom_permission_name
 from seahub.share.signals import share_repo_to_user_successful, share_repo_to_group_successful
 
 from seahub.base.accounts import User
@@ -162,8 +162,10 @@ class AdminShares(APIView):
         # argument check
         permission = request.data.get('permission', None)
         if not permission or permission not in get_available_repo_perms():
-            error_msg = 'permission invalid.'
-            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+            permission = normalize_custom_permission_name(permission)
+            if not permission:
+                error_msg = 'permission invalid.'
+                return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
         result = {}
         result['failed'] = []
@@ -309,8 +311,10 @@ class AdminShares(APIView):
         # argument check
         permission = request.data.get('permission', None)
         if not permission or permission not in get_available_repo_perms():
-            error_msg = 'permission invalid.'
-            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+            permission = normalize_custom_permission_name(permission)
+            if not permission:
+                error_msg = 'permission invalid.'
+                return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
         share_info = {}
         share_info['repo_id'] = repo.repo_id
diff --git a/seahub/api2/endpoints/custom_share_permissions.py b/seahub/api2/endpoints/custom_share_permissions.py
new file mode 100644
index 0000000000..df08d24572
--- /dev/null
+++ b/seahub/api2/endpoints/custom_share_permissions.py
@@ -0,0 +1,202 @@
+# -*- coding: utf-8 -*-
+import logging
+
+from rest_framework import status
+from rest_framework.views import APIView
+from rest_framework.response import Response
+from rest_framework.permissions import IsAuthenticated
+from rest_framework.authentication import SessionAuthentication
+
+from seaserv import seafile_api
+
+from seahub.api2.authentication import TokenAuthentication
+from seahub.api2.throttling import UserRateThrottle
+from seahub.api2.utils import api_error
+from seahub.share.utils import is_repo_admin
+from seahub.share.models import CustomSharePermissions
+from seahub.views import check_folder_permission
+
+logger = logging.getLogger(__name__)
+
+
+class CustomSharePermissionsView(APIView):
+    authentication_classes = (TokenAuthentication, SessionAuthentication)
+    permission_classes = (IsAuthenticated,)
+    throttle_classes = (UserRateThrottle,)
+
+    def get(self, request, repo_id):
+        """List custom share permissions
+        """
+        # permission check
+        if not check_folder_permission(request, repo_id, '/'):
+            return api_error(status.HTTP_403_FORBIDDEN, 'Permission denied.')
+
+        # resource check
+        repo = seafile_api.get_repo(repo_id)
+        if not repo:
+            error_msg = 'Library %s not found.' % repo_id
+            return api_error(status.HTTP_404_NOT_FOUND, error_msg)
+
+        # main
+        try:
+            permission_query = CustomSharePermissions.objects.get_permissions_by_repo_id(repo_id)
+            permission_list = [item.to_dict() for item in permission_query]
+        except Exception as e:
+            logger.error(e)
+            error_msg = 'Internal Server Error'
+            return api_error(status.HTTP_500_INTERNAL_SERVER_ERROR, error_msg)
+
+        return Response({'permission_list': permission_list})
+
+    def post(self, request, repo_id):
+        """Add a custom share permission
+        """
+        username = request.user.username
+        # argument check
+        permission = request.data.get('permission', None)
+        if not permission:
+            error_msg = 'permission invalid.'
+            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+        permission_name = request.data.get('permission_name', None)
+        if not permission_name:
+            error_msg = 'permission_name invalid.'
+            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+        description = request.data.get('description', '')
+
+        # permission check
+        if not is_repo_admin(username, repo_id):
+            return api_error(status.HTTP_403_FORBIDDEN, 'Permission denied.')
+
+        # resource check
+        repo = seafile_api.get_repo(repo_id)
+        if not repo:
+            error_msg = 'Library %s not found.' % repo_id
+            return api_error(status.HTTP_404_NOT_FOUND, error_msg)
+
+        # main
+        try:
+            permission_obj = CustomSharePermissions.objects.add_permission(
+                repo_id, permission_name, description, permission)
+            res = permission_obj.to_dict()
+        except Exception as e:
+            logger.error(e)
+            error_msg = 'Internal Server Error'
+            return api_error(status.HTTP_500_INTERNAL_SERVER_ERROR, error_msg)
+
+        return Response({'permission': res})
+
+
+class CustomSharePermissionView(APIView):
+    authentication_classes = (TokenAuthentication, SessionAuthentication)
+    permission_classes = (IsAuthenticated,)
+    throttle_classes = (UserRateThrottle,)
+
+    def get(self, request, repo_id, permission_id):
+        """get a custom share permission
+        """
+        # permission check
+        if not check_folder_permission(request, repo_id, '/'):
+            return api_error(status.HTTP_403_FORBIDDEN, 'Permission denied.')
+
+        # resource check
+        repo = seafile_api.get_repo(repo_id)
+        if not repo:
+            error_msg = 'Library %s not found.' % repo_id
+            return api_error(status.HTTP_404_NOT_FOUND, error_msg)
+
+        # main
+        try:
+            permission_obj = CustomSharePermissions.objects.get(id=permission_id)
+            if not permission_obj:
+                return api_error(status.HTTP_404_NOT_FOUND, 'Permission %s not found.' % permission_id)
+            res = permission_obj.to_dict()
+        except Exception as e:
+            logger.error(e)
+            error_msg = 'Internal Server Error'
+            return api_error(status.HTTP_500_INTERNAL_SERVER_ERROR, error_msg)
+
+        return Response({'permission': res})
+
+    def put(self, request, repo_id, permission_id):
+        """Update a custom share permission
+        """
+        username = request.user.username
+        # argument check
+        permission = request.data.get('permission', None)
+        if not permission:
+            error_msg = 'permission invalid.'
+            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+        permission_name = request.data.get('permission_name', None)
+        if not permission_name:
+            error_msg = 'permission_name invalid.'
+            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+        description = request.data.get('description', '')
+
+        # permission check
+        if not is_repo_admin(username, repo_id):
+            return api_error(status.HTTP_403_FORBIDDEN, 'Permission denied.')
+
+        # resource check
+        repo = seafile_api.get_repo(repo_id)
+        if not repo:
+            error_msg = 'Library %s not found.' % repo_id
+            return api_error(status.HTTP_404_NOT_FOUND, error_msg)
+
+        try:
+            permission_obj = CustomSharePermissions.objects.get(id=permission_id)
+            if not permission_obj:
+                return api_error(status.HTTP_404_NOT_FOUND, 'Permission %s not found.' % permission_id)
+        except Exception as e:
+            logger.error(e)
+            error_msg = 'Internal Server Error'
+            return api_error(status.HTTP_500_INTERNAL_SERVER_ERROR, error_msg)
+
+        # main
+        try:
+            permission_obj.name = permission_name
+            permission_obj.description = description
+            permission_obj.permission = permission
+            permission_obj.save()
+            res = permission_obj.to_dict()
+        except Exception as e:
+            logger.error(e)
+            error_msg = 'Internal Server Error'
+            return api_error(status.HTTP_500_INTERNAL_SERVER_ERROR, error_msg)
+
+        return Response({'permission': res})
+
+    def delete(self, request, repo_id, permission_id):
+        """Delete a custom share permission
+        """
+        username = request.user.username
+        # permission check
+        if not is_repo_admin(username, repo_id):
+            return api_error(status.HTTP_403_FORBIDDEN, 'Permission denied.')
+
+        # resource check
+        repo = seafile_api.get_repo(repo_id)
+        if not repo:
+            error_msg = 'Library %s not found.' % repo_id
+            return api_error(status.HTTP_404_NOT_FOUND, error_msg)
+
+        try:
+            permission_obj = CustomSharePermissions.objects.get(id=permission_id)
+        except Exception as e:
+            logger.error(e)
+            error_msg = 'Internal Server Error'
+            return api_error(status.HTTP_500_INTERNAL_SERVER_ERROR, error_msg)
+        if not permission_obj:
+            return api_error(status.HTTP_404_NOT_FOUND, 'custom permission %s not found.' % permission_id)
+
+        # main
+        try:
+            permission_obj = CustomSharePermissions.objects.get(id=permission_id)
+            if not permission_obj:
+                return api_error(status.HTTP_404_NOT_FOUND, 'Permission %s not found.' % permission_id)
+            permission_obj.delete()
+        except Exception as e:
+            logger.error(e)
+            error_msg = 'Internal Server Error'
+            return api_error(status.HTTP_500_INTERNAL_SERVER_ERROR, error_msg)
+
+        return Response({'success': True})
diff --git a/seahub/api2/endpoints/dir.py b/seahub/api2/endpoints/dir.py
index 15e49c3a56..b336f52168 100644
--- a/seahub/api2/endpoints/dir.py
+++ b/seahub/api2/endpoints/dir.py
@@ -26,6 +26,7 @@ from seahub.utils.file_types import IMAGE, VIDEO, XMIND
 from seahub.base.models import UserStarredFiles
 from seahub.base.templatetags.seahub_tags import email2nickname, \
         email2contact_email
+from seahub.utils.repo import parse_repo_perm
 
 from seahub.settings import ENABLE_VIDEO_THUMBNAIL, THUMBNAIL_ROOT
 
@@ -413,7 +414,7 @@ class DirView(APIView):
                 return api_error(status.HTTP_404_NOT_FOUND, error_msg)
 
             # permission check
-            if check_folder_permission(request, repo_id, path) != 'rw':
+            if parse_repo_perm(check_folder_permission(request, repo_id, path)).can_edit_on_web is False:
                 error_msg = 'Permission denied.'
                 return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
@@ -504,7 +505,7 @@ class DirView(APIView):
             return api_error(status.HTTP_404_NOT_FOUND, error_msg)
 
         # permission check
-        if check_folder_permission(request, repo_id, path) != 'rw':
+        if parse_repo_perm(check_folder_permission(request, repo_id, path)).can_delete is False:
             error_msg = 'Permission denied.'
             return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
diff --git a/seahub/api2/endpoints/dir_shared_items.py b/seahub/api2/endpoints/dir_shared_items.py
index 01ccadd4c8..dba1bcfa64 100644
--- a/seahub/api2/endpoints/dir_shared_items.py
+++ b/seahub/api2/endpoints/dir_shared_items.py
@@ -29,7 +29,7 @@ from seahub.share.models import ExtraSharePermission, ExtraGroupsSharePermission
 from seahub.share.utils import is_repo_admin, share_dir_to_user, \
         share_dir_to_group, update_user_dir_permission, \
         update_group_dir_permission, check_user_share_out_permission, \
-        check_group_share_out_permission
+        check_group_share_out_permission, normalize_custom_permission_name
 from seahub.utils import (is_org_context, is_valid_username,
                           send_perm_audit_msg)
 from seahub.share.signals import share_repo_to_user_successful, share_repo_to_group_successful
@@ -230,7 +230,9 @@ class DirSharedItemsEndpoint(APIView):
 
         permission = request.data.get('permission', PERMISSION_READ)
         if permission not in get_available_repo_perms():
-            return api_error(status.HTTP_400_BAD_REQUEST, 'permission invalid.')
+            permission = normalize_custom_permission_name(permission)
+            if not permission:
+                return api_error(status.HTTP_400_BAD_REQUEST, 'permission invalid.')
 
         repo_owner = self.get_repo_owner(request, repo_id)
         if repo_owner != username and not is_repo_admin(username, repo_id):
@@ -311,7 +313,9 @@ class DirSharedItemsEndpoint(APIView):
 
         permission = request.data.get('permission', PERMISSION_READ)
         if permission not in get_available_repo_perms():
-            return api_error(status.HTTP_400_BAD_REQUEST, 'permission invalid.')
+            permission = normalize_custom_permission_name(permission)
+            if not permission:
+                return api_error(status.HTTP_400_BAD_REQUEST, 'permission invalid.')
 
         result = {}
         result['failed'] = []
diff --git a/seahub/api2/endpoints/file.py b/seahub/api2/endpoints/file.py
index 976f7d44d7..69508cd769 100644
--- a/seahub/api2/endpoints/file.py
+++ b/seahub/api2/endpoints/file.py
@@ -176,7 +176,7 @@ class FileView(APIView):
                 return api_error(status.HTTP_404_NOT_FOUND, error_msg)
 
             # permission check
-            if check_folder_permission(request, repo_id, parent_dir) != PERMISSION_READ_WRITE:
+            if parse_repo_perm(check_folder_permission(request, repo_id, parent_dir)).can_edit_on_web is False:
                 error_msg = 'Permission denied.'
                 return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
@@ -278,7 +278,7 @@ class FileView(APIView):
                 return api_error(status.HTTP_404_NOT_FOUND, error_msg)
 
             # permission check
-            if check_folder_permission(request, repo_id, parent_dir) != PERMISSION_READ_WRITE:
+            if parse_repo_perm(check_folder_permission(request, repo_id, parent_dir)).can_edit_on_web is False:
                 error_msg = 'Permission denied.'
                 return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
@@ -677,7 +677,7 @@ class FileView(APIView):
         parent_dir = os.path.dirname(path)
 
         username = request.user.username
-        if check_folder_permission(request, repo_id, parent_dir) != PERMISSION_READ_WRITE:
+        if parse_repo_perm(check_folder_permission(request, repo_id, parent_dir)).can_delete is False:
             error_msg = 'Permission denied.'
             return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
diff --git a/seahub/api2/endpoints/group_libraries.py b/seahub/api2/endpoints/group_libraries.py
index e2f932a203..04142d1ff0 100644
--- a/seahub/api2/endpoints/group_libraries.py
+++ b/seahub/api2/endpoints/group_libraries.py
@@ -28,7 +28,7 @@ from seahub.utils.repo import get_repo_owner, get_available_repo_perms
 from seahub.share.models import ExtraGroupsSharePermission
 from seahub.share.signals import share_repo_to_group_successful
 from seahub.share.utils import is_repo_admin, check_group_share_in_permission, \
-        share_dir_to_group
+        share_dir_to_group, normalize_custom_permission_name
 from seahub.constants import PERMISSION_READ
 from seahub.base.models import UserStarredFiles
 from seahub.base.templatetags.seahub_tags import email2nickname, \
@@ -181,8 +181,10 @@ class GroupLibraries(APIView):
 
         permission = request.data.get('permission', PERMISSION_READ)
         if permission not in get_available_repo_perms():
-            error_msg = 'permission invalid.'
-            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+            permission = normalize_custom_permission_name(permission)
+            if not permission:
+                error_msg = 'permission invalid.'
+                return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
         # permission check
         if not request.user.permissions.can_add_repo():
diff --git a/seahub/api2/endpoints/group_owned_libraries.py b/seahub/api2/endpoints/group_owned_libraries.py
index 192b718453..9bd8ee720d 100644
--- a/seahub/api2/endpoints/group_owned_libraries.py
+++ b/seahub/api2/endpoints/group_owned_libraries.py
@@ -37,7 +37,8 @@ from seahub.utils.rpc import SeafileAPI
 from seahub.share.signals import share_repo_to_user_successful, share_repo_to_group_successful
 from seahub.share.utils import share_dir_to_user, share_dir_to_group, update_user_dir_permission, \
         check_user_share_out_permission, update_group_dir_permission, \
-        check_group_share_out_permission, check_user_share_in_permission
+        check_group_share_out_permission, check_user_share_in_permission, \
+        normalize_custom_permission_name
 from seahub.constants import PERMISSION_READ, PERMISSION_READ_WRITE
 from seahub.views import check_folder_permission
 
@@ -316,8 +317,10 @@ class GroupOwnedLibraryUserFolderPermission(APIView):
 
         perm = request.data.get('permission', None)
         if not perm or perm not in get_available_repo_perms():
-            error_msg = 'permission invalid.'
-            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+            perm = normalize_custom_permission_name(perm)
+            if not perm:
+                error_msg = 'permission invalid.'
+                return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
         # resource check
         repo = seafile_api.get_repo(repo_id)
@@ -409,8 +412,10 @@ class GroupOwnedLibraryUserFolderPermission(APIView):
 
         perm = request.data.get('permission', None)
         if not perm or perm not in get_available_repo_perms():
-            error_msg = 'permission invalid.'
-            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+            perm = normalize_custom_permission_name(perm)
+            if not perm:
+                error_msg = 'permission invalid.'
+                return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
         # resource check
         repo = seafile_api.get_repo(repo_id)
@@ -589,8 +594,10 @@ class GroupOwnedLibraryGroupFolderPermission(APIView):
 
         perm = request.data.get('permission', None)
         if not perm or perm not in get_available_repo_perms():
-            error_msg = 'permission invalid.'
-            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+            perm = normalize_custom_permission_name(perm)
+            if not perm:
+                error_msg = 'permission invalid.'
+                return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
         # resource check
         repo = seafile_api.get_repo(repo_id)
@@ -677,8 +684,10 @@ class GroupOwnedLibraryGroupFolderPermission(APIView):
 
         perm = request.data.get('permission', None)
         if not perm or perm not in get_available_repo_perms():
-            error_msg = 'permission invalid.'
-            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+            perm = normalize_custom_permission_name(perm)
+            if not perm:
+                error_msg = 'permission invalid.'
+                return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
         group_id = request.data.get('group_id')
         if not group_id:
diff --git a/seahub/api2/endpoints/repos_batch.py b/seahub/api2/endpoints/repos_batch.py
index 35dc416bea..a540f95183 100644
--- a/seahub/api2/endpoints/repos_batch.py
+++ b/seahub/api2/endpoints/repos_batch.py
@@ -21,7 +21,8 @@ from seahub.api2.views import HTTP_443_ABOVE_QUOTA
 from seahub.group.utils import is_group_member
 from seahub.base.accounts import User
 from seahub.share.utils import is_repo_admin, \
-        check_user_share_out_permission, check_group_share_out_permission
+        check_user_share_out_permission, check_group_share_out_permission, \
+        normalize_custom_permission_name
 from seahub.share.models import ExtraSharePermission, ExtraGroupsSharePermission
 from seahub.share.signals import share_repo_to_user_successful, \
         share_repo_to_group_successful
@@ -148,8 +149,10 @@ class ReposBatchView(APIView):
 
             permission = request.data.get('permission', 'rw')
             if permission not in get_available_repo_perms():
-                error_msg = 'permission invalid.'
-                return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+                permission = normalize_custom_permission_name(permission)
+                if not permission:
+                    error_msg = 'permission invalid.'
+                    return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
             # share repo to user
             if share_type == 'user':
@@ -1118,16 +1121,14 @@ class ReposAsyncBatchCopyItemView(APIView):
             return api_error(status.HTTP_404_NOT_FOUND, error_msg)
 
         # permission check
-        # 1. User must has `r/rw` permission for src parent dir.
-        src_parent_permission = check_folder_permission(request, src_repo_id, src_parent_dir)
-        if src_parent_permission not in (PERMISSION_READ_WRITE,
-                PERMISSION_READ):
+        # 1. User must has `r/rw` or `copy` permission for src parent dir.
+        if parse_repo_perm(check_folder_permission(request, src_repo_id, src_parent_dir)).can_copy is False:
             error_msg = 'Permission denied.'
             return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
         # 2. User must has `rw` permission for dst parent dir.
         dst_parent_permission = check_folder_permission(request, dst_repo_id, dst_parent_dir)
-        if dst_parent_permission != PERMISSION_READ_WRITE:
+        if parse_repo_perm(dst_parent_permission).can_edit_on_web is False:
             error_msg = 'Permission denied.'
             return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
@@ -1220,13 +1221,13 @@ class ReposAsyncBatchMoveItemView(APIView):
             return api_error(status.HTTP_404_NOT_FOUND, error_msg)
 
         # permission check
-        # 1. User must has `rw` permission for src parent dir.
-        if check_folder_permission(request, src_repo_id, src_parent_dir) != PERMISSION_READ_WRITE:
+        # 1. User must has `rw` or `modify` permission for src parent dir.
+        if parse_repo_perm(check_folder_permission(request, src_repo_id, src_parent_dir)).can_edit_on_web is False:
             error_msg = 'Permission denied.'
             return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
-        # 2. User must has `rw` permission for dst parent dir.
-        if check_folder_permission(request, dst_repo_id, dst_parent_dir) != PERMISSION_READ_WRITE:
+        # 2. User must has `rw` or `modify` permission for dst parent dir.
+        if parse_repo_perm(check_folder_permission(request, dst_repo_id, dst_parent_dir)).can_edit_on_web is False:
             error_msg = 'Permission denied.'
             return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
@@ -1245,7 +1246,7 @@ class ReposAsyncBatchMoveItemView(APIView):
                 src_repo_id, src_parent_dir)
         for dirent in src_dirents:
             if dirent in list(folder_permission_dict.keys()) and \
-                    folder_permission_dict[dirent] != 'rw':
+                    parse_repo_perm(folder_permission_dict[dirent]).can_edit_on_web is False:
                 error_msg = _("Can't move folder %s, please check its permission.") % dirent
                 return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
@@ -1337,16 +1338,14 @@ class ReposSyncBatchCopyItemView(APIView):
             return api_error(status.HTTP_404_NOT_FOUND, error_msg)
 
         # permission check
-        # 1. User must has `r/rw` permission for src parent dir.
-        src_parent_permission = check_folder_permission(request, src_repo_id, src_parent_dir)
-        if src_parent_permission not in (PERMISSION_READ_WRITE,
-                PERMISSION_READ):
+        # 1. User must has `r/rw` or `copy` permission for src parent dir.
+        if parse_repo_perm(check_folder_permission(request, src_repo_id, src_parent_dir)).can_copy is False:
             error_msg = 'Permission denied.'
             return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
         # 2. User must has `rw` permission for dst parent dir.
         dst_parent_permission = check_folder_permission(request, dst_repo_id, dst_parent_dir)
-        if dst_parent_permission != PERMISSION_READ_WRITE:
+        if parse_repo_perm(dst_parent_permission).can_edit_on_web is False:
             error_msg = 'Permission denied.'
             return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
@@ -1439,13 +1438,13 @@ class ReposSyncBatchMoveItemView(APIView):
             return api_error(status.HTTP_404_NOT_FOUND, error_msg)
 
         # permission check
-        # 1. User must has `rw` permission for src parent dir.
-        if check_folder_permission(request, src_repo_id, src_parent_dir) != PERMISSION_READ_WRITE:
+        # 1. User must has `rw` or `modify` permission for src parent dir.
+        if parse_repo_perm(check_folder_permission(request, src_repo_id, src_parent_dir)).can_edit_on_web is False:
             error_msg = 'Permission denied.'
             return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
-        # 2. User must has `rw` permission for dst parent dir.
-        if check_folder_permission(request, dst_repo_id, dst_parent_dir) != PERMISSION_READ_WRITE:
+        # 2. User must has `rw` or `modify` permission for dst parent dir.
+        if parse_repo_perm(check_folder_permission(request, dst_repo_id, dst_parent_dir)).can_edit_on_web is False:
             error_msg = 'Permission denied.'
             return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
@@ -1464,7 +1463,7 @@ class ReposSyncBatchMoveItemView(APIView):
                 src_repo_id, src_parent_dir)
         for dirent in src_dirents:
             if dirent in list(folder_permission_dict.keys()) and \
-                    folder_permission_dict[dirent] != 'rw':
+                    parse_repo_perm(folder_permission_dict[dirent]).can_edit_on_web is False:
                 error_msg = _("Can't move folder %s, please check its permission.") % dirent
                 return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
@@ -1534,7 +1533,7 @@ class ReposBatchDeleteItemView(APIView):
 
         # permission check
         # User must has `rw` permission for parent dir.
-        if check_folder_permission(request, repo_id, parent_dir) != PERMISSION_READ_WRITE:
+        if parse_repo_perm(check_folder_permission(request, repo_id, parent_dir)).can_delete is False:
             error_msg = 'Permission denied.'
             return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
diff --git a/seahub/api2/endpoints/shared_repos.py b/seahub/api2/endpoints/shared_repos.py
index 2bcb0bc4fb..69a40e59d0 100644
--- a/seahub/api2/endpoints/shared_repos.py
+++ b/seahub/api2/endpoints/shared_repos.py
@@ -19,7 +19,8 @@ from seahub.utils.repo import get_available_repo_perms
 from seahub.base.templatetags.seahub_tags import email2nickname, email2contact_email
 from seahub.share.models import ExtraSharePermission, ExtraGroupsSharePermission
 from seahub.share.utils import update_user_dir_permission, update_group_dir_permission,\
-        check_user_share_out_permission, check_group_share_out_permission
+        check_user_share_out_permission, check_group_share_out_permission, \
+        normalize_custom_permission_name
 
 logger = logging.getLogger(__name__)
 
@@ -112,8 +113,10 @@ class SharedRepo(APIView):
         # argument check
         permission = request.data.get('permission', None)
         if permission not in get_available_repo_perms():
-            error_msg = 'permission invalid.'
-            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+            permission = normalize_custom_permission_name(permission)
+            if not permission:
+                error_msg = 'permission invalid.'
+                return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
         share_type = request.data.get('share_type', None)
         if not share_type:
diff --git a/seahub/api2/utils.py b/seahub/api2/utils.py
index badf53d650..9e35cce8f8 100644
--- a/seahub/api2/utils.py
+++ b/seahub/api2/utils.py
@@ -23,11 +23,9 @@ from seahub.base.templatetags.seahub_tags import email2nickname, \
     translate_seahub_time, file_icon_filter, email2contact_email
 from seahub.group.views import is_group_staff
 from seahub.group.utils import is_group_member
-from seahub.notifications.models import UserNotification
 from seahub.api2.models import Token, TokenV2, DESKTOP_PLATFORMS
 from seahub.avatar.settings import AVATAR_DEFAULT_SIZE
 from seahub.avatar.templatetags.avatar_tags import api_avatar_url
-from seahub.settings import INSTALLED_APPS
 
 logger = logging.getLogger(__name__)
 
diff --git a/seahub/api2/views.py b/seahub/api2/views.py
index 6b7545a372..3fbbf31ef5 100644
--- a/seahub/api2/views.py
+++ b/seahub/api2/views.py
@@ -45,7 +45,7 @@ from seahub.avatar.templatetags.group_avatar_tags import api_grp_avatar_url, \
 from seahub.base.accounts import User
 from seahub.base.models import UserStarredFiles, DeviceToken, RepoSecretKey, FileComment
 from seahub.share.models import ExtraSharePermission, ExtraGroupsSharePermission
-from seahub.share.utils import is_repo_admin, check_group_share_in_permission
+from seahub.share.utils import is_repo_admin, check_group_share_in_permission, normalize_custom_permission_name
 from seahub.base.templatetags.seahub_tags import email2nickname, \
     translate_seahub_time, translate_commit_desc_escape, \
     email2contact_email
@@ -1835,7 +1835,7 @@ class UploadLinkView(APIView):
             return api_error(status.HTTP_404_NOT_FOUND, error_msg)
 
         # permission check
-        if check_folder_permission(request, repo_id, parent_dir) != 'rw':
+        if parse_repo_perm(check_folder_permission(request, repo_id, parent_dir)).can_upload is False:
             return api_error(status.HTTP_403_FORBIDDEN,
                     'You do not have permission to access this folder.')
 
@@ -1853,6 +1853,8 @@ class UploadLinkView(APIView):
         if req_from == 'api':
             try:
                 replace = to_python_boolean(request.GET.get('replace', '0'))
+                if 'custom' in check_folder_permission(request, repo_id, parent_dir):
+                    replace = False
             except ValueError:
                 replace = False
             url = gen_file_upload_url(token, 'upload-api', replace)
@@ -1884,7 +1886,7 @@ class UpdateLinkView(APIView):
 
         # permission check
         perm = check_folder_permission(request, repo_id, parent_dir)
-        if perm not in (PERMISSION_PREVIEW_EDIT, PERMISSION_READ_WRITE):
+        if parse_repo_perm(perm).can_edit_on_web is False:
             return api_error(status.HTTP_403_FORBIDDEN,
                     'You do not have permission to access this folder.')
 
@@ -3338,9 +3340,10 @@ class FileHistory(APIView):
 
         permission = check_folder_permission(request, repo_id, path)
         if permission not in get_available_repo_perms():
-
-            error_msg = 'Permission denied.'
-            return api_error(status.HTTP_403_FORBIDDEN, error_msg)
+            permission = normalize_custom_permission_name(permission)
+            if not permission:
+                error_msg = 'Permission denied.'
+                return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
         try:
             commits = get_file_revisions_after_renamed(repo_id, path)
@@ -3633,7 +3636,7 @@ class DirView(APIView):
                     error_msg = 'Folder %s not found.' % parent_dir
                     return api_error(status.HTTP_404_NOT_FOUND, error_msg)
 
-                if check_folder_permission(request, repo_id, parent_dir) != 'rw':
+                if parse_repo_perm(check_folder_permission(request, repo_id, parent_dir)).can_edit_on_web is False:
                     error_msg = 'Permission denied.'
                     return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
@@ -3653,7 +3656,7 @@ class DirView(APIView):
                             return api_error(HTTP_520_OPERATION_FAILED,
                                          'Failed to make directory.')
             else:
-                if check_folder_permission(request, repo_id, '/') != 'rw':
+                if parse_repo_perm(check_folder_permission(request, repo_id, '/')).can_edit_on_web is False:
                     error_msg = 'Permission denied.'
                     return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
@@ -3679,7 +3682,7 @@ class DirView(APIView):
                 error_msg = 'Folder %s not found.' % path
                 return api_error(status.HTTP_404_NOT_FOUND, error_msg)
 
-            if check_folder_permission(request, repo.id, path) != 'rw':
+            if parse_repo_perm(check_folder_permission(request, repo.id, path)).can_edit_on_web is False:
                 error_msg = 'Permission denied.'
                 return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
@@ -4296,8 +4299,10 @@ class SharedRepo(APIView):
         permission = request.GET.get('permission')
 
         if permission not in get_available_repo_perms():
-            error_msg = 'permission invalid.'
-            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+            permission = normalize_custom_permission_name(permission)
+            if not permission:
+                error_msg = 'permission invalid.'
+                return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
         if share_type not in ('personal', 'group', 'public'):
             error_msg = 'share_type invalid.'
@@ -4753,7 +4758,9 @@ class GroupRepos(APIView):
 
         permission = request.data.get("permission", 'r')
         if permission not in get_available_repo_perms():
-            return api_error(status.HTTP_400_BAD_REQUEST, 'Invalid permission')
+            permission = normalize_custom_permission_name(permission)
+            if not permission:
+                return api_error(status.HTTP_400_BAD_REQUEST, 'Invalid permission')
 
         org_id = -1
         if is_org_context(request):
@@ -5470,8 +5477,10 @@ class RepoUserFolderPerm(APIView):
 
         perm = request.data.get('permission', None)
         if not perm or perm not in get_available_repo_perms():
-            error_msg = 'permission invalid.'
-            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+            perm = normalize_custom_permission_name(perm)
+            if not perm:
+                error_msg = 'permission invalid.'
+                return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
         # resource check
         repo = seafile_api.get_repo(repo_id)
@@ -5558,8 +5567,10 @@ class RepoUserFolderPerm(APIView):
 
         perm = request.data.get('permission', None)
         if not perm or perm not in get_available_repo_perms():
-            error_msg = 'permission invalid.'
-            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+            perm = normalize_custom_permission_name(perm)
+            if not perm:
+                error_msg = 'permission invalid.'
+                return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
         user = request.data.get('user_email', None)
         if not user:
@@ -5745,8 +5756,10 @@ class RepoGroupFolderPerm(APIView):
 
         perm = request.data.get('permission', None)
         if not perm or perm not in get_available_repo_perms():
-            error_msg = 'permission invalid.'
-            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+            perm = normalize_custom_permission_name(perm)
+            if not perm:
+                error_msg = 'permission invalid.'
+                return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
         # resource check
         repo = seafile_api.get_repo(repo_id)
@@ -5832,8 +5845,10 @@ class RepoGroupFolderPerm(APIView):
 
         perm = request.data.get('permission', None)
         if not perm or perm not in get_available_repo_perms():
-            error_msg = 'permission invalid.'
-            return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
+            perm = normalize_custom_permission_name(perm)
+            if not perm:
+                error_msg = 'permission invalid.'
+                return api_error(status.HTTP_400_BAD_REQUEST, error_msg)
 
         group_id = request.data.get('group_id')
         if not group_id:
diff --git a/seahub/constants.py b/seahub/constants.py
index c45bf403dd..cd4198f801 100644
--- a/seahub/constants.py
+++ b/seahub/constants.py
@@ -16,6 +16,7 @@ PERMISSION_PREVIEW_EDIT = 'cloud-edit'  # preview only with edit on the web
 PERMISSION_READ = 'r'
 PERMISSION_READ_WRITE = 'rw'
 PERMISSION_ADMIN = 'admin'
+CUSTOM_PERMISSION_PREFIX = 'custom'
 
 DEFAULT_ADMIN = 'default_admin'
 SYSTEM_ADMIN = 'system_admin'
diff --git a/seahub/notifications/models.py b/seahub/notifications/models.py
index f77e0067cf..09c3068966 100644
--- a/seahub/notifications/models.py
+++ b/seahub/notifications/models.py
@@ -14,15 +14,12 @@ from django.utils.translation import ugettext as _
 from django.core.cache import cache
 from django.template.loader import render_to_string
 
-import seaserv
 from seaserv import seafile_api, ccnet_api
 
 from seahub.base.fields import LowerCaseCharField
 from seahub.base.templatetags.seahub_tags import email2nickname
 from seahub.invitations.models import Invitation
-from seahub.utils.repo import get_repo_shared_users
 from seahub.utils import normalize_cache_key
-from seahub.utils.timeutils import datetime_to_isoformat_timestr
 from seahub.constants import HASH_URLS
 from seahub.drafts.models import DraftReviewer
 from seahub.file_participants.utils import list_file_participants
diff --git a/seahub/share/models.py b/seahub/share/models.py
index 63d85b68e5..33a58e4d51 100644
--- a/seahub/share/models.py
+++ b/seahub/share/models.py
@@ -3,6 +3,7 @@ import operator
 import datetime
 import logging
 import os
+import json
 
 from django.db import models
 from django.db.models import Q
@@ -559,6 +560,43 @@ class PrivateFileDirShare(models.Model):
     s_type = models.CharField(max_length=5, default='f') # `f` or `d`
     objects = PrivateFileDirShareManager()
 
+
+class CustomSharePermissionsManager(models.Manager):
+    def get_permissions_by_repo_id(self, repo_id):
+        return super(CustomSharePermissionsManager, self).filter(repo_id=repo_id)
+
+    def add_permission(self, repo_id, name, description, permission):
+        permission_obj = self.model(repo_id=repo_id, name=name,
+                                    description=description, permission=permission)
+        permission_obj.save(using=self._db)
+        return permission_obj
+
+
+class CustomSharePermissions(models.Model):
+    repo_id = models.CharField(max_length=36, db_index=True)
+    name = models.CharField(max_length=255)
+    description = models.CharField(max_length=500)
+    permission = models.TextField()
+
+    objects = CustomSharePermissionsManager()
+
+    class Meta:
+        db_table = 'custom_share_permission'
+
+    def to_dict(self):
+        try:
+            permission = json.loads(self.permission)
+        except Exception as e:
+            logger.error('Failed to deserialize permission: %s' % e)
+            permission = {}
+        return {
+            'id': self.pk,
+            'name': self.name,
+            'description': self.description,
+            'permission': permission,
+        }
+
+
 ###### signal handlers
 from django.dispatch import receiver
 from seahub.signals import repo_deleted
@@ -573,3 +611,5 @@ def remove_share_info(sender, **kwargs):
     # remove record of extra share
     ExtraSharePermission.objects.filter(repo_id=repo_id).delete()
     ExtraGroupsSharePermission.objects.filter(repo_id=repo_id).delete()
+
+    CustomSharePermissions.objects.filter(repo_id=repo_id).delete()
diff --git a/seahub/share/utils.py b/seahub/share/utils.py
index a88eecbafd..53b562d53e 100644
--- a/seahub/share/utils.py
+++ b/seahub/share/utils.py
@@ -1,8 +1,8 @@
 import logging
 
 from seahub.group.utils import is_group_admin
-from seahub.constants import PERMISSION_ADMIN, PERMISSION_READ_WRITE
-from seahub.share.models import ExtraSharePermission, ExtraGroupsSharePermission
+from seahub.constants import PERMISSION_ADMIN, PERMISSION_READ_WRITE, CUSTOM_PERMISSION_PREFIX
+from seahub.share.models import ExtraSharePermission, ExtraGroupsSharePermission, CustomSharePermissions
 from seahub.utils import is_valid_org_id
 
 import seaserv
@@ -10,6 +10,18 @@ from seaserv import seafile_api
 
 logger = logging.getLogger(__name__)
 
+
+def normalize_custom_permission_name(permission):
+    try:
+        if CUSTOM_PERMISSION_PREFIX in permission:
+            permission = permission.split('-')[1]
+        CustomSharePermissions.objects.get(id=int(permission))
+    except Exception as e:
+        logger.warning(e)
+        return None
+    return CUSTOM_PERMISSION_PREFIX + '-' + str(permission)
+
+
 def is_repo_admin(username, repo_id):
 
     # repo is shared to user with admin permission
diff --git a/seahub/urls.py b/seahub/urls.py
index 6a71e01571..e4ecc81ca9 100644
--- a/seahub/urls.py
+++ b/seahub/urls.py
@@ -106,6 +106,7 @@ from seahub.api2.endpoints.ocm import OCMProtocolView, OCMSharesView, OCMNotific
     OCMSharesPrepareView, OCMSharePrepareView, OCMSharesReceivedView, OCMShareReceivedView
 from seahub.api2.endpoints.ocm_repos import OCMReposDirView, OCMReposDownloadLinkView, \
     OCMReposUploadLinkView
+from seahub.api2.endpoints.custom_share_permissions import CustomSharePermissionsView, CustomSharePermissionView
 
 from seahub.api2.endpoints.repo_share_links import RepoShareLinks, RepoShareLink
 from seahub.api2.endpoints.repo_upload_links import RepoUploadLinks, RepoUploadLink
@@ -322,6 +323,9 @@ urlpatterns = [
     url(r'^api/v2.1/group-owned-libraries/(?P<repo_id>[-0-9a-f]{36})/group-share/$', GroupOwnedLibraryGroupShare.as_view(), name='api-v2.1-group-owned-library-group-share'),
     url(r'^api/v2.1/group-owned-libraries/user-share-in-libraries/(?P<repo_id>[-0-9-a-f]{36})/$', GroupOwnedLibraryUserShareInLibrary.as_view(), name='api-v2.1-group-owned-library-user-share-in-library'),
 
+    url(r'^api/v2.1/repos/(?P<repo_id>[-0-9a-f]{36})/custom-share-permissions/$', CustomSharePermissionsView.as_view(), name='api-v2.1-custom-share-permissions'),
+    url(r'^api/v2.1/repos/(?P<repo_id>[-0-9a-f]{36})/custom-share-permissions/(?P<permission_id>\d+)/$', CustomSharePermissionView.as_view(), name='api-v2.1-custom-share-permission'),
+
     ## user::shared-folders
     url(r'^api/v2.1/shared-folders/$', SharedFolders.as_view(), name='api-v2.1-shared-folders'),
 
diff --git a/seahub/utils/repo.py b/seahub/utils/repo.py
index 71070d7b6f..f80a58ee8d 100644
--- a/seahub/utils/repo.py
+++ b/seahub/utils/repo.py
@@ -10,11 +10,13 @@ from seaserv import seafile_api, ccnet_api
 from seahub.constants import (
     PERMISSION_PREVIEW, PERMISSION_PREVIEW_EDIT,
     PERMISSION_READ, PERMISSION_READ_WRITE, PERMISSION_ADMIN,
-    REPO_STATUS_NORMAL, REPO_STATUS_READ_ONLY
+    REPO_STATUS_NORMAL, REPO_STATUS_READ_ONLY, CUSTOM_PERMISSION_PREFIX
 )
 from seahub.utils import EMPTY_SHA1, is_org_context, is_pro_version
+from seahub.api2.utils import to_python_boolean
 from seahub.base.models import RepoSecretKey
 from seahub.base.templatetags.seahub_tags import email2nickname
+from seahub.share.models import CustomSharePermissions
 
 from seahub.settings import ENABLE_STORAGE_CLASSES, \
         STORAGE_CLASS_MAPPING_POLICY, ENABLE_FOLDER_PERM
@@ -50,13 +52,31 @@ def get_available_repo_perms():
 
 def parse_repo_perm(perm):
     RP = namedtuple('RepoPerm', [
-        'can_download', 'can_upload',  # download/uplaod files/folders
+        'can_download', 'can_upload',  # download/upload files/folders
         'can_edit_on_web',             # edit files on web
+        'can_delete',                  # delete files/folders
         'can_copy',                    # copy files/folders on web
         'can_preview',                 # preview files on web
         'can_generate_share_link',     # generate share link
     ])
 
+    if perm not in get_available_repo_perms():
+        try:
+            if CUSTOM_PERMISSION_PREFIX in perm:
+                perm = perm.split('-')[1]
+            custom_perm_obj = CustomSharePermissions.objects.get(id=int(perm)).to_dict()
+            RP.can_download = to_python_boolean(str(custom_perm_obj['permission'].get('download', False)))
+            RP.can_upload = to_python_boolean(str(custom_perm_obj['permission'].get('upload', False)))
+            RP.can_edit_on_web = to_python_boolean(str(custom_perm_obj['permission'].get('modify', False)))
+            RP.can_copy = to_python_boolean(str(custom_perm_obj['permission'].get('copy', False)))
+            RP.can_delete = to_python_boolean(str(custom_perm_obj['permission'].get('delete', False)))
+            RP.can_preview = to_python_boolean(str(custom_perm_obj['permission'].get('preview', False)))
+            RP.can_generate_share_link = to_python_boolean(
+                str(custom_perm_obj['permission'].get('download_external_link', False)))
+            return RP
+        except Exception as e:
+            logger.warning(e)
+
     RP.can_download = True if perm in [
         PERMISSION_READ, PERMISSION_READ_WRITE, PERMISSION_ADMIN] else False
     RP.can_upload = True if perm in [
@@ -67,6 +87,9 @@ def parse_repo_perm(perm):
     RP.can_copy = True if perm in [
         PERMISSION_READ, PERMISSION_READ_WRITE, PERMISSION_ADMIN,
     ] else False
+    RP.can_delete = True if perm in [
+        PERMISSION_READ_WRITE, PERMISSION_ADMIN,
+    ] else False
     RP.can_preview = True if perm in [
         PERMISSION_READ, PERMISSION_READ_WRITE, PERMISSION_ADMIN,
         PERMISSION_PREVIEW, PERMISSION_PREVIEW_EDIT