chore: gif support for editor (#6219)

Author: aaryan610

apiserver/plane/app/views/asset/v2.py

@@ -126,7 +126,13 @@ def post(self, request):
             )
 
         # Check if the file type is allowed
-        allowed_types = ["image/jpeg", "image/png", "image/webp", "image/jpg"]
+        allowed_types = [
+            "image/jpeg",
+            "image/png",
+            "image/webp",
+            "image/jpg",
+            "image/gif",
+        ]
         if type not in allowed_types:
             return Response(
                 {

apiserver/plane/space/views/asset.py

@@ -86,7 +86,13 @@ def post(self, request, anchor):
             )
 
         # Check if the file type is allowed
-        allowed_types = ["image/jpeg", "image/png", "image/webp"]
+        allowed_types = [
+            "image/jpeg",
+            "image/png",
+            "image/webp",
+            "image/jpg",
+            "image/gif",
+        ]
         if type not in allowed_types:
             return Response(
                 {

packages/editor/src/core/constants/config.ts

@@ -5,3 +5,6 @@ export const DEFAULT_DISPLAY_CONFIG: TDisplayConfig = {
   fontSize: "large-font",
   fontStyle: "sans-serif",
 };
+
+export const ACCEPTED_FILE_MIME_TYPES = ["image/jpeg", "image/jpg", "image/png", "image/webp", "image/gif"];
+export const ACCEPTED_FILE_EXTENSIONS = ACCEPTED_FILE_MIME_TYPES.map((type) => `.${type.split("/")[1]}`);

packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx

@@ -2,6 +2,8 @@ import { ChangeEvent, useCallback, useEffect, useMemo, useRef } from "react";
 import { ImageIcon } from "lucide-react";
 // plane utils
 import { cn } from "@plane/utils";
+// constants
+import { ACCEPTED_FILE_EXTENSIONS } from "@/constants/config";
 // hooks
 import { useUploader, useDropZone, uploadFirstImageAndInsertRemaining } from "@/hooks/use-file-upload";
 // extensions
@@ -166,7 +168,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
         ref={fileInputRef}
         hidden
         type="file"
-        accept=".jpg,.jpeg,.png,.webp"
+        accept={ACCEPTED_FILE_EXTENSIONS.join(",")}
         onChange={onFileChange}
         multiple
       />

packages/editor/src/core/plugins/image/utils/validate-file.ts

@@ -1,3 +1,6 @@
+// constants
+import { ACCEPTED_FILE_MIME_TYPES } from "@/constants/config";
+
 type TArgs = {
   file: File;
   maxFileSize: number;
@@ -11,9 +14,8 @@ export const isFileValid = (args: TArgs): boolean => {
     return false;
   }
 
-  const allowedTypes = ["image/jpeg", "image/jpg", "image/png", "image/webp"];
-  if (!allowedTypes.includes(file.type)) {
-    alert("Invalid file type. Please select a JPEG, JPG, PNG, or WEBP image file.");
+  if (!ACCEPTED_FILE_MIME_TYPES.includes(file.type)) {
+    alert("Invalid file type. Please select a JPEG, JPG, PNG, WEBP or GIF file.");
     return false;
   }