diff --git a/frontend/config/webpack.config.dev.js b/frontend/config/webpack.config.dev.js
index 0d47dcc1f3..a39e9edbc8 100644
--- a/frontend/config/webpack.config.dev.js
+++ b/frontend/config/webpack.config.dev.js
@@ -144,6 +144,11 @@ module.exports = {
       require.resolve('react-dev-utils/webpackHotDevClient'),
       paths.appSrc + "/shared-file-view-unknown.js",
     ],
+    historyTrashFileView: [
+      require.resolve('./polyfills'),
+      require.resolve('react-dev-utils/webpackHotDevClient'),
+      paths.appSrc + "/history-trash-file-view.js",
+    ],
     viewFileText: [
       require.resolve('./polyfills'),
       require.resolve('react-dev-utils/webpackHotDevClient'),
diff --git a/frontend/config/webpack.config.prod.js b/frontend/config/webpack.config.prod.js
index c56d323b3e..3447d5ae83 100644
--- a/frontend/config/webpack.config.prod.js
+++ b/frontend/config/webpack.config.prod.js
@@ -77,6 +77,7 @@ module.exports = {
     sharedFileViewDocument: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-document.js"],
     sharedFileViewSpreadsheet: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-spreadsheet.js"],
     sharedFileViewUnknown: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-unknown.js"],
+    historyTrashFileViewImage: [require.resolve('./polyfills'), paths.appSrc + "/history-trash-file-view-image.js"],
     viewFileText: [require.resolve('./polyfills'), paths.appSrc + "/view-file-text.js"],
     viewFileImage: [require.resolve('./polyfills'), paths.appSrc + "/view-file-image.js"],
     viewFileXmind: [require.resolve('./polyfills'), paths.appSrc + "/view-file-xmind.js"],
diff --git a/frontend/src/components/dialog/generate-share-link.js b/frontend/src/components/dialog/generate-share-link.js
index 78a5bc5557..1541eeef19 100644
--- a/frontend/src/components/dialog/generate-share-link.js
+++ b/frontend/src/components/dialog/generate-share-link.js
@@ -36,6 +36,7 @@ class GenerateShareLink extends React.Component {
       sendLinkEmails: '',
       sendLinkMessage: '',
       sendLinkErrorMessage: '',
+      fileInfo: null,
     };
     this.permissions = {
       'can_edit': false, 
@@ -58,6 +59,12 @@ class GenerateShareLink extends React.Component {
         this.setState({isLoading: false});
       }
     });
+
+    seafileAPI.getFileInfo(repoID, path).then((res) => {
+      if (res.data) {
+        this.setState({fileInfo: res.data});
+      }
+    });
   }
 
   onPasswordInputChecked = () => {
@@ -99,11 +106,16 @@ class GenerateShareLink extends React.Component {
         'can_edit': false,
         'can_download': true
       };
-    } else {
+    } else if (permission == 'preview') {
       this.permissions = {
         'can_edit': false,
         'can_download': false
       };     
+    } else if (permission == 'editOnCloudAndDownload'){
+      this.permissions = {
+        'can_edit': true,
+        'can_download': true
+      };
     }
   }
 
