[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>

space/services/file.service.ts

@@ -1,5 +1,6 @@
 import APIService from "services/api.service";
 import { API_BASE_URL } from "helpers/common.helper";
+import axios from "axios";
 
 interface UnSplashImage {
   id: string;
@@ -26,25 +27,37 @@ interface UnSplashImageUrls {
 }
 
 class FileService extends APIService {
+  private cancelSource: any;
+
   constructor() {
     super(API_BASE_URL);
     this.uploadFile = this.uploadFile.bind(this);
     this.deleteImage = this.deleteImage.bind(this);
+    this.cancelUpload = this.cancelUpload.bind(this);
   }
 
   async uploadFile(workspaceSlug: string, file: FormData): Promise<any> {
+    this.cancelSource = axios.CancelToken.source();
     return this.post(`/api/workspaces/${workspaceSlug}/file-assets/`, file, {
       headers: {
         ...this.getHeaders(),
         "Content-Type": "multipart/form-data",
       },
+      cancelToken: this.cancelSource.token,
     })
       .then((response) => response?.data)
       .catch((error) => {
-        throw error?.response?.data;
+        if (axios.isCancel(error)) {
+          console.log(error.message);
+        } else {
+          throw error?.response?.data;
+        }
       });
   }
 
+  cancelUpload() {
+    this.cancelSource.cancel("Upload cancelled");
+  }
   getUploadFileFunction(workspaceSlug: string): (file: File) => Promise<string> {
     return async (file: File) => {
       const formData = new FormData();