diff --git a/frontend/src/components/dialog/create-file-dialog.js b/frontend/src/components/dialog/create-file-dialog.js
index a3d755f176..0e380e0799 100644
--- a/frontend/src/components/dialog/create-file-dialog.js
+++ b/frontend/src/components/dialog/create-file-dialog.js
@@ -44,6 +44,13 @@ class CreateFile extends React.Component {
   handleSubmit = () => {
     let isDuplicated = this.checkDuplicatedName();
     let newName = this.state.childName;
+    
+    if (!newName.trim()) {
+      let errMessage = gettext('The file name is empty');
+      this.setState({errMessage: errMessage});
+      return;
+    }
+
     if (isDuplicated) {
       let errMessage = gettext('The name "{name}" is already taken. Please choose a different name.');
       errMessage = errMessage.replace('{name}', Utils.HTMLescape(newName));
diff --git a/frontend/src/components/dialog/create-folder-dialog.js b/frontend/src/components/dialog/create-folder-dialog.js
index 8ea6896bcf..442af140f6 100644
--- a/frontend/src/components/dialog/create-folder-dialog.js
+++ b/frontend/src/components/dialog/create-folder-dialog.js
@@ -41,6 +41,12 @@ class CreateForder extends React.Component {
   handleSubmit = () => {
     let newName = this.state.childName;
     let isDuplicated = this.checkDuplicatedName();
+    if (!newName.trim()) {
+      let errMessage = gettext('The folder name is empty');
+      this.setState({errMessage: errMessage});
+      return;
+    }
+
     if (isDuplicated) {
       let errMessage = gettext('The name "{name}" is already taken. Please choose a different name.');
       errMessage = errMessage.replace('{name}', Utils.HTMLescape(newName));