@@ -371,6 +383,7 @@ class GenerateShareLink extends React.Component {
         </div>
       );
     } else {
+      let fileInfo = this.state.fileInfo;
       return (
         <Form className="generate-share-link">
           <FormGroup check>
@@ -446,6 +459,13 @@ class GenerateShareLink extends React.Component {
               <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>
+                <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>
         </Form>
diff --git a/frontend/src/components/file-content-view/audio.js b/frontend/src/components/file-content-view/audio.js
new file mode 100644
index 0000000000..f3fbcbe190
--- /dev/null
+++ b/frontend/src/components/file-content-view/audio.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import AudioPlayer from '../audio-player';
+
+import '../../css/audio-file-view.css';
+
+const { rawPath } = window.app.pageOptions;
+
+class FileContent extends React.Component {
+  render() {
+    const videoJsOptions = {
+      autoplay: false,
+      controls: true,
+      preload: 'auto',
+      sources: [{
+        src: rawPath
+      }]
+    };
+    return (
+      <div className="file-view-content flex-1 audio-file-view">
+        <AudioPlayer { ...videoJsOptions } />
+      </div>
+    );
+  }
+}
+
+export default FileContent;
diff --git a/frontend/src/components/file-content-view/image.js b/frontend/src/components/file-content-view/image.js
new file mode 100644
index 0000000000..395ffa3cb3
--- /dev/null
+++ b/frontend/src/components/file-content-view/image.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Utils } from '../../utils/utils';
+import { gettext, siteRoot } from '../../utils/constants';
+
+import '../../css/image-file-view.css';
+
+const {
+  repoID,
+  fileName, previousImage, nextImage, rawPath
+} = window.app.pageOptions;
+
+let previousImageUrl, nextImageUrl; 
+if (previousImage) {
+  previousImageUrl = `${siteRoot}lib/${repoID}/file${Utils.encodePath(previousImage)}`;
+}
+if (nextImage) {
+  nextImageUrl = `${siteRoot}lib/${repoID}/file${Utils.encodePath(nextImage)}`;
+}
+
+class FileContent extends React.Component {
+
+  componentDidMount() {
+    document.addEventListener('keydown', (e) => {
+      if (previousImage && e.keyCode == 37) { // press '<-'
+        location.href = previousImageUrl;
+      }
+      if (nextImage && e.keyCode == 39) { // press '->'
+        location.href = nextImageUrl;
+      }
+    });
+  }
+
+  render() {
+    return (
+      <div className="file-view-content flex-1 image-file-view">
+        {previousImage && (
+          <a href={previousImageUrl} id="img-prev" title={gettext('you can also press ← ')}><span className="fas fa-chevron-left"></span></a>
+        )}
+        {nextImage && (
+          <a href={nextImageUrl} id="img-next" title={gettext('you can also press →')}><span className="fas fa-chevron-right"></span></a>
+        )}
+        <img src={rawPath} alt={fileName} id="image-view" />
+      </div>
+    );
+  }
+}
+
+export default FileContent;
diff --git a/frontend/src/components/file-content-view/markdown.js b/frontend/src/components/file-content-view/markdown.js
new file mode 100644
index 0000000000..4bcfa7fd3a
--- /dev/null
+++ b/frontend/src/components/file-content-view/markdown.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import MarkdownViewer from '@seafile/seafile-editor/dist/viewer/markdown-viewer';
+
+import '../../css/md-file-view.css';
+
+const { fileContent } = window.app.pageOptions;
+
+class FileContent extends React.Component {
+  render() {
+    return (
+      <div className="file-view-content flex-1 o-auto">
+        <div className="md-content">
+          <MarkdownViewer 
+            markdownContent={fileContent}
+            showTOC={false}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default FileContent;
diff --git a/frontend/src/components/file-content-view/pdf.js b/frontend/src/components/file-content-view/pdf.js
new file mode 100644
index 0000000000..6f6e7027c9
--- /dev/null
+++ b/frontend/src/components/file-content-view/pdf.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import PDFViewer from '../pdf-viewer';
+
+import '../../css/pdf-file-view.css';
+
+class FileContent extends React.Component {
+  render() {
+    return (
+      <div className="file-view-content flex-1 pdf-file-view">
+        <PDFViewer />
+      </div>
+    );
+  }
+}
+
+export default FileContent;
diff --git a/frontend/src/components/file-content-view/svg.js b/frontend/src/components/file-content-view/svg.js
new file mode 100644
index 0000000000..bb958170f8
--- /dev/null
+++ b/frontend/src/components/file-content-view/svg.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import '../../css/svg-file-view.css';
+
+const {
+  fileName, rawPath
+} = window.app.pageOptions;
+
+class FileContent extends React.Component {
+  render() {
+    return (
+      <div className="file-view-content flex-1 svg-file-view">
+        <img src={rawPath} alt={fileName} id="svg-view" />
+      </div>
+    );
+  }
+}
+
+export default FileContent;
diff --git a/frontend/src/components/file-content-view/text.js b/frontend/src/components/file-content-view/text.js
new file mode 100644
index 0000000000..c8bfd0cb2c
--- /dev/null
+++ b/frontend/src/components/file-content-view/text.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Utils } from '../../utils/utils';
+
+import CodeMirror from 'react-codemirror';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/css/css';
+import 'codemirror/mode/clike/clike';
+import 'codemirror/mode/php/php';
+import 'codemirror/mode/sql/sql';
+import 'codemirror/mode/vue/vue';
+import 'codemirror/mode/xml/xml';
+import 'codemirror/mode/go/go';
+import 'codemirror/mode/python/python';
+import 'codemirror/mode/htmlmixed/htmlmixed';
+import 'codemirror/lib/codemirror.css';
+
+import '../../css/text-file-view.css';
+
+const {
+  fileExt, fileContent
+} = window.app.pageOptions;
+
+const options = {
+  lineNumbers: true,
+  mode: Utils.chooseLanguage(fileExt),
+  extraKeys: {'Ctrl': 'autocomplete'},
+  theme: 'default',
+  textWrapping: true,
+  lineWrapping: true,
+  readOnly: true,
+  cursorBlinkRate: -1 // hide the cursor
+};
+
+class FileContent extends React.Component {
+  render() {
+    return (
+      <div className="file-view-content flex-1 text-file-view">
+        <CodeMirror
+          ref="code-mirror-editor"
+          value={fileContent}
+          options={options}
+        />
+      </div>
+    );
+  }
+}
+
+export default FileContent;
diff --git a/frontend/src/components/file-content-view/video.js b/frontend/src/components/file-content-view/video.js
new file mode 100644
index 0000000000..7ee0238d24
--- /dev/null
+++ b/frontend/src/components/file-content-view/video.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import VideoPlayer from '../video-player';
+
+import '../../css/video-file-view.css';
+
+const {
+  rawPath
+} = window.app.pageOptions;
+
+class FileContent extends React.Component {
+  render() {
+    const videoJsOptions = { 
+      autoplay: false,
+      controls: true,
+      preload: 'auto',
+      sources: [{
+        src: rawPath
+      }]  
+    };  
+    return (
+      <div className="file-view-content flex-1 video-file-view">
+        <VideoPlayer { ...videoJsOptions } />
+      </div>
+    );  
+  }
+}
+
+export default FileContent;
diff --git a/frontend/src/components/file-view/file-info.js b/frontend/src/components/file-view/file-info.js
index fdc3a54178..2ece013a04 100644
--- a/frontend/src/components/file-view/file-info.js
+++ b/frontend/src/components/file-view/file-info.js
@@ -49,9 +49,9 @@ class FileInfo extends React.PureComponent {
             />
           }
         </h2>
-        <div className="last-modification">
+        <div className="meta-info">
           <a href={`${siteRoot}profile/${encodeURIComponent(latestContributor)}/`}>{latestContributorName}</a>
-          <span className="last-modification-time">{moment(lastModificationTime * 1000).format('YYYY-MM-DD HH:mm')}</span>
+          <span className="ml-2">{moment(lastModificationTime * 1000).format('YYYY-MM-DD HH:mm')}</span>
         </div>
       </div>
     );
diff --git a/frontend/src/components/history-trash-file-view/download.js b/frontend/src/components/history-trash-file-view/download.js
new file mode 100644
index 0000000000..e3259be571
--- /dev/null
+++ b/frontend/src/components/history-trash-file-view/download.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { gettext, siteRoot } from '../../utils/constants';
+
+const { 
+  fileName, repoID, objID, path
+} = window.app.pageOptions;
+
+function Download() {
+  return (
+    <a href={`${siteRoot}repo/${repoID}/${objID}/download/?file_name=${encodeURIComponent(fileName)}&p=${encodeURIComponent(path)}`} className="btn btn-secondary">{gettext('Download')}</a>
+  );
+}
+
+export default Download;
diff --git a/frontend/src/components/history-trash-file-view/file-view-tip.js b/frontend/src/components/history-trash-file-view/file-view-tip.js
new file mode 100644
index 0000000000..5a4a74c93d
--- /dev/null
+++ b/frontend/src/components/history-trash-file-view/file-view-tip.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
+import Download from './download';
+
+const propTypes = {
+  err: PropTypes.string
+};
+const { canDownloadFile, err } = window.app.pageOptions;
+const UNSUPPORTED = 'File preview unsupported';
+
+class FileViewTip extends React.Component {
+
+  render() {
+    let errorMsg;
+    if (err == UNSUPPORTED || this.props.err == UNSUPPORTED) {
+      errorMsg = <p>{gettext('Online view is not applicable to this file format')}</p>;
+    } else {
+      errorMsg = <p className="error">{err}</p>;
+    }
+
+    return (
+      <div className="file-view-content flex-1 o-auto">
+        <div className="file-view-tip">
+          {errorMsg}
+          {canDownloadFile && <Download />}
+        </div>
+      </div>
+    );  
+  }
+}
+FileViewTip.propTypes = propTypes;
+
+export default FileViewTip;
diff --git a/frontend/src/components/history-trash-file-view/file-view.js b/frontend/src/components/history-trash-file-view/file-view.js
new file mode 100644
index 0000000000..ffa6ce3360
--- /dev/null
+++ b/frontend/src/components/history-trash-file-view/file-view.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import watermark from 'watermark-dom';
+import { gettext, siteName } from '../../utils/constants';
+import Download from './download';
+
+import '../../css/file-view.css';
+
+const propTypes = {
+  content: PropTypes.object.isRequired
+};
+
+const {
+  fromTrash,
+  fileName, commitTime,
+  canDownloadFile,
+  enableWatermark, userNickName
+} = window.app.pageOptions;
+
+
+class FileView extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="h-100 d-flex flex-column">
+        <div className="file-view-header d-flex justify-content-between align-items-center">
+          <div>
+            <h2 className="file-title">{fileName}</h2>
+            <p className="meta-info m-0">{fromTrash ? `${gettext('Current Path: ')}${gettext('Trash')}`: commitTime}</p>
+          </div>
+          {canDownloadFile && <Download />}
+        </div>
+        <div className="file-view-body flex-auto d-flex o-hidden">
+          {this.props.content}
+        </div>
+      </div>
+    );
+  }
+}
+
+if (enableWatermark) {
+  watermark.init({
+    watermark_txt: `${siteName} ${userNickName}`,
+    watermark_alpha: 0.075
+  });
+}
+
+FileView.propTypes = propTypes;
+
+export default FileView;
diff --git a/frontend/src/css/audio-file-view.css b/frontend/src/css/audio-file-view.css
index 514724099e..9239eaf39b 100644
--- a/frontend/src/css/audio-file-view.css
+++ b/frontend/src/css/audio-file-view.css
@@ -1,9 +1,9 @@
-.video-js {
+.audio-file-view .video-js {
     width: calc(100% - 40px);
     max-width: 500px;
     height: 3em;
     margin: 0 auto;
 }
-.video-js .vjs-fullscreen-control {
+.audio-file-view .video-js .vjs-fullscreen-control {
     display: none;
 }
diff --git a/frontend/src/css/file-view.css b/frontend/src/css/file-view.css
index 32237f931e..79db754161 100644
--- a/frontend/src/css/file-view.css
+++ b/frontend/src/css/file-view.css
@@ -29,12 +29,9 @@ body {
 .file-locked-icon {
   margin-left: .5rem;
 }
-.last-modification {
+.meta-info {
   font-size: .8125rem;
 }
-.last-modification-time {
-  margin-left: .5rem;
-}
 .file-view-content {
   padding: 30px 0;
   background: #f4f4f4;
diff --git a/frontend/src/css/md-file-view.css b/frontend/src/css/md-file-view.css
new file mode 100644
index 0000000000..4db22b0e88
--- /dev/null
+++ b/frontend/src/css/md-file-view.css
@@ -0,0 +1,9 @@
+.md-content {
+    box-shadow: 0 0 6px #ccc;
+    border: 1px solid #ccc;
+    padding: 70px 75px;
+    width: calc(100% - 40px);
+    max-width: 950px;
+    background: #fff;
+    margin: 0 auto;
+}
diff --git a/frontend/src/css/video-file-view.css b/frontend/src/css/video-file-view.css
index 3d7d4fd33f..16cdaa9fb3 100644
--- a/frontend/src/css/video-file-view.css
+++ b/frontend/src/css/video-file-view.css
@@ -1,4 +1,4 @@
-.video-js {
+.video-file-view .video-js {
     width: calc(100% - 40px);
     max-width: 800px;
     max-height: 100%;
diff --git a/frontend/src/history-trash-file-view.js b/frontend/src/history-trash-file-view.js
new file mode 100644
index 0000000000..d95ae969fd
--- /dev/null
+++ b/frontend/src/history-trash-file-view.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Utils } from './utils/utils';
+import { gettext, siteRoot } from './utils/constants';
+import FileView from './components/history-trash-file-view/file-view';
+import FileViewTip from './components/history-trash-file-view/file-view-tip';
+import Image from './components/file-content-view/image';
+import SVG from './components/file-content-view/svg';
+import PDF from './components/file-content-view/pdf';
+import Text from './components/file-content-view/text';
+import Markdown from './components/file-content-view/markdown';
+import Video from './components/file-content-view/video';
+import Audio from './components/file-content-view/audio';
+
+const {
+  fileType, err
+} = window.app.pageOptions;
+
+class HistoryTrashFileView extends React.Component {
+
+  render() {
+    if (err) {
+      return (
+        <FileView content={<FileViewTip />} />
+      );
+    }
+
+    let content;
+    switch (fileType) {
+      case 'Image':
+        content = <Image />;
+        break;
+      case 'SVG': 
+        content = <SVG />;
+        break;
+      case 'PDF': 
+        content = <PDF />;
+        break;
+      case 'Text': 
+        content = <Text />;
+        break;
+      case 'Markdown': 
+        content = <Markdown />;
+        break;
+      case 'Video': 
+        content = <Video />;
+        break;
+      case 'Audio': 
+        content = <Audio />;
+        break;
+      default:
+        content = <FileViewTip err='File preview unsupported' />;
+    }
+
+    return (
+      <FileView content={content} />
+    );
+  }
+}
+
+ReactDOM.render (
+  <HistoryTrashFileView />,
+  document.getElementById('wrapper')
+);
diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js
index 22ae858561..6ae9546cc0 100644
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -104,6 +104,20 @@ export const Utils = {
     }
   },
 
+  isOfficeFile: function(filename) {
+    // no file ext
+    if (filename.lastIndexOf('.') == -1) {
+      return false;
+    }
+    var file_ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
+    var exts = ['doc', 'ppt', 'xls', 'docx', 'pptx', 'xlsx'];
+    if (exts.indexOf(file_ext) != -1) {
+      return true;
+    } else {
+      return false;
+    }
+  },
+
   // check if a file is a video
   videoCheck: function (filename) {
     // no file ext
@@ -329,10 +343,10 @@ export const Utils = {
           title = gettext('Read-Only library');
           break;
         case 'cloud-edit':
-          title = gettext('Preview-Edit-on-Cloud library');
+          title = gettext('Online Read-Write library');
           break;
         case 'preview':
-          title = gettext('Preview-on-Cloud library');
+          title = gettext('Online Read-Only library');
           break;
       }
     }
@@ -349,10 +363,10 @@ export const Utils = {
         title = gettext('Read-Only folder');
         break;
       case 'cloud-edit':
-        title = gettext('Preview-Edit-on-Cloud folder');
+        title = gettext('Online Read-Write folder');
         break;
       case 'preview':
-        title = gettext('Preview-on-Cloud folder');
+        title = gettext('Online Read-Only folder');
         break;
     }
     return title;
@@ -371,10 +385,10 @@ export const Utils = {
         title = gettext('Admin');
         break;
       case 'cloud-edit':
-        title = gettext('Preview-Edit-on-Cloud');
+        title = gettext('Online Read-Write');
         break;
       case 'preview':
-        title = gettext('Preview-on-Cloud');
+        title = gettext('Online Read-Only');
         break;
     }
     return title;
diff --git a/frontend/src/view-file-audio.js b/frontend/src/view-file-audio.js
index c7f9f2475b..276e8c8947 100644
--- a/frontend/src/view-file-audio.js
+++ b/frontend/src/view-file-audio.js
@@ -34,7 +34,7 @@ class FileContent extends React.Component {
       }]
     };
     return (
-      <div className="file-view-content flex-1">
+      <div className="file-view-content flex-1 audio-file-view">
         <AudioPlayer { ...videoJsOptions } />
       </div>
     );
diff --git a/frontend/src/view-file-video.js b/frontend/src/view-file-video.js
index ff760fdb1c..a873fbc2cc 100644
--- a/frontend/src/view-file-video.js
+++ b/frontend/src/view-file-video.js
@@ -34,7 +34,7 @@ class FileContent extends React.Component {
       }]
     };
     return (
-      <div className="file-view-content flex-1">
+      <div className="file-view-content flex-1 video-file-view">
         <VideoPlayer { ...videoJsOptions } />
       </div>
     );
diff --git a/media/css/seafile-ui.css b/media/css/seafile-ui.css
index 3c32f16fb3..54361604c2 100644
--- a/media/css/seafile-ui.css
+++ b/media/css/seafile-ui.css
@@ -1277,7 +1277,7 @@ pre {
     background-color: #fff;
     border-color: #1991eb;
     outline: 0;
-    box-shadow: 0 0 0 2px rgba(241, 150, 69, 0.25); }
+    box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25); }
   .form-control::placeholder {
     color: #adb5bd;
     opacity: 1; }
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index c4bbddcca7..dcb0710c7d 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -335,13 +335,14 @@ ul,ol,li {
 }
 
 .op-icon {
-    color: #f89a68;
+    color: #f19645;
 }
 
 .op-icon:focus,
 .op-icon:hover {
     padding-bottom: 0.125rem;
-    border-bottom: 0.125rem solid #f89a68;
+    border-bottom: 0.125rem solid #e0873b;
+    color: #e0873b;
 }
 
 .action-icon,
