Skip to content

[PE-95] chore: gif image support for all editors #6219

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pushya22 merged 1 commit into from
Dec 18, 2024
Merged

[PE-95] chore: gif image support for all editors #6219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion apiserver/plane/app/views/asset/v2.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
]
Comment on lines +129 to +135
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Update error message in UserAssetsV2Endpoint to reflect all allowed image types.

The error message only mentions JPEG and PNG files, but the allowed_types list includes WEBP, JPG, and GIF.

Apply this diff to update the error message:

if type not in allowed_types:
    return Response(
        {
-            "error": "Invalid file type. Only JPEG and PNG files are allowed.",
+            "error": "Invalid file type. Only JPEG, PNG, WEBP, JPG, and GIF files are allowed.",
            "status": False,
        },
        status=status.HTTP_400_BAD_REQUEST,
    )

Committable suggestion skipped: line range outside the PR's diff.

Comment on lines +129 to +135
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Centralize file type configuration and update error messages

  1. The allowed file types list is duplicated across multiple classes (UserAssetsV2Endpoint, WorkspaceFileAssetEndpoint, ProjectAssetEndpoint).
  2. Error messages are inconsistent with the actual allowed types.

Consider these improvements:

  1. Create a central configuration for allowed file types:
# Add to a new file: plane/utils/constants.py
class FileAssetConfig:
    ALLOWED_MIME_TYPES = [
        "image/jpeg",
        "image/png",
        "image/webp",
        "image/jpg",
        "image/gif",
    ]
    
    @classmethod
    def get_human_readable_types(cls):
        return "JPEG, PNG, WebP, and GIF"
  1. Update the endpoints to use the central configuration:
+from plane.utils.constants import FileAssetConfig

 class UserAssetsV2Endpoint(BaseAPIView):
     def post(self, request):
         # ...
-        allowed_types = [
-            "image/jpeg",
-            "image/png",
-            "image/webp",
-            "image/jpg",
-            "image/gif",
-        ]
-        if type not in allowed_types:
+        if type not in FileAssetConfig.ALLOWED_MIME_TYPES:
             return Response(
                 {
-                    "error": "Invalid file type. Only JPEG and PNG files are allowed.",
+                    "error": f"Invalid file type. Only {FileAssetConfig.get_human_readable_types()} files are allowed.",
                     "status": False,
                 },
                 status=status.HTTP_400_BAD_REQUEST,
             )

Apply similar changes to WorkspaceFileAssetEndpoint and ProjectAssetEndpoint classes.

if type not in allowed_types:
return Response(
{
Expand Down
8 changes: 7 additions & 1 deletion apiserver/plane/space/views/asset.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
]
Comment on lines +89 to +95
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Update error message to reflect all allowed image types.

The error message only mentions JPEG and PNG files, but the allowed_types list includes WEBP, JPG, and GIF. This inconsistency could confuse users.

Apply this diff to update the error message:

if type not in allowed_types:
    return Response(
        {
-            "error": "Invalid file type. Only JPEG and PNG files are allowed.",
+            "error": "Invalid file type. Only JPEG, PNG, WEBP, JPG, and GIF files are allowed.",
            "status": False,
        },
        status=status.HTTP_400_BAD_REQUEST,
    )

Committable suggestion skipped: line range outside the PR's diff.

if type not in allowed_types:
return Response(
{
Expand Down
3 changes: 3 additions & 0 deletions packages/editor/src/core/constants/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}`);
4 changes: 3 additions & 1 deletion packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
/>
Expand Down
8 changes: 5 additions & 3 deletions packages/editor/src/core/plugins/image/utils/validate-file.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
// constants
import { ACCEPTED_FILE_MIME_TYPES } from "@/constants/config";

type TArgs = {
file: File;
maxFileSize: number;
Expand All @@ -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;
}

Expand Down