[fix]: Error Handling for Images and Table Fix for Form Submissions in Editor (#2710)

* cancellable uploads and image limits with better error handling * fixed table row/column picker behaviour on modals * Merge branch 'rerender-debounce-editor-fix' into editor-draggable-nodes * fix: added mention suggestions and highlights in `create-issue-modal` * removed uncessary files * solved lint error of trailing spaces * added plane/ui dependency for tooltips --------- Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>
2023-11-08 18:00:53 +05:30
parent faaba45e59
commit 206f5744a3
32 changed files with 339 additions and 281 deletions
--- a/packages/editor/core/src/ui/extensions/image/index.tsx
+++ b/packages/editor/core/src/ui/extensions/image/index.tsx
@@ -3,21 +3,28 @@ import TrackImageDeletionPlugin from "../../plugins/delete-image";
 import UploadImagesPlugin from "../../plugins/upload-image";
 import { DeleteImage } from "../../../types/delete-image";

-const ImageExtension = (deleteImage: DeleteImage) => Image.extend({
-  addProseMirrorPlugins() {
-    return [UploadImagesPlugin(), TrackImageDeletionPlugin(deleteImage)];
-  },
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      width: {
-        default: "35%",
-      },
-      height: {
-        default: null,
-      },
-    };
-  },
-});
+const ImageExtension = (
+  deleteImage: DeleteImage,
+  cancelUploadImage?: () => any,
+) =>
+  Image.extend({
+    addProseMirrorPlugins() {
+      return [
+        UploadImagesPlugin(cancelUploadImage),
+        TrackImageDeletionPlugin(deleteImage),
+      ];
+    },
+    addAttributes() {
+      return {
+        ...this.parent?.(),
+        width: {
+          default: "35%",
+        },
+        height: {
+          default: null,
+        },
+      };
+    },
+  });

 export default ImageExtension;
--- a/packages/editor/core/src/ui/extensions/index.tsx
+++ b/packages/editor/core/src/ui/extensions/index.tsx
@@ -20,82 +20,89 @@ import { isValidHttpUrl } from "../../lib/utils";
 import { IMentionSuggestion } from "../../types/mention-suggestion";
 import { Mentions } from "../mentions";

