diff --git a/ui/src/components/Editor/ToolBars/file.tsx b/ui/src/components/Editor/ToolBars/file.tsx
index 30544d3e..869d1dc6 100644
--- a/ui/src/components/Editor/ToolBars/file.tsx
+++ b/ui/src/components/Editor/ToolBars/file.tsx
@@ -104,6 +104,9 @@ const Image = ({ editorInstance }) => {
         editor.replaceRange('', startPos, endPos);
         editor.replaceSelection(text);
       })
+      .catch(() => {
+        editor.replaceRange('', startPos, endPos);
+      })
       .finally(() => {
         editor.setReadOnly(false);
         editor.focus();
diff --git a/ui/src/components/Editor/ToolBars/image.tsx b/ui/src/components/Editor/ToolBars/image.tsx
index fa660944..322da08d 100644
--- a/ui/src/components/Editor/ToolBars/image.tsx
+++ b/ui/src/components/Editor/ToolBars/image.tsx
@@ -166,9 +166,14 @@ const Image = ({ editorInstance }) => {
 
     editor.replaceSelection(loadingText);
     editor.setReadOnly(true);
-    const urls = await upload(fileList).catch((ex) => {
-      console.error('upload file error: ', ex);
-    });
+    const urls = await upload(fileList)
+      .catch(() => {
+        editor.replaceRange('', startPos, endPos);
+      })
+      .finally(() => {
+        editor.setReadOnly(false);
+        editor.focus();
+      });
 
     const text: string[] = [];
     if (Array.isArray(urls)) {
@@ -183,8 +188,6 @@ const Image = ({ editorInstance }) => {
     } else {
       editor.replaceRange('', startPos, endPos);
     }
-    editor.setReadOnly(false);
-    editor.focus();
   };
 
   const paste = async (event) => {
@@ -199,14 +202,21 @@ const Image = ({ editorInstance }) => {
 
       editor.replaceSelection(loadingText);
       editor.setReadOnly(true);
-      const urls = await upload(clipboard.files);
-      const text = urls.map(({ name, url, type }) => {
-        return `${type === 'post' ? '!' : ''}[${name}](${url})`;
-      });
+      upload(clipboard.files)
+        .then((urls) => {
+          const text = urls.map(({ name, url, type }) => {
+            return `${type === 'post' ? '!' : ''}[${name}](${url})`;
+          });
 
-      editor.replaceRange(text.join('\n'), startPos, endPos);
-      editor.setReadOnly(false);
-      editor.focus();
+          editor.replaceRange(text.join('\n'), startPos, endPos);
+        })
+        .catch(() => {
+          editor.replaceRange('', startPos, endPos);
+        })
+        .finally(() => {
+          editor.setReadOnly(false);
+          editor.focus();
+        });
 
       return;
     }
diff --git a/ui/src/pages/Admin/Write/index.tsx b/ui/src/pages/Admin/Write/index.tsx
index fcf99c1d..d82f5aa0 100644
--- a/ui/src/pages/Admin/Write/index.tsx
+++ b/ui/src/pages/Admin/Write/index.tsx
@@ -139,9 +139,12 @@ const Index: FC = () => {
       max_image_size: Number(formData.max_image_size.value),
       max_attachment_size: Number(formData.max_attachment_size.value),
       max_image_megapixel: Number(formData.max_image_megapixel.value),
-      authorized_image_extensions: formData.authorized_image_extensions.value
-        .split(',')
-        ?.map((item) => item.trim().toLowerCase()),
+      authorized_image_extensions:
+        formData.authorized_image_extensions.value.length > 0
+          ? formData.authorized_image_extensions.value
+              .split(',')
+              ?.map((item) => item.trim().toLowerCase())
+          : [],
       authorized_attachment_extensions:
         formData.authorized_attachment_extensions.value.length > 0
           ? formData.authorized_attachment_extensions.value
@@ -287,11 +290,12 @@ const Index: FC = () => {
           </Form.Control.Feedback>
         </Form.Group>
 
-        <Form.Group className="mb-3" controlId="image_size">
+        <Form.Group className="mb-3" controlId="max_image_size">
           <Form.Label>{t('image_size.label')}</Form.Label>
           <Form.Control
             type="number"
             value={formData.max_image_size.value}
+            isInvalid={formData.max_image_size.isInvalid}
             onChange={(evt) => {
               handleValueChange({
                 max_image_size: {
@@ -308,11 +312,12 @@ const Index: FC = () => {
           </Form.Control.Feedback>
         </Form.Group>
 
-        <Form.Group className="mb-3" controlId="attachment_size">
+        <Form.Group className="mb-3" controlId="max_attachment_size">
           <Form.Label>{t('attachment_size.label')}</Form.Label>
           <Form.Control
             type="number"
             value={formData.max_attachment_size.value}
+            isInvalid={formData.max_attachment_size.isInvalid}
             onChange={(evt) => {
               handleValueChange({
                 max_attachment_size: {
@@ -329,10 +334,11 @@ const Index: FC = () => {
           </Form.Control.Feedback>
         </Form.Group>
 
-        <Form.Group className="mb-3" controlId="image_megapixels">
+        <Form.Group className="mb-3" controlId="max_image_megapixel">
           <Form.Label>{t('image_megapixels.label')}</Form.Label>
           <Form.Control
             type="number"
+            isInvalid={formData.max_image_megapixel.isInvalid}
             value={formData.max_image_megapixel.value}
             onChange={(evt) => {
               handleValueChange({
@@ -350,11 +356,12 @@ const Index: FC = () => {
           </Form.Control.Feedback>
         </Form.Group>
 
-        <Form.Group className="mb-3" controlId="image_extensions">
+        <Form.Group className="mb-3" controlId="authorized_image_extensions">
           <Form.Label>{t('image_extensions.label')}</Form.Label>
           <Form.Control
             type="text"
             value={formData.authorized_image_extensions.value}
+            isInvalid={formData.authorized_image_extensions.isInvalid}
             onChange={(evt) => {
               handleValueChange({
                 authorized_image_extensions: {
@@ -371,11 +378,14 @@ const Index: FC = () => {
           </Form.Control.Feedback>
         </Form.Group>
 
-        <Form.Group className="mb-3" controlId="attachment_extensions">
+        <Form.Group
+          className="mb-3"
+          controlId="authorized_attachment_extensions">
           <Form.Label>{t('attachment_extensions.label')}</Form.Label>
           <Form.Control
             type="text"
             value={formData.authorized_attachment_extensions.value}
+            isInvalid={formData.authorized_attachment_extensions.isInvalid}
             onChange={(evt) => {
               handleValueChange({
                 authorized_attachment_extensions: {