import and export sdoc

frontend/src/components/cur-dir-path/dir-path.js

@@ -34,6 +34,7 @@ const propTypes = {
   filePermission: PropTypes.string,
   onFileTagChanged: PropTypes.func.isRequired,
   onItemMove: PropTypes.func.isRequired,
+  loadDirentList: PropTypes.func.isRequired,
 };
 
 class DirPath extends React.Component {
@@ -177,6 +178,7 @@ class DirPath extends React.Component {
                 onAddFolder={this.props.onAddFolder}
                 onUploadFile={this.props.onUploadFile}
                 onUploadFolder={this.props.onUploadFolder}
+                loadDirentList={this.props.loadDirentList}
               >
                 <span className="path-file-name">{item}</span>
               </DirOperationToolBar>

frontend/src/components/cur-dir-path/index.js

@@ -40,6 +40,7 @@ const propTypes = {
   onFileTagChanged: PropTypes.func.isRequired,
   metadataViewId: PropTypes.string,
   onItemMove: PropTypes.func.isRequired,
+  loadDirentList: PropTypes.func.isRequired,
 };
 
 class CurDirPath extends React.Component {
@@ -86,6 +87,7 @@ class CurDirPath extends React.Component {
           onFileTagChanged={this.props.onFileTagChanged}
           repoTags={this.props.repoTags}
           onItemMove={this.props.onItemMove}
+          loadDirentList={this.props.loadDirentList}
         />
         {isDesktop &&
         <DirTool

frontend/src/components/dialog/upload-sdoc-dialog.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert, Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+import toaster from '../toast';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+
+const propTypes = {
+  toggle: PropTypes.func.isRequired,
+  repoID: PropTypes.string.isRequired,
+  itemPath: PropTypes.string.isRequired,
+  loadDirentList: PropTypes.func.isRequired,
+};
+
+class UploadSdocDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      errorMsg: ''
+    };
+    this.fileInputRef = React.createRef();
+  }
+
+  toggle = () => {
+    this.props.toggle();
+  };
+
+  openFileInput = () => {
+    this.fileInputRef.current.click();
+  };
+
+  uploadSdoc = (file) => {
+    toaster.notify(gettext('It may take some time, please wait.'));
+    let { repoID, itemPath } = this.props;
+    seafileAPI.importSdoc(file, repoID, itemPath).then((res) => {
+      this.props.loadDirentList(itemPath);
+    }).catch((error) => {
+      let errMsg = Utils.getErrorMsg(error);
+      toaster.danger(errMsg);
+    });
+  };
+
+  uploadFile = (e) => {
+    // no file selected
+    if (!this.fileInputRef.current.files.length) {
+      return;
+    }
+    // check file extension
+    let fileName = this.fileInputRef.current.files[0].name;
+    if (fileName.substr(fileName.lastIndexOf('.') + 1) != 'zsdoc') {
+      this.setState({
+        errorMsg: gettext('Please choose a .zsdoc file.')
+      });
+      return;
+    }
+    const file = this.fileInputRef.current.files[0];
+    this.uploadSdoc(file);
+    this.toggle();
+  };
+
+  render() {
+    let { errorMsg } = this.state;
+    return (
+      <Modal isOpen={true} toggle={this.toggle}>
+        <ModalHeader toggle={this.toggle}>{gettext('Import sdoc')}</ModalHeader>
+        <ModalBody>
+          <button className="btn btn-outline-primary" onClick={this.openFileInput}>{gettext('Import sdoc')}</button>
+          <input className="d-none" type="file" onChange={this.uploadFile} ref={this.fileInputRef} />
+          {errorMsg && <Alert color="danger">{errorMsg}</Alert>}
+        </ModalBody>
+        <ModalFooter>
+          <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+UploadSdocDialog.propTypes = propTypes;
+
+export default UploadSdocDialog;

frontend/src/components/dirent-grid-view/dirent-grid-view.js

@@ -295,10 +295,24 @@ class DirentGridView extends React.Component {
 
   exportDocx = () => {
     const serviceUrl = window.app.config.serviceURL;
+    let dirent = this.state.activeDirent ? this.state.activeDirent : '';
+    if (!dirent) {
+      return;
+    }
     let repoID = this.props.repoID;
-    let filePath = this.getDirentPath(this.props.dirent);
-    let exportToDocxUrl = serviceUrl + '/repo/sdoc_export_to_docx/' + repoID + '/?file_path=' + filePath;
-    window.location.href = exportToDocxUrl;
+    let filePath = this.getDirentPath(dirent);
+    window.location.href = serviceUrl + '/repo/sdoc_export_to_docx/' + repoID + '/?file_path=' + filePath;
+  };
+
+  exportSdoc = () => {
+    const serviceUrl = window.app.config.serviceURL;
+    let dirent = this.state.activeDirent ? this.state.activeDirent : '';
+    if (!dirent) {
+      return;
+    }
+    let repoID = this.props.repoID;
+    let filePath = this.getDirentPath(dirent);
+    window.location.href = serviceUrl + '/lib/' + repoID + '/file/' + filePath + '?dl=1';
   };
 
   onMenuItemClick = (operation, currentObject, event) => {
@@ -337,6 +351,9 @@ class DirentGridView extends React.Component {
       case 'Export docx':
         this.exportDocx();
         break;
+      case 'Export sdoc':
+        this.exportSdoc();
+        break;
       case 'Convert to sdoc':
         this.onItemConvert(currentObject, event, 'sdoc');
         break;

frontend/src/components/dirent-list-view/dirent-list-item.js

@@ -237,6 +237,14 @@ class DirentListItem extends React.Component {
     window.location.href = exportToDocxUrl;
   };
 
+  exportSdoc = () => {
+    const serviceUrl = window.app.config.serviceURL;
+    let repoID = this.props.repoID;
+    let filePath = this.getDirentPath(this.props.dirent);
+    let exportToSdocUrl = serviceUrl + '/lib/' + repoID + '/file/' + filePath + '?dl=1';
+    window.location.href = exportToSdocUrl;
+  };
+
   closeSharedDialog = () => {
     this.setState({ isShareDialogShow: !this.state.isShareDialogShow });
   };
@@ -293,6 +301,9 @@ class DirentListItem extends React.Component {
       case 'Export docx':
         this.exportDocx();
         break;
+      case 'Export sdoc':
+        this.exportSdoc();
+        break;
       case 'Convert to sdoc':
         this.onItemConvert(event, 'sdoc');
         break;

frontend/src/components/toolbar/dir-operation-toolbar.js

@@ -7,6 +7,7 @@ import ModalPortal from '../modal-portal';
 import CreateFolder from '../../components/dialog/create-folder-dialog';
 import CreateFile from '../../components/dialog/create-file-dialog';
 import ShareDialog from '../../components/dialog/share-dialog';
+import UploadSdocDialog from '../dialog/upload-sdoc-dialog';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -22,7 +23,8 @@ const propTypes = {
   onUploadFile: PropTypes.func.isRequired,
   onUploadFolder: PropTypes.func.isRequired,
   direntList: PropTypes.array.isRequired,
-  children: PropTypes.object
+  children: PropTypes.object,
+  loadDirentList: PropTypes.func
 };
 
 class DirOperationToolbar extends React.Component {
@@ -37,7 +39,8 @@ class DirOperationToolbar extends React.Component {
       operationMenuStyle: '',
       isDesktopMenuOpen: false,
       isSubMenuShown: false,
-      isMobileOpMenuOpen: false
+      isMobileOpMenuOpen: false,
+      isUploadSdocDialogOpen: false,
     };
   }
 
@@ -156,6 +159,10 @@ class DirOperationToolbar extends React.Component {
     }
   };
 
+  onToggleUploadSdoc = () => {
+    this.setState({ isUploadSdocDialogOpen: !this.state.isUploadSdocDialogOpen });
+  };
+
   render() {
     let { path, repoName, userPerm } = this.props;
 
@@ -185,6 +192,10 @@ class DirOperationToolbar extends React.Component {
             'icon': 'upload-files',
             'text': gettext('Upload Folder'),
             'onClick': this.onUploadFolder
+          }, {
+            'icon': 'upload-sdoc',
+            'text': gettext('Upload Sdoc'),
+            'onClick': this.onToggleUploadSdoc
           });
         } else {
           opList.push({
@@ -348,6 +359,14 @@ class DirOperationToolbar extends React.Component {
             />
           </ModalPortal>
         }
+        {this.state.isUploadSdocDialogOpen &&
+          <UploadSdocDialog
+            toggle={this.onToggleUploadSdoc}
+            repoID={this.props.repoID}
+            itemPath={this.props.path}
+            loadDirentList={this.props.loadDirentList}
+          />
+        }
       </Fragment>
     );
   }

frontend/src/pages/lib-content-view/lib-content-container.js

@@ -224,6 +224,7 @@ class LibContentContainer extends React.Component {
               repoTags={this.props.repoTags}
               metadataViewId={this.props.metadataViewId}
               onItemMove={this.props.onItemMove}
+              loadDirentList={this.props.loadDirentList}
             />
             <ToolbarForSelectedDirents
               repoID={this.props.repoID}

frontend/src/utils/text-translation.js

@@ -27,6 +27,7 @@ const TextTranslation = {
   'CONVERT_TO_SDOC': { key: 'Convert to sdoc', value: gettext('Convert to sdoc') },
   'CONVERT_TO_DOCX': { key: 'Convert to docx', value: gettext('Convert to docx') },
   'EXPORT_DOCX': { key: 'Export docx', value: gettext('Export as docx') },
+  'EXPORT_SDOC': { key: 'Export sdoc', value: gettext('Export sdoc') },
   'HISTORY': { key: 'History', value: gettext('History') },
   'ACCESS_LOG': { key: 'Access Log', value: gettext('Access Log') },
   'PROPERTIES': { key: 'Properties', value: gettext('Properties') },

frontend/src/utils/utils.js

@@ -547,7 +547,7 @@ export const Utils = {
   getFileOperationList: function (isRepoOwner, currentRepoInfo, dirent, isContextmenu) {
     let list = [];
     const { SHARE, DOWNLOAD, DELETE, RENAME, MOVE, COPY, TAGS, UNLOCK, LOCK, UNFREEZE_DOCUMENT, FREEZE_DOCUMENT,
-      HISTORY, ACCESS_LOG, PROPERTIES, OPEN_VIA_CLIENT, ONLYOFFICE_CONVERT, CONVERT_TO_MARKDOWN, CONVERT_TO_DOCX, EXPORT_DOCX, CONVERT_TO_SDOC } = TextTranslation;
+      HISTORY, ACCESS_LOG, PROPERTIES, OPEN_VIA_CLIENT, ONLYOFFICE_CONVERT, CONVERT_TO_MARKDOWN, CONVERT_TO_DOCX, EXPORT_DOCX, CONVERT_TO_SDOC, EXPORT_SDOC } = TextTranslation;
     const permission = dirent.permission;
     const { isCustomPermission, customPermission } = Utils.getUserPermission(permission);
 
@@ -639,6 +639,7 @@ export const Utils = {
         list.push(CONVERT_TO_MARKDOWN);
         list.push(CONVERT_TO_DOCX);
         list.push(EXPORT_DOCX);
+        list.push(EXPORT_SDOC);
       }
     }
 

seahub/api2/authentication.py

@@ -2,7 +2,7 @@
 import datetime
 import logging
 from rest_framework import status
-from rest_framework.authentication import BaseAuthentication
+from rest_framework.authentication import BaseAuthentication, SessionAuthentication
 from rest_framework.exceptions import APIException
 
 from seaserv import ccnet_api
@@ -216,3 +216,19 @@ def authenticate(self, request):
             return None
 
         return user, auth[1]
+
+
+class CsrfExemptSessionAuthentication(SessionAuthentication):
+    """
+    request.POST is accessed by CsrfViewMiddleware which is enabled by default.
+    This means you will need to use csrf_exempt()
+    on your view to allow you to change the upload handlers.
+
+    DRF's SessionAuthentication uses Django's session framework
+    for authentication which requires CSRF to be checked.
+
+    This Class is override enforce_csrf to solve above problem
+    """
+
+    def enforce_csrf(self, request):
+        return  # To not perform the csrf check previously happening

seahub/api2/urls.py

@@ -50,6 +50,7 @@
     re_path(r'^repos/(?P<repo_id>[-0-9a-f]{36})/upload-shared-links/$', RepoUploadSharedLinks.as_view(), name="api2-repo-upload-shared-links"),
     re_path(r'^repos/(?P<repo_id>[-0-9a-f]{36})/upload-shared-links/(?P<token>[a-f0-9]+)/$', RepoUploadSharedLink.as_view(), name="api2-repo-upload-shared-link"),
     re_path(r'^repos/(?P<repo_id>[-0-9a-f]{36})/upload-link/$', UploadLinkView.as_view()),
+    re_path(r'^repos/(?P<repo_id>[-0-9a-f]{36})/import-sdoc/$', ImportSdoc.as_view()),
     re_path(r'^repos/(?P<repo_id>[-0-9a-f]{36})/update-link/$', UpdateLinkView.as_view()),
     re_path(r'^repos/(?P<repo_id>[-0-9a-f]{36})/upload-blks-link/$', UploadBlksLinkView.as_view()),
     re_path(r'^repos/(?P<repo_id>[-0-9a-f]{36})/update-blks-link/$', UpdateBlksLinkView.as_view()),