diff --git a/seahub/api2/endpoints/repo_trash.py b/seahub/api2/endpoints/repo_trash.py
index 007b908311..b52d587acb 100644
--- a/seahub/api2/endpoints/repo_trash.py
+++ b/seahub/api2/endpoints/repo_trash.py
@@ -16,6 +16,8 @@ from seahub.signals import clean_up_repo_trash
 from seahub.utils.timeutils import timestamp_to_isoformat_timestr
 from seahub.utils.repo import get_repo_owner
 from seahub.views import check_folder_permission
+from seahub.group.utils import is_group_admin
+from seahub.api2.endpoints.group_owned_libraries import get_group_id_by_repo_owner
 
 from seaserv import seafile_api
 from pysearpc import SearpcError
@@ -129,7 +131,8 @@ class RepoTrash(APIView):
         """ Clean library's trash.
 
         Permission checking:
-        1. only repo owner can perform this action.
+        1. repo owner can perform this action.
+        2. is group admin.
         """
 
         # argument check
@@ -148,10 +151,20 @@ class RepoTrash(APIView):
         # permission check
         username = request.user.username
         repo_owner = get_repo_owner(request, repo_id)
-        if username != repo_owner or not config.ENABLE_USER_CLEAN_TRASH:
+        if not config.ENABLE_USER_CLEAN_TRASH:
             error_msg = 'Permission denied.'
             return api_error(status.HTTP_403_FORBIDDEN, error_msg)
 
