diff --git a/frontend/src/components/draft-list-view/draft-list-item.js b/frontend/src/components/draft-list-view/draft-list-item.js
index 64326d792c..a081a765aa 100644
--- a/frontend/src/components/draft-list-view/draft-list-item.js
+++ b/frontend/src/components/draft-list-view/draft-list-item.js
@@ -108,7 +108,9 @@ class DraftListItem extends React.Component {
               />
               <DropdownMenu>
                 <DropdownItem onClick={this.onDeleteHandler}>{gettext('Delete')}</DropdownItem>
-                <DropdownItem onClick={this.onPublishHandler}>{gettext('Publish')}</DropdownItem>
+                {draft.status == 'open' &&
+                  <DropdownItem onClick={this.onPublishHandler}>{gettext('Publish')}</DropdownItem>
+                }
               </DropdownMenu>
             </Dropdown>
           )}
diff --git a/frontend/src/draft.js b/frontend/src/draft.js
index 07cd30868e..38d021a88e 100644
--- a/frontend/src/draft.js
+++ b/frontend/src/draft.js
@@ -5,7 +5,7 @@ import { Button } from 'reactstrap';
 /* eslint-disable */
 import Prism from 'prismjs';
 /* eslint-enable */
-import { siteRoot, gettext, draftOriginFilePath, draftFilePath, author, authorAvatar, originFileExists, draftID, draftFileName, draftRepoID } from './utils/constants';
+import { siteRoot, gettext, draftOriginFilePath, draftFilePath, author, authorAvatar, originFileExists, draftFileExists, draftID, draftFileName, draftRepoID, draftStatus, draftPublishVersion, originFileVersion } from './utils/constants';
 import { seafileAPI } from './utils/seafile-api';
 import axios from 'axios';
 import DiffViewer from '@seafile/seafile-editor/dist/viewer/diff-viewer';
