diff --git a/frontend/src/components/file-chooser/repo-list-item.js b/frontend/src/components/file-chooser/repo-list-item.js
index 5e10ad369b..ba7ddc9b35 100644
--- a/frontend/src/components/file-chooser/repo-list-item.js
+++ b/frontend/src/components/file-chooser/repo-list-item.js
@@ -34,7 +34,13 @@ class RepoListItem extends React.Component {
     let repoID = this.props.repo.repo_id;
     seafileAPI.listDir(repoID, '/').then(res => {
       let tree = this.state.treeData.clone();
-      let direntList = res.data.dirent_list.filter(item => item.type === 'dir');
+      let direntList = [];
+      if (this.props.isShowFile === true) {
+        direntList = res.data.dirent_list;
+      } else {
+        direntList = res.data.dirent_list.filter(item => item.type === 'dir');
+      }
+
       this.addResponseListToNode(direntList, tree.root);
       this.setState({treeData: tree});
     });
@@ -65,7 +71,12 @@ class RepoListItem extends React.Component {
     node = tree.getNodeByPath(node.path);
     if (!node.isLoaded) {
       seafileAPI.listDir(repoID, node.path).then(res => {
-        let direntList = res.data.dirent_list.filter(item => item.type === 'dir');
+        let direntList = [];
+        if (this.props.isShowFile === true) {
+          direntList = res.data.dirent_list;
+        } else {
+          direntList = res.data.dirent_list.filter(item => item.type === 'dir');
+        }
         this.addResponseListToNode(direntList, node);
         this.setState({treeData: tree});
       });
diff --git a/frontend/src/components/file-chooser/tree-list-item.js b/frontend/src/components/file-chooser/tree-list-item.js
index 256b391876..bfec8b554f 100644
--- a/frontend/src/components/file-chooser/tree-list-item.js
+++ b/frontend/src/components/file-chooser/tree-list-item.js
@@ -9,6 +9,7 @@ const propTypes = {
   node: PropTypes.object.isRequired,
   onNodeCollapse: PropTypes.func.isRequired,
   onNodeExpanded: PropTypes.func.isRequired,
+  filePath: PropTypes.string,
 };
 
 class TreeViewItem extends React.Component {
@@ -78,13 +79,19 @@ class TreeViewItem extends React.Component {
     let isCurrentRepo = this.props.selectedRepo.repo_id === this.props.repo.repo_id;
     let isCurrentPath = this.props.selectedPath === this.state.filePath;
 
+    const fileName = node.object.name;
+    if (this.props.fileSuffixes && fileName && fileName.indexOf('.') !== -1) {
+      const suffix = fileName.slice(fileName.lastIndexOf('.') + 1).toLowerCase();
+      if (!this.props.fileSuffixes.includes(suffix)) return null;
+    }
+
     return(
       <div className="file-chooser-item">
         <div className={`${node.path === '/'? 'hide': ''}`}>
           <span className={`item-toggle fa ${node.isExpanded ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onToggleClick}></span>
           <span className={`item-info ${(isCurrentRepo && isCurrentPath) ? 'item-active' : ''}`} onClick={this.onItemClick}>
             <span className={`icon far ${node.object.type === 'dir' ? 'fa-folder' : 'fa-file'}`}></span>
-            <span className="name user-select-none ellipsis">{node.object.name}</span>
+            <span className="name user-select-none ellipsis">{node.object && node.object.name}</span>
           </span>
         </div>
         {node.isExpanded && this.renderChildren()}