+        if '@seafile_group' in repo_owner:
+            group_id = get_group_id_by_repo_owner(repo_owner)
+            if not is_group_admin(group_id, username):
+                error_msg = 'Permission denied.'
+                return api_error(status.HTTP_403_FORBIDDEN, error_msg)
+        else:
+            if username != repo_owner:
+                error_msg = 'Permission denied.'
+                return api_error(status.HTTP_403_FORBIDDEN, error_msg)
+
         try:
             seafile_api.clean_up_repo_history(repo_id, keep_days)
             org_id = None if not request.user.org else request.user.org.org_id
diff --git a/seahub/api2/views.py b/seahub/api2/views.py
index 9c5ea0a18c..d3318cdfb2 100644
--- a/seahub/api2/views.py
+++ b/seahub/api2/views.py
@@ -89,7 +89,7 @@ from seahub.utils.timeutils import utc_to_local, \
         timestamp_to_isoformat_timestr
 from seahub.views import is_registered_user, check_folder_permission, \
     create_default_library, list_inner_pub_repos
-from seahub.views.file import get_file_view_path_and_perm, send_file_access_msg
+from seahub.views.file import get_file_view_path_and_perm, send_file_access_msg, can_edit_file
 if HAS_FILE_SEARCH:
     from seahub_extra.search.utils import search_files, get_search_repos_map, SEARCH_FILEEXT
 from seahub.utils import HAS_OFFICE_CONVERTER
