[WEB-5093] improvement: adds content-based MIME type detection for uploads #7925

- Refactored file upload utilities to use async functions for better handling of file metadata.
- Introduced MIME type detection using the file-type library.
- Updated file service methods to await metadata retrieval.
- Added new dependencies for file-type and updated package.json accordingly.
- Removed deprecated file handling code from utils and adjusted imports across services.

apps/space/helpers/file.helper.ts

@@ -1,18 +1,5 @@
+// plane imports
 import { API_BASE_URL } from "@plane/constants";
-import { TFileMetaDataLite, TFileSignedURLResponse } from "@plane/types";
-
-/**
- * @description from the provided signed URL response, generate a payload to be used to upload the file
- * @param {TFileSignedURLResponse} signedURLResponse
- * @param {File} file
- * @returns {FormData} file upload request payload
- */
-export const generateFileUploadPayload = (signedURLResponse: TFileSignedURLResponse, file: File): FormData => {
-  const formData = new FormData();
-  Object.entries(signedURLResponse.upload_data.fields).forEach(([key, value]) => formData.append(key, value));
-  formData.append("file", file);
-  return formData;
-};
 
 /**
  * @description combine the file path with the base URL
@@ -26,17 +13,6 @@ export const getFileURL = (path: string): string | undefined => {
   return `${API_BASE_URL}${path}`;
 };
 
-/**
- * @description returns the necessary file meta data to upload a file
- * @param {File} file
- * @returns {TFileMetaDataLite} payload with file info
- */
-export const getFileMetaDataForUpload = (file: File): TFileMetaDataLite => ({
-  name: file.name,
-  size: file.size,
-  type: file.type,
-});
-
 /**
  * @description this function returns the assetId from the asset source
  * @param {string} src

apps/web/core/services/file.service.ts

@@ -1,9 +1,10 @@
 import { AxiosRequestConfig } from "axios";
 // plane types
 import { API_BASE_URL } from "@plane/constants";
+import { getFileMetaDataForUpload, generateFileUploadPayload } from "@plane/services";
 import { TFileEntityInfo, TFileSignedURLResponse } from "@plane/types";
+import { getAssetIdFromUrl } from "@plane/utils";
 // helpers
-import { generateFileUploadPayload, getAssetIdFromUrl, getFileMetaDataForUpload } from "@plane/utils";
 // services
 import { APIService } from "@/services/api.service";
 import { FileUploadService } from "@/services/file-upload.service";
@@ -68,7 +69,7 @@ export class FileService extends APIService {
     file: File,
     uploadProgressHandler?: AxiosRequestConfig["onUploadProgress"]
   ): Promise<TFileSignedURLResponse> {
-    const fileMetaData = getFileMetaDataForUpload(file);
+    const fileMetaData = await getFileMetaDataForUpload(file);
     return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/`, {
       ...data,
       ...fileMetaData,
@@ -145,7 +146,7 @@ export class FileService extends APIService {
     file: File,
     uploadProgressHandler?: AxiosRequestConfig["onUploadProgress"]
   ): Promise<TFileSignedURLResponse> {
-    const fileMetaData = getFileMetaDataForUpload(file);
+    const fileMetaData = await getFileMetaDataForUpload(file);
     return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/`, {
       ...data,
       ...fileMetaData,
@@ -175,7 +176,7 @@ export class FileService extends APIService {
   }
 
   async uploadUserAsset(data: TFileEntityInfo, file: File): Promise<TFileSignedURLResponse> {
-    const fileMetaData = getFileMetaDataForUpload(file);
+    const fileMetaData = await getFileMetaDataForUpload(file);
     return this.post(`/api/assets/v2/user-assets/`, {
       ...data,
       ...fileMetaData,

apps/web/core/services/issue/issue_attachment.service.ts

@@ -1,9 +1,8 @@
 import { AxiosRequestConfig } from "axios";
 import { API_BASE_URL } from "@plane/constants";
 // plane types
+import { getFileMetaDataForUpload, generateFileUploadPayload } from "@plane/services";
 import { EIssueServiceType, TIssueAttachment, TIssueAttachmentUploadResponse, TIssueServiceType } from "@plane/types";
-// helpers
-import { generateFileUploadPayload, getFileMetaDataForUpload } from "@plane/utils";
 // services
 import { APIService } from "@/services/api.service";
 import { FileUploadService } from "@/services/file-upload.service";
@@ -41,7 +40,7 @@ export class IssueAttachmentService extends APIService {
     file: File,
     uploadProgressHandler?: AxiosRequestConfig["onUploadProgress"]
   ): Promise<TIssueAttachment> {
-    const fileMetaData = getFileMetaDataForUpload(file);
+    const fileMetaData = await getFileMetaDataForUpload(file);
     return this.post(
       `/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/attachments/`,
       fileMetaData