@@ -64,80 +64,114 @@ class Draft extends React.Component {
   }
 
   initialContent = () => {
-    if (!originFileExists) {
-      seafileAPI.getFileDownloadLink(draftRepoID, draftFilePath)
-        .then(res => { 
-          seafileAPI.getFileContent(res.data)
-            .then(res => {
-              this.setState({
-                draftContent: res.data,
-                draftOriginContent: res.data,
-                isLoading: false,
-                isShowDiff: false
-              }); 
-            });
-        });
-      return;
-    }
-
-    const hash = window.location.hash;
-    if (hash.indexOf('#history-') === 0) {
-      const currentCommitID = hash.slice(9, 49);
-      const preCommitID = hash.slice(50, 90);
-      let preItemFilePath, currentItemFilePath;
-      this.setState({
-        isLoading: false,
-        activeTab: 'history',
-      });
-      seafileAPI.listFileHistoryRecords(draftRepoID, draftFilePath, 1, 25).then((res) => {
-        const historyList = res.data.data;        
-        this.setState({
-          historyList: historyList,
-          totalReversionCount: res.data.total_count
-        });
-        for (let i = 0, length = historyList.length; i < length; i++) {
-          if (preCommitID === historyList[i].commit_id) {
-            this.setState({
-              activeItem: i
-            });
-            preItemFilePath = historyList[i].path;
-          }
-          if (currentCommitID === historyList[i].commit_id) {
-            currentItemFilePath = historyList[i].path;
-          }
-          if (preItemFilePath && currentItemFilePath) break;
+    switch(draftStatus) {
+      case 'open':
+        if (!draftFileExists) {
+          this.setState({
+            isLoading: false,
+            isShowDiff: false
+          });
+          return;
         }
-        axios.all([
-          seafileAPI.getFileRevision(draftRepoID, currentCommitID, currentItemFilePath),
-          seafileAPI.getFileRevision(draftRepoID, preCommitID, preItemFilePath)
-        ]).then(axios.spread((res1, res2) => {
-          axios.all([seafileAPI.getFileContent(res1.data), seafileAPI.getFileContent(res2.data)]).then(axios.spread((content1, content2) => {
-            this.setDiffViewerContent(content2.data, content1.data);
+
+        if (!originFileExists) {
+          seafileAPI.getFileDownloadLink(draftRepoID, draftFilePath)
+            .then(res => { 
+              seafileAPI.getFileContent(res.data)
+                .then(res => {
+                  this.setState({
+                    draftContent: res.data,
+                    draftOriginContent: res.data,
+                    isLoading: false,
+                    isShowDiff: false
+                  }); 
+                });
+            });
+          return;
+        }
+
+        const hash = window.location.hash;
+        if (hash.indexOf('#history-') === 0) {
+          const currentCommitID = hash.slice(9, 49);
+          const preCommitID = hash.slice(50, 90);
+          let preItemFilePath, currentItemFilePath;
+          this.setState({
+            isLoading: false,
+            activeTab: 'history',
+          });
+          seafileAPI.listFileHistoryRecords(draftRepoID, draftFilePath, 1, 25).then((res) => {
+            const historyList = res.data.data;        
+            this.setState({
+              historyList: historyList,
+              totalReversionCount: res.data.total_count
+            });
+            for (let i = 0, length = historyList.length; i < length; i++) {
+              if (preCommitID === historyList[i].commit_id) {
+                this.setState({
+                  activeItem: i
+                });
+                preItemFilePath = historyList[i].path;
+              }
+              if (currentCommitID === historyList[i].commit_id) {
+                currentItemFilePath = historyList[i].path;
+              }
+              if (preItemFilePath && currentItemFilePath) break;
+            }
+            axios.all([
+              seafileAPI.getFileRevision(draftRepoID, currentCommitID, currentItemFilePath),
+              seafileAPI.getFileRevision(draftRepoID, preCommitID, preItemFilePath)
+            ]).then(axios.spread((res1, res2) => {
+              axios.all([seafileAPI.getFileContent(res1.data), seafileAPI.getFileContent(res2.data)]).then(axios.spread((content1, content2) => {
+                this.setDiffViewerContent(content2.data, content1.data);
+              }));
+            }));
+            return;
+          });
+        } else {
+          axios.all([
+            seafileAPI.getFileDownloadLink(draftRepoID, draftFilePath),
+            seafileAPI.getFileDownloadLink(draftRepoID, draftOriginFilePath)
+          ]).then(axios.spread((res1, res2) => {
+            axios.all([
+              seafileAPI.getFileContent(res1.data),
+              seafileAPI.getFileContent(res2.data)
+            ]).then(axios.spread((draftContent, draftOriginContent) => {
+              this.setState({
+                draftContent: draftContent.data,
+                draftOriginContent: draftOriginContent.data,
+                isLoading: false
+              });
+              let that = this;
+              setTimeout(() => {
+                that.getChangedNodes();
+              }, 100);
+            }));
           }));
-        }));
-        return;
-      });
-    } else {
-      axios.all([
-        seafileAPI.getFileDownloadLink(draftRepoID, draftFilePath),
-        seafileAPI.getFileDownloadLink(draftRepoID, draftOriginFilePath)
-      ]).then(axios.spread((res1, res2) => {
+        }
+        break;
+      case 'published':
+        if (!originFileExists) {
+          this.setState({
+            isLoading: false,
+            isShowDiff: false
+          });
+          return;
+        }
+
+        let dl0 = siteRoot + 'repo/' + draftRepoID + '/' + draftPublishVersion + '/download?' + 'p=' + draftOriginFilePath; 
+        let dl = siteRoot + 'repo/' + draftRepoID + '/' + originFileVersion + '/download?' + 'p=' + draftOriginFilePath; 
         axios.all([
-          seafileAPI.getFileContent(res1.data),
-          seafileAPI.getFileContent(res2.data)
+          seafileAPI.getFileContent(dl0),
+          seafileAPI.getFileContent(dl)
         ]).then(axios.spread((draftContent, draftOriginContent) => {
           this.setState({
             draftContent: draftContent.data,
             draftOriginContent: draftOriginContent.data,
-            isLoading: false
-          });
-          let that = this;
-          setTimeout(() => {
-            that.getChangedNodes();
-          }, 100);
+            isLoading: false,
+          }); 
         }));
-      }));
-    }
+        break;
+      } 
   }
 
   onHistoryItemClick = (currentItem, preItem, activeItem) => {
@@ -486,15 +520,6 @@ class Draft extends React.Component {
     }
   } 
 
-  renderNavItems = () => {
-    return (
-      <Nav tabs className="review-side-panel-nav">
-        {this.showNavItem('info')}
-        {this.showNavItem('comments')}
-        {this.showNavItem('history')}
-      </Nav>
-    );
-  }
 
   setBtnPosition = (e) => {
     const nativeSelection = window.getSelection();
@@ -661,6 +686,77 @@ class Draft extends React.Component {
     document.removeEventListener('selectionchange', this.setBtnPosition);
   }
 
+  renderDiffButton = () => {
+    switch(draftStatus) {
+      case 'open':
+        if (!draftFileExists) {
+          return;
+        }
+
+        if (!originFileExists) {
+          return;
+        }
+
+        return this.showDiffButton();
+      case 'published':
+        if (!originFileExists) {
+          return;
+        } 
+
+        return this.showDiffButton();
+    }
+  }
+
+  renderNavItems = () => {
+    switch (draftStatus) {
+      case 'open':
+        if (!draftFileExists) {
+          return (
+            <Nav tabs className="review-side-panel-nav">
+            {this.showNavItem('info')}
+            </Nav>
+          );
+        }
+
+        return (
+          <Nav tabs className="review-side-panel-nav">
+            {this.showNavItem('info')}
+            {this.showNavItem('comments')}
+            {this.showNavItem('history')}
+          </Nav>
+        );
+      case 'published':
+        if (!originFileExists) {
+          return (
+            <Nav tabs className="review-side-panel-nav">
+              {this.showNavItem('info')}
+            </Nav>
+          );
+        }
+        return (
+          <Nav tabs className="review-side-panel-nav">
+            {this.showNavItem('info')}
+            {this.showNavItem('comments')}
+          </Nav>
+        );
+    }
+  }
+
+  renderContent = () => {
+    switch(draftStatus) {
+      case 'open':
+        if (!draftFileExists) {
+          return <p className="error">{gettext('Draft has been deleted.')}</p>;
+        }
+        return this.showDiffViewer();
+      case 'published':
+        if (!originFileExists) {
+          return <p className="error">{gettext('Original file has been deleted.')}</p>;
+        }
+        return this.showDiffViewer();
+    }
+  }
+
   render() {
     const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null;
     const draftLink = siteRoot + 'lib/' + draftRepoID + '/file' + draftFilePath + '?mode=edit';
@@ -672,21 +768,25 @@ class Draft extends React.Component {
               <span className="sf2-icon-review"></span>
             </div>
             <div className="info-item file-info">
-              <React.Fragment>
-                <span className="file-name">{draftFileName}</span>
-                <a href={draftLink} className="draft-link">{gettext('Edit draft')}</a>
-              </React.Fragment>
+                <React.Fragment>
+                  <span className="file-name">{draftFileName}</span>
+                  {draftFileExists &&
+                    <a href={draftLink} className="draft-link">{gettext('Edit draft')}</a>
+                  }
+                </React.Fragment>
             </div>
           </div>
           <div className="button-group">
-            {this.showDiffButton()}
-            <button 
-              className='btn btn-success file-operation-btn' 
-              title={gettext('Publish draft')}
-              onClick={this.onPublishDraft}
-            >
-              {gettext('Publish')}
-            </button>
+            {this.renderDiffButton()}
+            {draftFileExists &&
+              <button 
+                className='btn btn-success file-operation-btn' 
+                title={gettext('Publish draft')}
+                onClick={this.onPublishDraft}
+              >
+                {gettext('Publish')}
+              </button>
+            }
           </div>
         </div>
         <div id="main" className="main" ref="main">
@@ -698,7 +798,7 @@ class Draft extends React.Component {
                 </div> 
                 :
                 <div className="markdown-viewer-render-content article">
-                  {this.showDiffViewer()}
+                  {this.renderContent()}
                 </div>
               }
             </div>
@@ -713,14 +813,18 @@ class Draft extends React.Component {
                         reviewers={this.state.reviewers}
                         toggleAddReviewerDialog={this.toggleAddReviewerDialog}/>
                       <SidePanelAuthor/>
-                      <UnresolvedComments number={this.state.unresolvedComments}/>
+                      {draftFileExists &&
+                        <UnresolvedComments number={this.state.unresolvedComments}/>
+                      }
                       {(this.state.isShowDiff === true && this.state.changedNodes.length > 0) &&
                       <SidePanelChanges
                         changedNumber={this.state.changedNodes.length}
                         scrollToChangedNode={this.scrollToChangedNode}/>
                       }
                       <SidePanelOrigin originRepoName={this.state.originRepoName}/>
-                      <a href={draftLink}><Button color="secondary">{gettext('Edit Draft')}</Button></a>
+                      {draftFileExists &&
+                        <a href={draftLink}><Button color="secondary">{gettext('Edit Draft')}</Button></a>
+                      }
                     </div>
                   </TabPane>
                   <TabPane tabId="comments" className="comments">
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index f52c3725f8..21aeb5a2f8 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -72,6 +72,10 @@ export const draftRepoID = window.draft ? window.draft.config.draftRepoID : '';
 export const author = window.draft ? window.draft.config.author : '';
 export const authorAvatar = window.draft ? window.draft.config.authorAvatar : '';
 export const originFileExists = window.draft ? window.draft.config.originFileExists : '';
+export const draftFileExists = window.draft ? window.draft.config.draftFileExists : '';
+export const draftStatus = window.draft ? window.draft.config.draftStatus : '';
+export const draftPublishVersion = window.draft ? window.draft.config.draftPublishVersion : '';
+export const originFileVersion = window.draft ? window.draft.config.originFileVersion : '';
 
 // org admin
 export const orgID = window.org ? window.org.pageOptions.orgID : '';
diff --git a/seahub/drafts/models.py b/seahub/drafts/models.py
index e4d8e05d78..4d566212b7 100644
--- a/seahub/drafts/models.py
+++ b/seahub/drafts/models.py
@@ -92,6 +92,7 @@ class DraftManager(models.Manager):
             draft['draft_file_path'] = d.draft_file_path
             draft['created_at'] = datetime_to_isoformat_timestr(d.created_at)
             draft['updated_at'] = datetime_to_isoformat_timestr(d.updated_at)
+            draft['status'] = d.status
 
             data.append(draft)
 
@@ -242,21 +243,16 @@ class Draft(TimestampedModel):
                 username=operator, need_progress=0, synchronous=1
             )
 
-        self.delete(operator)
-
         published_file_path = posixpath.join(file_uuid.parent_path, file_name)
 
-        return published_file_path
         # get draft published version
-        # file_id = seafile_api.get_file_id_by_path(self.origin_repo_id, origin_file_path)
+        file_id = seafile_api.get_file_id_by_path(self.origin_repo_id, published_file_path)
 
-        # if not file_id:
-        #     TODO change error msg
-        #     raise OriginalFileConflict
+        self.publish_file_version = file_id
+        self.status = 'published'
+        self.save()
 
-        # self.publish_file_version = file_id
-        # self.status = 'published'
-        # self.save()
+        return published_file_path
 
     def to_dict(self):
         uuid = FileUUIDMap.objects.get_fileuuidmap_by_uuid(self.origin_file_uuid)
diff --git a/seahub/drafts/views.py b/seahub/drafts/views.py
index f388e69be7..2f8da2b122 100644
--- a/seahub/drafts/views.py
+++ b/seahub/drafts/views.py
@@ -37,6 +37,11 @@ def draft(request, pk):
     if not origin_file:
         origin_file_exists = False
 
+    draft_file = seafile_api.get_file_id_by_path(origin_repo_id, d.draft_file_path)
+    draft_file_exists = True
+    if not draft_file:
+        draft_file_exists = False
+
     draft_file_name = os.path.basename(d.draft_file_path)
 
     author_info = user_to_dict(d.username, avatar_size=32)
@@ -51,4 +56,8 @@ def draft(request, pk):
         "author": author_info['user_name'],
         "author_avatar_url": author_info['avatar_url'],
         "origin_file_exists": origin_file_exists,
+        "draft_file_exists": draft_file_exists,
+        "draft_status": d.status,
+        "publish_file_version": d.publish_file_version,
+        "origin_file_version": d.origin_file_version
     })
diff --git a/seahub/templates/draft.html b/seahub/templates/draft.html
index 6a92530f5f..35bf45e3c6 100644
--- a/seahub/templates/draft.html
+++ b/seahub/templates/draft.html
@@ -17,7 +17,11 @@
             perm: '{{ permission }}',
             author: '{{ author }}',
             authorAvatar: '{{ author_avatar_url }}',
-            originFileExists: '{{ origin_file_exists }}' === 'True',
+            originFileExists: {% if origin_file_exists %} true {% else %} false {% endif %},
+            draftFileExists: {% if draft_file_exists %} true {% else %} false {% endif %},
+            draftStatus: '{{ draft_status }}',
+            draftPublishVersion: '{{ publish_file_version }}',
+            originFileVersion: '{{ origin_file_version }}',
          }
      };
 </script>