chore: support uploads multi files (#191)

web/src/components/MemoEditor.tsx

@@ -209,21 +209,27 @@ const MemoEditor: React.FC<Props> = () => {
 
   const handleUploadFileBtnClick = useCallback(() => {
     const inputEl = document.createElement("input");
+    inputEl.style.position = "fixed";
+    inputEl.style.top = "-100vh";
+    inputEl.style.left = "-100vw";
+    document.body.appendChild(inputEl);
     inputEl.type = "file";
-    inputEl.multiple = false;
+    inputEl.multiple = true;
-    inputEl.accept = "image/png, image/gif, image/jpeg";
+    inputEl.accept = "image/*";
     inputEl.onchange = async () => {
       if (!inputEl.files || inputEl.files.length === 0) {
         return;
       }
 
-      const file = inputEl.files[0];
+      for (const file of inputEl.files) {
-      const url = await handleUploadFile(file);
+        const url = await handleUploadFile(file);
-      if (url) {
+        if (url) {
-        editorRef.current?.insertText(`![](${url})`);
+          editorRef.current?.insertText(`![](${url})`);
+        }
       }
     };
     inputEl.click();
+    document.body.removeChild(inputEl);
   }, []);
 
   const handleFullscreenBtnClick = () => {

web/src/components/ResourcesDialog.tsx

@@ -6,6 +6,7 @@ import { resourceService } from "../services";
 import Dropdown from "./common/Dropdown";
 import { generateDialog } from "./Dialog";
 import { showCommonDialog } from "./Dialog/CommonDialog";
+import showPreviewImageDialog from "./PreviewImageDialog";
 import Icon from "./Icon";
 import toastHelper from "./Toast";
 import "../less/resources-dialog.less";
@@ -51,9 +52,13 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
     }
 
     const inputEl = document.createElement("input");
+    inputEl.style.position = "fixed";
+    inputEl.style.top = "-100vh";
+    inputEl.style.left = "-100vw";
+    document.body.appendChild(inputEl);
     inputEl.type = "file";
-    inputEl.multiple = false;
+    inputEl.multiple = true;
-    inputEl.accept = "image/png, image/gif, image/jpeg";
+    inputEl.accept = "image/*";
     inputEl.onchange = async () => {
       if (!inputEl.files || inputEl.files.length === 0) {
         return;
@@ -64,21 +69,29 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
         isUploadingResource: true,
       });
 
-      const file = inputEl.files[0];
+      for (const file of inputEl.files) {
-      try {
         await resourceService.upload(file);
-      } catch (error: any) {
+        try {
-        console.error(error);
+          await resourceService.upload(file);
-        toastHelper.error(error.response.data.message);
+        } catch (error: any) {
-      } finally {
+          console.error(error);
-        setState({
+          toastHelper.error(error.response.data.message);
-          ...state,
+        } finally {
-          isUploadingResource: false,
+          setState({
-        });
+            ...state,
-        await fetchResources();
+            isUploadingResource: false,
+          });
+        }
       }
+
+      await fetchResources();
     };
     inputEl.click();
+    document.body.removeChild(inputEl);
+  };
+
+  const handlPreviewBtnClick = (resource: Resource) => {
+    showPreviewImageDialog(`${window.location.origin}/h/r/${resource.id}/${resource.filename}`);
   };
 
   const handleCopyResourceLinkBtnClick = (resource: Resource) => {
@@ -139,6 +152,7 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
                   <span className="field-text">{resource.type}</span>
                   <div className="buttons-container">
                     <Dropdown className="actions-dropdown">
+                      <button onClick={() => handlPreviewBtnClick(resource)}>Preview</button>
                       <button onClick={() => handleCopyResourceLinkBtnClick(resource)}>Copy Link</button>
                       <button className="delete-btn" onClick={() => handleDeleteResourceBtnClick(resource)}>
                         Delete

web/src/less/resources-dialog.less

@@ -14,10 +14,10 @@
       }
 
       > .upload-resource-container {
-        @apply mt-2 mb-4 w-full rounded flex flex-row justify-start items-center;
+        @apply mt-2 mb-4 py-8 cursor-pointer w-full rounded flex flex-row justify-center items-center bg-blue-50 border border-blue-600 hover:opacity-80;
 
         > .upload-resource-btn {
-          @apply px-3 py-1 rounded cursor-pointer flex flex-row justify-center items-center border border-dashed border-blue-600 text-blue-600 bg-blue-50 hover:opacity-80;
+          @apply px-3 py-1 rounded flex flex-row justify-center items-center border border-dashed border-blue-600 text-blue-600 bg-blue-50;
 
           > .icon-img {
             @apply w-4 h-auto mr-1;