@@ -3156,10 +3156,11 @@ class FileDetailView(APIView):
         entry["last_modifier_contact_email"] = email2contact_email(latest_contributor)
 
         try:
-            entry["size"] = get_file_size(real_repo_id, repo.version, obj_id)
+            file_size = get_file_size(real_repo_id, repo.version, obj_id)
         except Exception as e:
             logger.error(e)
-            entry["size"] = 0
+            file_size = 0
+        entry["size"] = file_size
 
         starred_files = UserStarredFiles.objects.filter(repo_id=repo_id,
                 path=path)
@@ -3168,6 +3169,8 @@ class FileDetailView(APIView):
         comment_total = file_comments.count()
         entry["comment_total"] = comment_total
 
+        entry["can_edit"], _ = can_edit_file(file_name, file_size, repo)
+
         return Response(entry)
 
 
diff --git a/seahub/templates/history_file_view_react.html b/seahub/templates/history_file_view_react.html
new file mode 100644
index 0000000000..5652c4c98c
--- /dev/null
+++ b/seahub/templates/history_file_view_react.html
@@ -0,0 +1,47 @@
+{% extends "base_for_react.html" %}
+{% load seahub_tags i18n %}
+{% load render_bundle from webpack_loader %}
+
+{% block sub_title %}{{file_name}} - {% endblock %}
+
+{% block extra_style %}
+{% if filetype == 'PDF' %}
+    <link rel="resource" type="application/l10n" href="{{ MEDIA_URL }}js/pdf/locale/locale.properties" />
+{% endif %}
+{% render_bundle 'historyTrashFileView' 'css' %}
+{% endblock %}
+
+{% block extra_script %}
+<script type="text/javascript">
+// overwrite the one in base_for_react.html
+window.app.pageOptions = {
+  fromTrash: {% if from_trash %}true{% else %}false{% endif %},
+
+  fileName: '{{ file_name|escapejs }}',
+  commitTime: '{{ current_commit.props.ctime|tsstr_sec }}',
+
+  canDownloadFile: {% if can_download_file %}true{% else %}false{% endif %},
+  repoID: '{{ repo.id }}',
+  objID: '{{ obj_id }}',
+  path: '{{ path|escapejs }}',
+
+  fileType: '{{filetype}}',
+  rawPath: '{{ raw_path|escapejs }}',
+  err: {% if err %}'{{ err }}'{% else %}''{% endif %},
+
+  // for text file
+  fileExt: '{{ fileext|escapejs }}',
+  // for text/markdown file
+  fileContent: '{{ file_content|escapejs }}'
+};
+</script>
+{% render_bundle 'historyTrashFileView' 'js' %}
+{% if filetype == 'PDF' %}
+<script type="text/javascript">
+  var sf_file_url = '{{ raw_path|escapejs }}';
+  var sf_pdfworkerjs_url = '{{MEDIA_URL}}js/pdf/pdf.worker.min.js';
+</script>
+<script type="text/javascript" src="{{MEDIA_URL}}js/pdf/pdf.min.js"></script>
+<script type="text/javascript" src="{{MEDIA_URL}}js/pdf/viewer.js"></script>
+{% endif %}
+{% endblock %}
diff --git a/seahub/views/file.py b/seahub/views/file.py
index e4434a51b6..c98ac00b60 100644
--- a/seahub/views/file.py
+++ b/seahub/views/file.py
@@ -1005,7 +1005,8 @@ def view_history_file(request, repo_id):
     repo = ret_dict['repo']
     ret_dict['zipped'] = gen_path_link(path, repo.name)
 
