diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1f49a23b8b..99a01e1b54 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16854,9 +16854,9 @@
       }
     },
     "seafile-js": {
-      "version": "0.2.169",
-      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.169.tgz",
-      "integrity": "sha512-wi0ERmE29zatCyYSvHGrHEZlMvz87AKS+vr6+NQ29ewl9fL4uzlISC8+9GeFcgUvBD01E96MvW0j5tUBAbEKRw==",
+      "version": "0.2.170",
+      "resolved": "https://registry.npmjs.org/seafile-js/-/seafile-js-0.2.170.tgz",
+      "integrity": "sha512-V0u0wcdnmkiD4OV6O4b8hBJ6rOF/2mvcKlfOStJmx2ABDYGZquB9BxFHVw5thy4IUx4rl6AgQ2JAX30+i3qDsA==",
       "requires": {
         "@babel/polyfill": "7.12.1",
         "axios": "0.21.1",
diff --git a/frontend/package.json b/frontend/package.json
index a5f7052239..f29698f14c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -34,7 +34,7 @@
     "react-responsive": "^6.1.2",
     "react-select": "^2.4.1",
     "reactstrap": "^6.4.0",
-    "seafile-js": "0.2.169",
+    "seafile-js": "0.2.170",
     "socket.io-client": "^2.2.0",
     "unified": "^7.0.0",
     "url-parse": "^1.4.3",
diff --git a/frontend/src/components/shared-link-file-uploader/file-uploader.js b/frontend/src/components/shared-link-file-uploader/file-uploader.js
index 1f8de219ae..9bc6022772 100644
--- a/frontend/src/components/shared-link-file-uploader/file-uploader.js
+++ b/frontend/src/components/shared-link-file-uploader/file-uploader.js
@@ -27,7 +27,7 @@ const propTypes = {
   fileTypeErrorCallback: PropTypes.func,
   dragAndDrop: PropTypes.bool.isRequired,
   path: PropTypes.string.isRequired,
-  uploadUrlPath: PropTypes.string.isRequired,
+  relativePath: PropTypes.string.isRequired,
   onFileUploadSuccess: PropTypes.func.isRequired
 };
 
@@ -204,8 +204,8 @@ class FileUploader extends React.Component {
         });
       } else {
         this.setUploadFileList(this.resumable.files);
-        let { token, uploadUrlPath } = this.props;
-        seafileAPI.sharedLinkGetFileUploadUrl(token, uploadUrlPath).then(res => {
+        let { token, relativePath } = this.props;
+        seafileAPI.sharedLinkGetFileUploadUrl(token, relativePath).then(res => {
           this.resumable.opts.target = res.data.upload_link + '?ret-json=1';
           this.resumableUpload(resumableFile);
         }).catch(error => {
@@ -217,8 +217,8 @@ class FileUploader extends React.Component {
       this.setUploadFileList(this.resumable.files);
       if (!this.isUploadLinkLoaded) {
         this.isUploadLinkLoaded = true;
-        let { token, uploadUrlPath } = this.props;
-        seafileAPI.sharedLinkGetFileUploadUrl(token, uploadUrlPath).then(res => {
+        let { token, relativePath } = this.props;
+        seafileAPI.sharedLinkGetFileUploadUrl(token, relativePath).then(res => {
           this.resumable.opts.target = res.data.upload_link + '?ret-json=1';
           this.resumable.upload();
         }).catch(error => {
@@ -564,8 +564,8 @@ class FileUploader extends React.Component {
 
   onUploadRetry = (resumableFile) => {
 
-    let { token, uploadUrlPath } = this.props;
-    seafileAPI.sharedLinkGetFileUploadUrl(token, uploadUrlPath).then(res => {
+    let { token, relativePath } = this.props;
+    seafileAPI.sharedLinkGetFileUploadUrl(token, relativePath).then(res => {
       this.resumable.opts.target = res.data.upload_link + '?ret-json=1';
 
       let retryFileList = this.state.retryFileList.filter(item => {
@@ -591,8 +591,8 @@ class FileUploader extends React.Component {
 
   onUploadRetryAll = () => {
 
-    let { token, uploadUrlPath } = this.props;
-    seafileAPI.sharedLinkGetFileUploadUrl(token, uploadUrlPath).then(res => {
+    let { token, relativePath } = this.props;
+    seafileAPI.sharedLinkGetFileUploadUrl(token, relativePath).then(res => {
       this.resumable.opts.target = res.data.upload_link + '?ret-json=1';
       this.state.retryFileList.forEach(item => {
         item.error = false;
@@ -645,8 +645,8 @@ class FileUploader extends React.Component {
   uploadFile = () => {
     let resumableFile = this.resumable.files[this.resumable.files.length - 1];
 
-    let { token, uploadUrlPath } = this.props;
-    seafileAPI.sharedLinkGetFileUploadUrl(token, uploadUrlPath).then(res => {
+    let { token, relativePath } = this.props;
+    seafileAPI.sharedLinkGetFileUploadUrl(token, relativePath).then(res => {
       this.resumable.opts.target = res.data.upload_link + '?ret-json=1';
       this.setState({
         isUploadRemindDialogShow: false,
diff --git a/frontend/src/shared-dir-view.js b/frontend/src/shared-dir-view.js
index 88c847a301..acb7c6506a 100644
--- a/frontend/src/shared-dir-view.js
+++ b/frontend/src/shared-dir-view.js
@@ -21,14 +21,12 @@ moment.locale(window.app.config.lang);
 let loginUser = window.app.pageOptions.name;
 let {
   token, dirName, dirPath, sharedBy,
-  repoID, path,
+  repoID, relativePath,
   mode, thumbnailSize, zipped,
   trafficOverLimit, canDownload,
   noQuota, canUpload
 } = window.shared.pageOptions;
 
-dirPath = dirPath.replace(/\/+$/, ""); // used for upload file
-const uploadUrlPath = path.replace(/\/+$/, "");   // used for get dir upload link
 const showDownloadIcon = !trafficOverLimit && canDownload;
 
 class SharedDirView extends React.Component {
@@ -62,7 +60,7 @@ class SharedDirView extends React.Component {
       });
     }
 
-    seafileAPI.listSharedDir(token, path, thumbnailSize).then((res) => {
+    seafileAPI.listSharedDir(token, relativePath, thumbnailSize).then((res) => {
       const items = res.data['dirent_list'].map(item => {
         item.isSelected = false;
         return item;
@@ -149,7 +147,7 @@ class SharedDirView extends React.Component {
   zipDownloadSelectedItems = () => {
     this.setState({
       isZipDialogOpen: true,
-      zipFolderPath: path,
+      zipFolderPath: relativePath,
       selectedItems: this.state.items.filter(item => item.isSelected)
         .map(item => item.file_name || item.folder_name)
     });
@@ -254,7 +252,7 @@ class SharedDirView extends React.Component {
     const newItem = {
       isSelected: false,
       file_name: name,
-      file_path: Utils.joinPath(path, name),
+      file_path: Utils.joinPath(relativePath, name),
       is_dir: false,
       last_modified: moment().format(),
       size: size
@@ -287,8 +285,8 @@ class SharedDirView extends React.Component {
                 <div>
                   {isDesktop &&
                   <div className="view-mode btn-group">
-                    <a href={`?p=${encodeURIComponent(path)}&mode=list`} className={`${modeBaseClass} sf2-icon-list-view ${mode == 'list' ? 'current-mode' : ''}`} title={gettext('List')}></a>
-                    <a href={`?p=${encodeURIComponent(path)}&mode=grid`} className={`${modeBaseClass} sf2-icon-grid-view ${mode == 'grid' ? 'current-mode' : ''}`} title={gettext('Grid')}></a>
+                    <a href={`?p=${encodeURIComponent(relativePath)}&mode=list`} className={`${modeBaseClass} sf2-icon-list-view ${mode == 'list' ? 'current-mode' : ''}`} title={gettext('List')}></a>
+                    <a href={`?p=${encodeURIComponent(relativePath)}&mode=grid`} className={`${modeBaseClass} sf2-icon-grid-view ${mode == 'grid' ? 'current-mode' : ''}`} title={gettext('Grid')}></a>
                   </div>
                   }
                   {canUpload && (
@@ -300,7 +298,7 @@ class SharedDirView extends React.Component {
                   <Fragment>
                     {this.state.items.some(item => item.isSelected) ?
                       <Button color="success" onClick={this.zipDownloadSelectedItems} className="ml-2 shared-dir-op-btn">{gettext('ZIP Selected Items')}</Button> :
-                      <Button color="success" onClick={this.zipDownloadFolder.bind(this, path)} className="ml-2 shared-dir-op-btn">{gettext('ZIP')}</Button>
+                      <Button color="success" onClick={this.zipDownloadFolder.bind(this, relativePath)} className="ml-2 shared-dir-op-btn">{gettext('ZIP')}</Button>
                     }
                   </Fragment>
                   }
@@ -311,8 +309,8 @@ class SharedDirView extends React.Component {
                   ref={uploader => this.uploader = uploader}
                   dragAndDrop={false}
                   token={token}
-                  path={dirPath}
-                  uploadUrlPath={uploadUrlPath}
+                  path={dirPath.replace(/\/+$/, "")}
+                  relativePath={relativePath.replace(/\/+$/, "")}
                   repoID={repoID}
                   onFileUploadSuccess={this.onFileUploadSuccess}
                 />
diff --git a/seahub/templates/view_shared_dir_react.html b/seahub/templates/view_shared_dir_react.html
index 85cb6f7575..752d2d9b71 100644
--- a/seahub/templates/view_shared_dir_react.html
+++ b/seahub/templates/view_shared_dir_react.html
@@ -23,7 +23,7 @@
             dirPath: '{{ dir_path|escapejs }}',
             sharedBy: '{{ username|email2nickname|escapejs }}',
             repoID: '{{repo.id}}',
-            path: '{{ path|escapejs }}',
+            relativePath: '{{ path|escapejs }}',
             zipped: (function() {
               var list = [];
               {% for name, path in zipped %}