diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index de586280e2..dcb6fd3156 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -15904,9 +15904,9 @@
       }
     },
     "seafile-js": {
-      "version": "0.2.100",
-      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.100.tgz",
-      "integrity": "sha512-QrzO3vMSeL+4NRvb9/sjGdCtYzOIsXI7PhbPZrVmMc8XaXWL9ZzgMqMEGVYUgQlALQChNhXqqyfRLvZ3/WKEUg==",
+      "version": "0.2.101",
+      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.101.tgz",
+      "integrity": "sha512-CqF+4FKnUhnUYKCjiVbp10GkI9Ej+d4UfaWRvdGNaR74tK+0D9dUq7RNXUGS/MpIAlif7hbz5k+LUFafkfGmNg==",
       "requires": {
         "axios": "^0.18.0",
         "form-data": "^2.3.2",
diff --git a/frontend/package.json b/frontend/package.json
index 10c63f6cec..cdb88deeda 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -37,7 +37,7 @@
     "react-responsive": "^6.1.1",
     "react-select": "^2.4.1",
     "reactstrap": "^6.4.0",
-    "seafile-js": "^0.2.100",
+    "seafile-js": "^0.2.101",
     "socket.io-client": "^2.2.0",
     "sw-precache-webpack-plugin": "0.11.4",
     "unified": "^7.0.0",
diff --git a/frontend/src/components/dialog/generate-share-link.js b/frontend/src/components/dialog/generate-share-link.js
index 1a52428dec..6713f3ecaf 100644
--- a/frontend/src/components/dialog/generate-share-link.js
+++ b/frontend/src/components/dialog/generate-share-link.js
@@ -391,24 +391,24 @@ class GenerateShareLink extends React.Component {
             </Label>
           </FormGroup>
           <FormGroup check className="permission">
-            <Label check>
+            <Label className="form-check-label">
               <Input type="radio" name="radio1" defaultChecked={true} onChange={() => this.setPermission('previewAndDownload')}/>{'  '}{gettext('Preview and download')}
             </Label>
           </FormGroup>
           <FormGroup check className="permission">
-            <Label>
+            <Label className="form-check-label">
               <Input type="radio" name="radio1" onChange={() => this.setPermission('preview')} />{'  '}{gettext('Preview only')}
             </Label>
           </FormGroup>
           {(Utils.isOfficeFile(this.props.itemPath) && fileInfo && fileInfo.can_edit) &&
             <FormGroup check className="permission">
-              <Label>
+              <Label className="form-check-label">
                 <Input type="radio" name="radio1" onChange={() => this.setPermission('editOnCloudAndDownload')} />{'  '}{gettext('Edit on cloud and download')}
               </Label>
             </FormGroup>
           }
           {this.state.errorInfo && <Alert color="danger" className="mt-2">{gettext(this.state.errorInfo)}</Alert>}
-          <Button onClick={this.generateShareLink}>{gettext('Generate')}</Button>
+          <Button onClick={this.generateShareLink} className="mt-2">{gettext('Generate')}</Button>
         </Form>
       );
     }
diff --git a/frontend/src/components/dir-view-mode/dir-grid-view.js b/frontend/src/components/dir-view-mode/dir-grid-view.js
index 75010029b5..617da702a9 100644
--- a/frontend/src/components/dir-view-mode/dir-grid-view.js
+++ b/frontend/src/components/dir-view-mode/dir-grid-view.js
@@ -79,6 +79,7 @@ class DirGridView extends React.Component {
           isDirentDetailShow={this.props.isDirentDetailShow}
           onItemRename={this.props.onItemRename}
           onAddFolder={this.props.onAddFolder}
+          onFileTagChanged={this.props.onFileTagChanged}
         />
       </Fragment>
     );
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 af012282bc..6bc2820b42 100644
--- a/frontend/src/components/dirent-grid-view/dirent-grid-item.js
+++ b/frontend/src/components/dirent-grid-view/dirent-grid-item.js
@@ -1,5 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import MD5 from 'MD5';
+import { UncontrolledTooltip } from 'reactstrap';
 import { gettext, siteRoot, mediaUrl } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 
@@ -136,6 +138,13 @@ class DirentGridItem extends React.Component {
     let iconUrl = Utils.getDirentIcon(dirent, true);
     let fileUrl = dirent.encoded_thumbnail_src ? this.getFileUrl(dirent.encoded_thumbnail_src) : '';
 
+    let toolTipID = '';
+    let tagTitle = '';
+    if (dirent.file_tags && dirent.file_tags.length > 0) {
+      toolTipID = MD5(dirent.name).slice(0, 7);
+      tagTitle = dirent.file_tags.map(item => item.name).join(' ');
+    }
+
     let dirHref = '';
     if (this.props.currentRepoInfo) {
       dirHref = siteRoot + 'library/' + this.props.repoID + '/' + this.props.currentRepoInfo.repo_name + Utils.encodePath(direntPath);
@@ -169,6 +178,21 @@ 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" >
+            {(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">
+                  {dirent.file_tags.map((fileTag, index) => {
+                    let length = dirent.file_tags.length;
+                    return (
+                      <span className="file-tag" key={fileTag.id} style={{zIndex:length - index, backgroundColor:fileTag.color}}></span>
+                    );
+                  })}
+                </div>
+                <UncontrolledTooltip target={`tag-list-title-${toolTipID}`} placement="bottom">
+                  {tagTitle}
+                </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>
           </div>
         </li>
diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js
index 417416906e..f9be35fd7c 100644
--- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js
+++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js
@@ -15,6 +15,7 @@ import MoveDirentDialog from '../dialog/move-dirent-dialog';
 import CopyDirentDialog from '../dialog/copy-dirent-dialog';
 import ShareDialog from '../dialog/share-dialog';
 import ZipDownloadDialog from '../dialog/zip-download-dialog';
+import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import Rename from '../../components/dialog/rename-grid-item-dialog';
 import CreateFile from '../dialog/create-file-dialog';
 import CreateFolder from '../dialog/create-folder-dialog';
@@ -40,6 +41,7 @@ const propTypes = {
   updateDirent: PropTypes.func.isRequired,
   isDirentDetailShow: PropTypes.bool.isRequired,
   onGridItemClick: PropTypes.func,
+  onFileTagChanged: PropTypes.func,
   onAddFolder: PropTypes.func.isRequired,
   showDirentDetail: PropTypes.func.isRequired,
   onItemRename: PropTypes.func.isRequired,
@@ -48,7 +50,7 @@ const propTypes = {
 class DirentGridView extends React.Component{
   constructor(props) {
     super(props);
-    this.state= {
+    this.state = {
       isImagePopupOpen: false,
       imageItems: [],
       imageIndex: 0,
@@ -56,6 +58,7 @@ class DirentGridView extends React.Component{
       isShareDialogShow: false,
       isMoveDialogShow: false,
       isCopyDialogShow: false,
+      isEditFileTagShow: false,
       isZipDialogOpen: false,
       isRenameDialogShow: false,
       isCreateFolderDialogShow: false,
@@ -133,6 +136,9 @@ class DirentGridView extends React.Component{
       case 'Copy':
         this.onItemCopyToggle();
         break;
+      case 'Tags':
+        this.onEditFileTagToggle();
+        break;
       case 'Permission':
         this.onPermissionItem();
         break;
@@ -165,6 +171,18 @@ class DirentGridView extends React.Component{
     }
   }
 
+  onEditFileTagToggle = () => {
+    this.setState({
+      isEditFileTagShow: !this.state.isEditFileTagShow
+    });
+  }
+
+  onFileTagChanged = () => {
+    let dirent = this.state.activeDirent ? this.state.activeDirent : '';
+    let direntPath = Utils.joinPath(this.props.path, dirent.name);
+    this.props.onFileTagChanged(dirent, direntPath);
+  }
+
   getDirentPath = (dirent) => {
     let path = this.props.path;
     return path === '/' ? path + dirent.name : path + '/' + dirent.name;
@@ -437,7 +455,7 @@ class DirentGridView extends React.Component{
       contextmenuList = contextmenuList.length > 0 ? [...contextmenuList, 'Divider'] : [];
     }
 
-    let { RENAME, MOVE, COPY, PERMISSION, OPEN_VIA_CLIENT, LOCK, UNLOCK, COMMENT, HISTORY, ACCESS_LOG } = TextTranslation;
+    let { RENAME, MOVE, COPY, PERMISSION, OPEN_VIA_CLIENT, LOCK, UNLOCK, COMMENT, HISTORY, ACCESS_LOG, TAGS } = TextTranslation;
     if (type === 'dir' && permission === 'rw') {
       if (can_set_folder_perm) {
         menuList = [...contextmenuList, RENAME, MOVE, COPY, 'Divider', PERMISSION, 'Divider', OPEN_VIA_CLIENT];
@@ -460,6 +478,7 @@ class DirentGridView extends React.Component{
         menuList.push(MOVE);
       }
       menuList.push(COPY);
+      menuList.push(TAGS);
       if (isPro) {
         if (dirent.is_locked) {
           if (dirent.locked_by_me || (dirent.lock_owner === 'OnlineOffice' && permission === 'rw')) {
@@ -590,6 +609,15 @@ class DirentGridView extends React.Component{
             dirent={this.state.activeDirent}
           />
         }
+        {this.state.isEditFileTagShow &&
+          <EditFileTagDialog
+            repoID={this.props.repoID}
+            fileTagList={dirent.file_tags}
+            filePath={direntPath}
+            toggleCancel={this.onEditFileTagToggle}
+            onFileTagChanged={this.onFileTagChanged}
+          />
+        }
         {this.state.isShareDialogShow &&
           <ModalPortal>
             <ShareDialog 
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 fd43faa698..82f203e7e6 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -555,12 +555,12 @@ class DirentListItem extends React.Component {
       dirHref = siteRoot + 'library/' + this.props.repoID + '/' + this.props.currentRepoInfo.repo_name + Utils.encodePath(direntPath);
     }
     let fileHref = siteRoot + 'lib/' + this.props.repoID + '/file' + Utils.encodePath(direntPath);
-    let toolTipID = MD5(dirent.name).slice(0, 7);
+
+    let toolTipID = '';
     let tagTitle = '';
     if (dirent.file_tags && dirent.file_tags.length > 0) {
-      dirent.file_tags.forEach(item => {
-        tagTitle += item.name + ' ';
-      });
+      toolTipID = MD5(dirent.name).slice(0, 7);
+      tagTitle = dirent.file_tags.map(item => item.name).join(' ');
     }
 
     let iconUrl = Utils.getDirentIcon(dirent);
@@ -613,7 +613,7 @@ class DirentListItem extends React.Component {
             }
           </td>
           <td className="tag-list-title">
-            {(dirent.type !== 'dir' && dirent.file_tags) && (
+            {(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">
                   {dirent.file_tags.map((fileTag, index) => {
diff --git a/frontend/src/css/grid-view.css b/frontend/src/css/grid-view.css
index 8ad5dd00f3..d7b6ab1d6f 100644
--- a/frontend/src/css/grid-view.css
+++ b/frontend/src/css/grid-view.css
@@ -35,11 +35,12 @@
 }
 
 .grid-file-img-link .thumbnail {
-  max-width: 96px;
-  max-height: 96px;
+  max-width: 88px;
+  max-height: 88px;
   padding: 1px;
+  background: #fff;
   border: 1px solid #ddd;
-  border-radius: 3px;
+  border-radius: 1px;
 }
 
 .grid-file-img-link::before {
@@ -82,4 +83,4 @@
 
 .grid-drop-show {
   background: #f8f8f8;
-}
\ No newline at end of file
+}
diff --git a/seahub/templates/draft.html b/seahub/templates/draft.html
index 35bf45e3c6..601c090e45 100644
--- a/seahub/templates/draft.html
+++ b/seahub/templates/draft.html
@@ -11,9 +11,9 @@
         config: {
             draftID: '{{ draft_id }}',
             draftRepoID: '{{ draft_repo_id }}',
-            draftFilePath: '{{ draft_file_path }}',
-            draftOriginFilePath: '{{ draft_origin_file_path }}',
-            draftFileName: '{{ draft_file_name }}',
+            draftFilePath: '{{ draft_file_path|escapejs }}',
+            draftOriginFilePath: '{{ draft_origin_file_path|escapejs }}',
+            draftFileName: '{{ draft_file_name|escapejs }}',
             perm: '{{ permission }}',
             author: '{{ author }}',
             authorAvatar: '{{ author_avatar_url }}',