-    return render(request, 'view_history_file.html', ret_dict)
+    #return render(request, 'view_history_file.html', ret_dict)
+    return render(request, 'history_file_view_react.html', ret_dict)
 
 @repo_passwd_set_required
 def view_trash_file(request, repo_id):
@@ -1030,7 +1031,9 @@ def view_trash_file(request, repo_id):
         tmp_path = posixpath.join(basedir.rstrip('/'), ret_dict['path'].lstrip('/'))
         ret_dict['path'] = tmp_path
 
-    return render(request, 'view_trash_file.html', ret_dict)
+    #return render(request, 'view_trash_file.html', ret_dict)
+    ret_dict['from_trash'] = True
+    return render(request, 'history_file_view_react.html', ret_dict)
 
 @repo_passwd_set_required
 def view_snapshot_file(request, repo_id):
@@ -1052,7 +1055,8 @@ def view_snapshot_file(request, repo_id):
     repo = ret_dict['repo']
     ret_dict['zipped'] = gen_path_link(path, repo.name)
 
-    return render(request, 'view_snapshot_file.html', ret_dict)
+    #return render(request, 'view_snapshot_file.html', ret_dict)
+    return render(request, 'history_file_view_react.html', ret_dict)
 
 def _download_file_from_share_link(request, fileshare):
     """Download shared file.
diff --git a/tests/api/endpoints/test_repo_trash.py b/tests/api/endpoints/test_repo_trash.py
index ec2a324506..b172a5a070 100644
--- a/tests/api/endpoints/test_repo_trash.py
+++ b/tests/api/endpoints/test_repo_trash.py
@@ -3,9 +3,10 @@ import json
 
 from django.core.urlresolvers import reverse
 
-from seaserv import seafile_api
+from seaserv import seafile_api, ccnet_api
 from seahub.test_utils import BaseTestCase
 
+from seahub.group.utils import is_group_admin
 from tests.common.utils import randstring
 
 class RepoTrashTest(BaseTestCase):
@@ -26,9 +27,13 @@ class RepoTrashTest(BaseTestCase):
 
         self.url = reverse('api-v2.1-repo-trash', args=[self.repo_id])
 
+        self.tmp_user = self.create_user(
+            'user_%s@test.com' % randstring(4), is_staff=False)
+
     def tearDown(self):
         self.remove_repo()
         self.remove_group()
+        self.remove_user(self.tmp_user.username)
 
     def test_can_get(self):
 
@@ -83,6 +88,56 @@ class RepoTrashTest(BaseTestCase):
         json_resp = json.loads(resp.content)
         assert len(json_resp['data']) == 0
 
+    def test_can_clean_department_repo_trash(self):
+        # create a department
+        group_id = ccnet_api.create_group('department_test', 'system admin', parent_group_id=-1)
+        seafile_api.set_group_quota(group_id, -2)
+        repo_id = seafile_api.add_group_owned_repo(group_id, 'dep_test', 'rw')
+        repo_owner = seafile_api.get_repo_owner(repo_id)
+        assert '@seafile_group' in repo_owner
+        group_repos = seafile_api.get_repos_by_group(group_id)
+        assert len(group_repos) == 1
+        group = ccnet_api.get_group(group_id)
+
+        # department add user
+        ccnet_api.group_add_member(group_id, group.creator_name, self.user_name)
+        ccnet_api.group_add_member(group_id, group.creator_name, self.tmp_user.username)
+        ccnet_api.group_set_admin(group_id, self.user_name)
+        ccnet_api.group_unset_admin(group_id, self.tmp_user.username)
+        assert is_group_admin(group_id, self.user_name)
+        assert not is_group_admin(group_id, self.tmp_user.username)
+
+        file_name = 'dep_test.txt'
+        self.create_file(
+            repo_id=repo_id, parent_dir='/', filename=file_name, username=self.user_name)
+
+        # delete a file first
+        seafile_api.del_file(repo_id, '/', file_name, self.user_name)
+
+        # get trash item count
+        self.login_as(self.user)
+        resp = self.client.get(reverse('api-v2.1-repo-trash', args=[repo_id]))
+        json_resp = json.loads(resp.content)
+        assert len(json_resp['data']) > 0
+
+        # department member can not clean trash
+        self.logout()
+        self.login_as(self.tmp_user)
+        resp = self.client.delete(self.url)
+        self.assertEqual(403, resp.status_code)
+
+        # department admin can clean library trash
+        self.logout()
+        self.login_as(self.user)
+        ccnet_api.group_set_admin(group_id, self.user_name)
+        resp = self.client.delete(self.url)
+        self.assertEqual(200, resp.status_code)
+
+        # get trash item count again
+        resp = self.client.get(self.url)
+        json_resp = json.loads(resp.content)
+        assert len(json_resp['data']) == 0
+
     def test_can_not_clean_with_invalid_user_permission(self):
 
         self.login_as(self.admin)