Share links upload folder (#8033)

* share link upload folder

* fix side nav

* optimize

* fix sub folder upload

* update

---------

Co-authored-by: 孙永强 <11704063+s-yongqiang@user.noreply.gitee.com>
Co-authored-by: r350178982 <32759763+r350178982@users.noreply.github.com>

frontend/src/components/shared-link-file-uploader/file-uploader.js

@@ -315,8 +315,6 @@ class FileUploader extends React.Component {
     let currentTime = new Date().getTime() / 1000;
     message = formData.replace ? message : JSON.parse(message)[0];
     if (formData.relative_path) { // upload folder
-      // 'upload folder' is not supported
-      /*
       let relative_path = formData.relative_path;
       let dir_name = relative_path.slice(0, relative_path.indexOf('/'));
       let dirent = {
@@ -341,10 +339,9 @@ class FileUploader extends React.Component {
         }
         return item;
       });
-      this.setState({uploadFileList: uploadFileList});
+      this.setState({ uploadFileList: uploadFileList });
 
       return;
-      */
     }
 
     // replacing file is not allowed in shared link with 'can_upload' permission

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

@@ -1732,7 +1732,7 @@ class LibContentView extends React.Component {
       }));
     }
 
-    if (this.state.isTreePanelShown) {
+    if (this.state.isTreePanelShown && !isExist) {
       this.addNodeToTree(dirent.name, this.state.path, dirent.type);
     }
   };

frontend/src/shared-dir-view.js

@@ -41,7 +41,7 @@ dayjs.extend(relativeTime);
 
 let loginUser = window.app.pageOptions.name;
 let {
-  token, dirName, dirPath, sharedBy,
+  token, dirName, sharedBy,
   repoID, relativePath,
   mode, thumbnailSize,
   trafficOverLimit, canDownload,
@@ -66,6 +66,7 @@ class SharedDirView extends React.Component {
       errorMsg: '',
       items: [],
       path: relativePath,
+      dirPath: '',
 
       isDropdownMenuOpen: false,
       currentMode: mode,
@@ -146,10 +147,12 @@ class SharedDirView extends React.Component {
         item.isSelected = false;
         return item;
       });
+      const { dir_path } = res.data;
       this.setState({
         isLoading: false,
         errorMsg: '',
-        items: Utils.sortDirentsInSharedDir(items, this.state.sortBy, this.state.sortOrder)
+        items: Utils.sortDirentsInSharedDir(items, this.state.sortBy, this.state.sortOrder),
+        dirPath: dir_path,
       }, () => {
         this.getThumbnails(thumbnailSize);
       });
@@ -268,9 +271,16 @@ class SharedDirView extends React.Component {
         'icon': 'upload-files',
         'disabled': noQuota,
         'title': noQuota ? gettext('The owner of this library has run out of space.') : '',
-        'text': gettext('Upload'),
+        'text': gettext('Upload Files'),
         'onClick': this.onUploadFile
       });
+      opList.push({
+        'icon': 'upload-folder',
+        'disabled': noQuota,
+        'title': noQuota ? gettext('The owner of this library has run out of space.') : '',
+        'text': gettext('Upload Folder'),
+        'onClick': this.onUploadFolder
+      });
     }
 
     const zipped = []; // be compatible with the old code
@@ -597,23 +607,59 @@ class SharedDirView extends React.Component {
     this.uploader.onFileUpload();
   };
 
+  onUploadFolder = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    this.uploader.onFolderUpload();
+  };
+
   onFileUploadSuccess = (direntObject) => {
-    const { path } = this.state;
+    const { name, type, size, mtime } = direntObject;
-    const { name, size } = direntObject;
+    const isExist = this.state.items.some(item =>
-    const newItem = {
+      (type === 'dir' ? item.folder_name : item.file_name) === name &&
-      isSelected: false,
+      item.is_dir === (type === 'dir')
-      file_name: name,
+    );
-      file_path: Utils.joinPath(path, name),
+    if (isExist) {
-      is_dir: false,
+      const items = this.state.items.map(item => {
-      last_modified: dayjs().format(),
+        if ((type === 'dir' ? item.folder_name : item.file_name) === name &&
-      size: size
+          item.is_dir === (type === 'dir')) {
-    };
+          return {
-    const folderItems = this.state.items.filter(item => { return item.is_dir; });
+            ...item,
-    // put the new file as the first file
+            last_modified: dayjs.unix(mtime).format()
-    let items = Array.from(this.state.items);
+          };
-    items.splice(folderItems.length, 0, newItem);
+        }
-    this.setState({ items: items });
+        return item;
-    seafileAPI.shareLinksUploadDone(token, Utils.joinPath(dirPath, name));
+      });
+      this.setState({ items });
+    } else {
+      const newItem = type === 'dir' ? {
+        isSelected: false,
+        folder_name: name,
+        folder_path: Utils.joinPath(relativePath, name) + '/',
+        is_dir: true,
+        last_modified: dayjs.unix(mtime).format()
+      } : {
+        isSelected: false,
+        file_name: name,
+        file_path: Utils.joinPath(relativePath, name),
+        is_dir: false,
+        last_modified: dayjs.unix(mtime).format(),
+        size: size
+      };
+      this.setState(prevState => {
+        const items = Array.from(prevState.items);
+        if (type === 'dir') {
+          items.unshift(newItem);
+          this.listItems();
+          this.loadTreePanel();
+        } else {
+          const folderItems = items.filter(item => item.is_dir);
+          items.splice(folderItems.length, 0, newItem);
+        }
+        return { items };
+      });
+    }
+
+    seafileAPI.shareLinksUploadDone(token, Utils.joinPath(this.state.dirPath, name), type === 'dir');
   };
 
   getShareLinkRepoTags = () => {
@@ -745,7 +791,7 @@ class SharedDirView extends React.Component {
     const {
       usedRepoTags, currentMode: mode,
       sortBy, sortOrder, isTreeDataLoading, treeData, path,
-      sidePanelRate, inResizing
+      sidePanelRate, inResizing, dirPath
     } = this.state;
 
     const mainPanelStyle = {

seahub/api2/endpoints/share_links.py

@@ -1001,7 +1001,10 @@ class ShareLinkDirents(APIView):
 
             result.append(dirent_info)
 
-        return Response({'dirent_list': result})
+        return Response({
+            'dirent_list': result,
+            'dir_path': path,
+        })
 
 
 class ShareLinkUpload(APIView):