diff --git a/frontend/src/components/file-chooser/dirent-list-item.js b/frontend/src/components/file-chooser/dirent-list-item.js
index 7fac265af5..438da8abc0 100644
--- a/frontend/src/components/file-chooser/dirent-list-item.js
+++ b/frontend/src/components/file-chooser/dirent-list-item.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { seafileAPI } from '../../utils/seafile-api';
 import Dirent from '../../models/dirent';
+import { Utils } from '../../utils/utils';
 
 const propTypes = {
   isShowFile: PropTypes.bool,
@@ -52,6 +53,7 @@ class DirentListItem extends React.Component {
               direntList.push(dirent);
             }
           }
+          direntList = Utils.sortDirents(direntList, 'name', 'asc');
           this.setState({
             hasRequest: true,
             direntList: direntList,
diff --git a/frontend/src/components/file-chooser/dirent-list-view.js b/frontend/src/components/file-chooser/dirent-list-view.js
index b162705ad5..720f1b5917 100644
--- a/frontend/src/components/file-chooser/dirent-list-view.js
+++ b/frontend/src/components/file-chooser/dirent-list-view.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { seafileAPI } from '../../utils/seafile-api';
 import Dirent from '../../models/dirent';
 import DirentListItem from './dirent-list-item';
+import { Utils } from '../../utils/utils';
 
 const propTypes = {
   isShowFile: PropTypes.bool,
@@ -29,14 +30,14 @@ class DirentListView extends React.Component {
         if (this.props.isShowFile === true) {
           let dirent = new Dirent(item);
           direntList.push(dirent);
+        } else {
+          if (item.type === 'dir') {
+            let dirent = new Dirent(item);
+            direntList.push(dirent);
+          }
         }
-        else if (item.type === 'dir') {
-          let dirent = new Dirent(item);
-          direntList.push(dirent);
-        }
-        this.setState({
-          direntList: direntList,
-        });
+        direntList = Utils.sortDirents(direntList, 'name', 'asc');
+        this.setState({direntList: direntList});
       });
     });
   }
diff --git a/frontend/src/components/file-chooser/file-chooser.js b/frontend/src/components/file-chooser/file-chooser.js
index 2217885dc8..5f289ec730 100644
--- a/frontend/src/components/file-chooser/file-chooser.js
+++ b/frontend/src/components/file-chooser/file-chooser.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import RepoListView from './repo-list-view';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
 import RepoInfo from '../../models/repo-info';
 
 import '../../css/file-chooser.css';
@@ -63,6 +64,7 @@ class FileChooser extends React.Component {
           repoList.push(repos[i]);
           repoIdList.push(repos[i].repo_id);
         }
+        repoList = Utils.sortRepos(repoList, 'name', 'asc');
         this.setState({
           repoList: repoList,
           isOtherRepoShow: !this.state.isOtherRepoShow,