-
 export const CoreEditorExtensions = (
-  mentionConfig: { mentionSuggestions: IMentionSuggestion[], mentionHighlights: string[] },
+  mentionConfig: {
+    mentionSuggestions: IMentionSuggestion[];
+    mentionHighlights: string[];
+  },
  deleteFile: DeleteImage,
+  cancelUploadImage?: () => any,
 ) => [
-    StarterKit.configure({
-      bulletList: {
-        HTMLAttributes: {
-          class: "list-disc list-outside leading-3 -mt-2",
-        },
+  StarterKit.configure({
+    bulletList: {
+      HTMLAttributes: {
+        class: "list-disc list-outside leading-3 -mt-2",
      },
-      orderedList: {
-        HTMLAttributes: {
-          class: "list-decimal list-outside leading-3 -mt-2",
-        },
+    },
+    orderedList: {
+      HTMLAttributes: {
+        class: "list-decimal list-outside leading-3 -mt-2",
      },
-      listItem: {
-        HTMLAttributes: {
-          class: "leading-normal -mb-2",
-        },
+    },
+    listItem: {
+      HTMLAttributes: {
+        class: "leading-normal -mb-2",
      },
-      blockquote: {
-        HTMLAttributes: {
-          class: "border-l-4 border-custom-border-300",
-        },
+    },
+    blockquote: {
+      HTMLAttributes: {
+        class: "border-l-4 border-custom-border-300",
      },
-      code: {
-        HTMLAttributes: {
-          class:
-            "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
-          spellcheck: "false",
-        },
-      },
-      codeBlock: false,
-      horizontalRule: false,
-      dropcursor: {
-        color: "rgba(var(--color-text-100))",
-        width: 2,
-      },
-      gapcursor: false,
-    }),
-    Gapcursor,
-    TiptapLink.configure({
-      protocols: ["http", "https"],
-      validate: (url) => isValidHttpUrl(url),
+    },
+    code: {
      HTMLAttributes: {
        class:
-          "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
+          "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
+        spellcheck: "false",
      },
-    }),
-    ImageExtension(deleteFile).configure({
-      HTMLAttributes: {
-        class: "rounded-lg border border-custom-border-300",
-      },
-    }),
-    TiptapUnderline,
-    TextStyle,
-    Color,
-    TaskList.configure({
-      HTMLAttributes: {
-        class: "not-prose pl-2",
-      },
-    }),
-    TaskItem.configure({
-      HTMLAttributes: {
-        class: "flex items-start my-4",
-      },
-      nested: true,
-    }),
-    Markdown.configure({
-      html: true,
-      transformCopiedText: true,
-    }),
-    Table,
-    TableHeader,
-    TableCell,
-    TableRow,
-    Mentions(mentionConfig.mentionSuggestions, mentionConfig.mentionHighlights, false),
-  ];
+    },
+    codeBlock: false,
+    horizontalRule: false,
+    dropcursor: {
+      color: "rgba(var(--color-text-100))",
+      width: 2,
+    },
+    gapcursor: false,
+  }),
+  Gapcursor,
+  TiptapLink.configure({
+    protocols: ["http", "https"],
+    validate: (url) => isValidHttpUrl(url),
+    HTMLAttributes: {
+      class:
+        "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
+    },
+  }),
+  ImageExtension(deleteFile, cancelUploadImage).configure({
+    HTMLAttributes: {
+      class: "rounded-lg border border-custom-border-300",
+    },
+  }),
+  TiptapUnderline,
+  TextStyle,
+  Color,
+  TaskList.configure({
+    HTMLAttributes: {
+      class: "not-prose pl-2",
+    },
+  }),
+  TaskItem.configure({
+    HTMLAttributes: {
+      class: "flex items-start my-4",
+    },
+    nested: true,
+  }),
+  Markdown.configure({
+    html: true,
+    transformCopiedText: true,
+  }),
+  Table,
+  TableHeader,
+  TableCell,
+  TableRow,
+  Mentions(
+    mentionConfig.mentionSuggestions,
+    mentionConfig.mentionHighlights,
+    false,
+  ),
+];
--- a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
+++ b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
@@ -202,6 +202,7 @@ function createToolbox({
          "div",
          {
            className: "toolboxItem",
+            itemType: "button",
            onClick() {
              onClickItem(item);
            },
@@ -253,6 +254,7 @@ function createColorPickerToolbox({
          "div",
          {
            className: "toolboxItem",
+            itemType: "button",
            onClick: () => {
              onSelectColor(value);
              colorPicker.hide();
@@ -331,7 +333,9 @@ export class TableView implements NodeView {
      this.rowsControl = h(
        "div",
        { className: "rowsControl" },
-        h("button", {
+        h("div", {
+          itemType: "button",
+          className: "rowsControlDiv",
          onClick: () => this.selectRow(),
        }),
      );
@@ -339,7 +343,9 @@ export class TableView implements NodeView {
      this.columnsControl = h(
        "div",
        { className: "columnsControl" },
-        h("button", {
+        h("div", {
+          itemType: "button",
+          className: "columnsControlDiv",
          onClick: () => this.selectColumn(),
        }),
      );
@@ -352,7 +358,7 @@ export class TableView implements NodeView {
      );

      this.columnsToolbox = createToolbox({
-        triggerButton: this.columnsControl.querySelector("button"),
+        triggerButton: this.columnsControl.querySelector(".columnsControlDiv"),
        items: columnsToolboxItems,
        tippyOptions: {
          ...defaultTippyOptions,
--- a/packages/editor/core/src/ui/hooks/useEditor.tsx
+++ b/packages/editor/core/src/ui/hooks/useEditor.tsx
@@ -29,11 +29,13 @@ interface CustomEditorProps {
  forwardedRef?: any;
  mentionHighlights?: string[];
  mentionSuggestions?: IMentionSuggestion[];
+  cancelUploadImage?: () => any;
 }

 export const useEditor = ({
  uploadFile,
  deleteFile,
+  cancelUploadImage,
  editorProps = {},
  value,
  extensions = [],
@@ -42,7 +44,7 @@ export const useEditor = ({
  forwardedRef,
  setShouldShowAlert,
  mentionHighlights,
-  mentionSuggestions
+  mentionSuggestions,
 }: CustomEditorProps) => {
  const editor = useCustomEditor(
    {
@@ -50,7 +52,17 @@ export const useEditor = ({
        ...CoreEditorProps(uploadFile, setIsSubmitting),
        ...editorProps,
      },
-      extensions: [...CoreEditorExtensions({ mentionSuggestions: mentionSuggestions ?? [], mentionHighlights: mentionHighlights ?? []}, deleteFile), ...extensions],
+      extensions: [
+        ...CoreEditorExtensions(
+          {
+            mentionSuggestions: mentionSuggestions ?? [],
+            mentionHighlights: mentionHighlights ?? [],
+          },
+          deleteFile,
+          cancelUploadImage,
+        ),
+        ...extensions,
+      ],
      content:
        typeof value === "string" && value.trim() !== "" ? value : "<p></p>",
      onUpdate: async ({ editor }) => {
@@ -82,4 +94,5 @@ export const useEditor = ({
  }

  return editor;
-};
+};
+
--- a/packages/editor/core/src/ui/menus/table-menu/InsertBottomTableIcon.tsx
+++ b/packages/editor/core/src/ui/menus/table-menu/InsertBottomTableIcon.tsx
@@ -1,16 +0,0 @@
-const InsertBottomTableIcon = (props: any) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
-    viewBox="0 -960 960 960"
-    {...props}
-  >
-    <path
-      d="M212.309-152.31q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-375.383q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm535.382-219.998H212.309q-4.616 0-8.463 3.846-3.846 3.846-3.846 8.462V-600q0 4.616 3.846 8.462 3.847 3.847 8.463 3.847h535.382q4.616 0 8.463-3.847Q760-595.384 760-600v-135.383q0-4.616-3.846-8.462-3.847-3.846-8.463-3.846ZM200-587.691v-160 160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-);
-
-export default InsertBottomTableIcon;
--- a/packages/editor/core/src/ui/menus/table-menu/InsertLeftTableIcon.tsx
+++ b/packages/editor/core/src/ui/menus/table-menu/InsertLeftTableIcon.tsx
@@ -1,15 +0,0 @@
-const InsertLeftTableIcon = (props: any) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
-    viewBox="0 -960 960 960"
-    {...props}
-  >
-    <path
-      d="M224.617-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm147.691-607.69q0-4.616-3.846-8.463-3.846-3.846-8.462-3.846H600q-4.616 0-8.462 3.846-3.847 3.847-3.847 8.463v535.382q0 4.616 3.847 8.463Q595.384-200 600-200h135.383q4.616 0 8.462-3.846 3.846-3.847 3.846-8.463v-535.382ZM587.691-200h160-160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-);
-export default InsertLeftTableIcon;
--- a/packages/editor/core/src/ui/menus/table-menu/InsertRightTableIcon.tsx
+++ b/packages/editor/core/src/ui/menus/table-menu/InsertRightTableIcon.tsx
@@ -1,16 +0,0 @@
-const InsertRightTableIcon = (props: any) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
-    viewBox="0 -960 960 960"
-    {...props}
-  >
-    <path
-      d="M600-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm-375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm-12.308-607.69v535.382q0 4.616 3.846 8.463 3.846 3.846 8.462 3.846H360q4.616 0 8.462-3.846 3.847-3.847 3.847-8.463v-535.382q0-4.616-3.847-8.463Q364.616-760 360-760H224.617q-4.616 0-8.462 3.846-3.846 3.847-3.846 8.463Zm160 547.691h-160 160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-);
-
-export default InsertRightTableIcon;
--- a/packages/editor/core/src/ui/menus/table-menu/InsertTopTableIcon.tsx
+++ b/packages/editor/core/src/ui/menus/table-menu/InsertTopTableIcon.tsx
@@ -1,15 +0,0 @@
-const InsertTopTableIcon = (props: any) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
-    viewBox="0 -960 960 960"
-    {...props}
-  >
-    <path
-      d="M212.309-527.693q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0 375.383q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-59.999h535.382q4.616 0 8.463-3.846 3.846-3.846 3.846-8.462V-360q0-4.616-3.846-8.462-3.847-3.847-8.463-3.847H212.309q-4.616 0-8.463 3.847Q200-364.616 200-360v135.383q0 4.616 3.846 8.462 3.847 3.846 8.463 3.846Zm-12.309-160v160-160Z"
-      fill="rgb(var(--color-text-300))"
-    />
-  </svg>
-);
-export default InsertTopTableIcon;
--- a/packages/editor/core/src/ui/menus/table-menu/tooltip.tsx
+++ b/packages/editor/core/src/ui/menus/table-menu/tooltip.tsx
@@ -1,77 +0,0 @@
-import * as React from 'react';
-
-// next-themes
-import { useTheme } from "next-themes";
-// tooltip2
-import { Tooltip2 } from "@blueprintjs/popover2";
-
-type Props = {
-  tooltipHeading?: string;
-  tooltipContent: string | React.ReactNode;
-  position?:
-    | "top"
-    | "right"
-    | "bottom"
-    | "left"
-    | "auto"
-    | "auto-end"
-    | "auto-start"
-    | "bottom-left"
-    | "bottom-right"
-    | "left-bottom"
-    | "left-top"
-    | "right-bottom"
-    | "right-top"
-    | "top-left"
-    | "top-right";
-  children: JSX.Element;
-  disabled?: boolean;
-  className?: string;
-  openDelay?: number;
-  closeDelay?: number;
-};
-
-export const Tooltip: React.FC<Props> = ({
-  tooltipHeading,
-  tooltipContent,
-  position = "top",
-  children,
-  disabled = false,
-  className = "",
-  openDelay = 200,
-  closeDelay,
-}) => {
-  const { theme } = useTheme();
-
-  return (
-    <Tooltip2
-      disabled={disabled}
-      hoverOpenDelay={openDelay}
-      hoverCloseDelay={closeDelay}
-      content={
-        <div
-          className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${
-            theme === "custom"
-              ? "bg-custom-background-100 text-custom-text-200"
-              : "bg-black text-gray-400"
-          } break-words overflow-hidden ${className}`}
-        >
-          {tooltipHeading && (
-            <h5
-              className={`font-medium ${
-                theme === "custom" ? "text-custom-text-100" : "text-white"
-              }`}
-            >
-              {tooltipHeading}
-            </h5>
-          )}
-          {tooltipContent}
-        </div>
-      }
-      position={position}
-      renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
-        React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
-      }
-    />
-  );
-};
--- a/packages/editor/core/src/ui/plugins/delete-image.tsx
+++ b/packages/editor/core/src/ui/plugins/delete-image.tsx
@@ -15,7 +15,11 @@ interface ImageNode extends ProseMirrorNode {
 const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin =>
  new Plugin({
    key: deleteKey,
-    appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
+    appendTransaction: (
+      transactions: readonly Transaction[],
+      oldState: EditorState,
+      newState: EditorState,
+    ) => {
      const newImageSources = new Set<string>();
      newState.doc.descendants((node) => {
        if (node.type.name === IMAGE_NODE_TYPE) {
@@ -55,7 +59,10 @@ const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin =>

 export default TrackImageDeletionPlugin;

-async function onNodeDeleted(src: string, deleteImage: DeleteImage): Promise<void> {
+async function onNodeDeleted(
+  src: string,
+  deleteImage: DeleteImage,
+): Promise<void> {
  try {
    const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
    const resStatus = await deleteImage(assetUrlWithWorkspaceId);
--- a/packages/editor/core/src/ui/plugins/upload-image.tsx
+++ b/packages/editor/core/src/ui/plugins/upload-image.tsx
@@ -4,7 +4,7 @@ import { Decoration, DecorationSet, EditorView } from "@tiptap/pm/view";

 const uploadKey = new PluginKey("upload-image");

-const UploadImagesPlugin = () =>
+const UploadImagesPlugin = (cancelUploadImage?: () => any) =>
  new Plugin({
    key: uploadKey,
    state: {
@@ -21,15 +21,46 @@ const UploadImagesPlugin = () =>
          const placeholder = document.createElement("div");
          placeholder.setAttribute("class", "img-placeholder");
          const image = document.createElement("img");
-          image.setAttribute("class", "opacity-10 rounded-lg border border-custom-border-300");
+          image.setAttribute(
+            "class",
+            "opacity-10 rounded-lg border border-custom-border-300",
+          );
          image.src = src;
          placeholder.appendChild(image);
+
+          // Create cancel button
+          const cancelButton = document.createElement("button");
+          cancelButton.style.position = "absolute";
+          cancelButton.style.right = "3px";
+          cancelButton.style.top = "3px";
+          cancelButton.setAttribute("class", "opacity-90 rounded-lg");
+
+          cancelButton.onclick = () => {
+            cancelUploadImage?.();
+          };
+
+          // Create an SVG element from the SVG string
+          const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-circle"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`;
+          const parser = new DOMParser();
+          const svgElement = parser.parseFromString(
+            svgString,
+            "image/svg+xml",
+          ).documentElement;
+
+          cancelButton.appendChild(svgElement);
+          placeholder.appendChild(cancelButton);
          const deco = Decoration.widget(pos + 1, placeholder, {
            id,
          });
          set = set.add(tr.doc, [deco]);
        } else if (action && action.remove) {
-          set = set.remove(set.find(undefined, undefined, (spec) => spec.id == action.remove.id));
+          set = set.remove(
+            set.find(
+              undefined,
+              undefined,
+              (spec) => spec.id == action.remove.id,
+            ),
+          );
        }
        return set;
      },
@@ -48,19 +79,39 @@ function findPlaceholder(state: EditorState, id: {}) {
  const found = decos.find(
    undefined,
    undefined,
-    (spec: { id: number | undefined }) => spec.id == id
+    (spec: { id: number | undefined }) => spec.id == id,
  );
  return found.length ? found[0].from : null;
 }

+const removePlaceholder = (view: EditorView, id: {}) => {
+  const removePlaceholderTr = view.state.tr.setMeta(uploadKey, {
+    remove: { id },
+  });
+  view.dispatch(removePlaceholderTr);
+};
+
 export async function startImageUpload(
  file: File,
  view: EditorView,
  pos: number,
  uploadFile: UploadImage,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
 ) {
+  if (!file) {
+    alert("No file selected. Please select a file to upload.");
+    return;
+  }
+
  if (!file.type.includes("image/")) {
+    alert("Invalid file type. Please select an image file.");
+    return;
+  }
+
+  if (file.size > 5 * 1024 * 1024) {
+    alert("File size too large. Please select a file smaller than 5MB.");
    return;
  }

@@ -82,28 +133,42 @@ export async function startImageUpload(
    view.dispatch(tr);
  };

+  // Handle FileReader errors
+  reader.onerror = (error) => {
+    console.error("FileReader error: ", error);
+    removePlaceholder(view, id);
+    return;
+  };
+
  setIsSubmitting?.("submitting");
-  const src = await UploadImageHandler(file, uploadFile);
-  const { schema } = view.state;
-  pos = findPlaceholder(view.state, id);

-  if (pos == null) return;
-  const imageSrc = typeof src === "object" ? reader.result : src;
+  try {
+    const src = await UploadImageHandler(file, uploadFile);
+    const { schema } = view.state;
+    pos = findPlaceholder(view.state, id);

-  const node = schema.nodes.image.create({ src: imageSrc });
-  const transaction = view.state.tr
-    .replaceWith(pos, pos, node)
-    .setMeta(uploadKey, { remove: { id } });
-  view.dispatch(transaction);
+    if (pos == null) return;
+    const imageSrc = typeof src === "object" ? reader.result : src;
+
+    const node = schema.nodes.image.create({ src: imageSrc });
+    const transaction = view.state.tr
+      .replaceWith(pos, pos, node)
+      .setMeta(uploadKey, { remove: { id } });
+    view.dispatch(transaction);
+  } catch (error) {
+    console.error("Upload error: ", error);
+    removePlaceholder(view, id);
+  }
 }

-const UploadImageHandler = (file: File,
-  uploadFile: UploadImage
+const UploadImageHandler = (
+  file: File,
+  uploadFile: UploadImage,
 ): Promise<string> => {
  try {
    return new Promise(async (resolve, reject) => {
      try {
-        const imageUrl = await uploadFile(file)
+        const imageUrl = await uploadFile(file);

        const image = new Image();
        image.src = imageUrl;
@@ -118,9 +183,6 @@ const UploadImageHandler = (file: File,
      }
    });
  } catch (error) {
-    if (error instanceof Error) {
-      console.log(error.message);
-    }
    return Promise.reject(error);
  }
 };