feat: custom image support for project logo

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

@@ -235,7 +235,10 @@ def get_entity_id_field(self, entity_type, entity_id):
             }
 
         # Project Cover
-        if entity_type == FileAsset.EntityTypeContext.PROJECT_COVER:
+        if (
+            entity_type == FileAsset.EntityTypeContext.PROJECT_COVER
+            or entity_type == FileAsset.EntityTypeContext.PROJECT_LOGO
+        ):
             return {
                 "project_id": entity_id,
             }
@@ -522,6 +525,7 @@ def get(self, request, asset_id):
             FileAsset.EntityTypeContext.USER_COVER,
             FileAsset.EntityTypeContext.WORKSPACE_LOGO,
             FileAsset.EntityTypeContext.PROJECT_COVER,
+            FileAsset.EntityTypeContext.PROJECT_LOGO,
         ]:
             return Response(
                 {
@@ -562,7 +566,10 @@ def get_entity_id_field(self, entity_type, entity_id):
                 "workspace_id": entity_id,
             }
 
-        if entity_type == FileAsset.EntityTypeContext.PROJECT_COVER:
+        if (
+            entity_type == FileAsset.EntityTypeContext.PROJECT_COVER
+            or entity_type == FileAsset.EntityTypeContext.PROJECT_LOGO
+        ):
             return {
                 "project_id": entity_id,
             }
@@ -737,7 +744,6 @@ def get(self, request, slug, project_id, pk):
 
 
 class ProjectBulkAssetEndpoint(BaseAPIView):
-
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def post(self, request, slug, project_id, entity_id):
         asset_ids = request.data.get("asset_ids", [])
@@ -769,11 +775,21 @@ def post(self, request, slug, project_id, entity_id):
             )
 
         # Check if the asset is uploaded
-        if asset.entity_type == FileAsset.EntityTypeContext.PROJECT_COVER:
+        if (
+            asset.entity_type == FileAsset.EntityTypeContext.PROJECT_COVER
+            or asset.entity_type == FileAsset.EntityTypeContext.PROJECT_LOGO
+        ):
+            # Update the project cover image
             assets.update(
                 project_id=project_id,
             )
 
+            # Update the project cover image
+            if asset.entity_type == FileAsset.EntityTypeContext.PROJECT_COVER:
+                project = Project.objects.get(id=project_id)
+                project.cover_image_asset_id = asset.id
+                project.save()
+
         if asset.entity_type == FileAsset.EntityTypeContext.ISSUE_DESCRIPTION:
             assets.update(
                 issue_id=entity_id,

apiserver/plane/db/migrations/0083_alter_fileasset_entity_type.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.15 on 2024-10-24 19:42
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0082_alter_issue_managers_alter_cycleissue_issue_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='fileasset',
+            name='entity_type',
+            field=models.CharField(blank=True, choices=[('ISSUE_ATTACHMENT', 'Issue Attachment'), ('ISSUE_DESCRIPTION', 'Issue Description'), ('COMMENT_DESCRIPTION', 'Comment Description'), ('PAGE_DESCRIPTION', 'Page Description'), ('USER_COVER', 'User Cover'), ('USER_AVATAR', 'User Avatar'), ('WORKSPACE_LOGO', 'Workspace Logo'), ('PROJECT_COVER', 'Project Cover'), ('DRAFT_ISSUE_ATTACHMENT', 'Draft Issue Attachment'), ('DRAFT_ISSUE_DESCRIPTION', 'Draft Issue Description'), ('PROJECT_LOGO', 'Project Logo')], max_length=255, null=True),
+        ),
+    ]

apiserver/plane/db/models/asset.py

@@ -11,7 +11,6 @@
 
 
 def get_upload_path(instance, filename):
-
     if instance.workspace_id is not None:
         return f"{instance.workspace.id}/{uuid4().hex}-{filename}"
     return f"user-{uuid4().hex}-{filename}"
@@ -38,6 +37,7 @@ class EntityTypeContext(models.TextChoices):
         PROJECT_COVER = "PROJECT_COVER"
         DRAFT_ISSUE_ATTACHMENT = "DRAFT_ISSUE_ATTACHMENT"
         DRAFT_ISSUE_DESCRIPTION = "DRAFT_ISSUE_DESCRIPTION"
+        PROJECT_LOGO = "PROJECT_LOGO"
 
     attributes = models.JSONField(default=dict)
     asset = models.FileField(
@@ -116,6 +116,7 @@ def asset_url(self):
             or self.entity_type == self.EntityTypeContext.USER_AVATAR
             or self.entity_type == self.EntityTypeContext.USER_COVER
             or self.entity_type == self.EntityTypeContext.PROJECT_COVER
+            or self.entity_type == self.EntityTypeContext.PROJECT_LOGO
         ):
             return f"/api/assets/v2/static/{self.id}/"
 

packages/types/src/common.d.ts

@@ -11,7 +11,7 @@ export type TPaginationInfo = {
 };
 
 export type TLogoProps = {
-  in_use: "emoji" | "icon";
+  in_use: "emoji" | "icon" | "image";
   emoji?: {
     value?: string;
     url?: string;
@@ -21,4 +21,7 @@ export type TLogoProps = {
     color?: string;
     background_color?: string;
   };
+  image?: {
+    url?: string;
+  }
 };

packages/types/src/enums.ts

@@ -56,6 +56,7 @@ export enum EFileAssetType {
   DRAFT_ISSUE_DESCRIPTION = "DRAFT_ISSUE_DESCRIPTION",
   PAGE_DESCRIPTION = "PAGE_DESCRIPTION",
   PROJECT_COVER = "PROJECT_COVER",
+  PROJECT_LOGO = "PROJECT_LOGO",
   USER_AVATAR = "USER_AVATAR",
   USER_COVER = "USER_COVER",
   WORKSPACE_LOGO = "WORKSPACE_LOGO",

packages/ui/package.json

@@ -30,20 +30,23 @@
     "@blueprintjs/core": "^4.16.3",
     "@blueprintjs/popover2": "^1.13.3",
     "@headlessui/react": "^1.7.3",
-    "@popperjs/core": "^2.11.8",
     "@plane/helpers": "*",
+    "@popperjs/core": "^2.11.8",
     "clsx": "^2.0.0",
     "emoji-picker-react": "^4.5.16",
     "lodash": "^4.17.21",
     "lucide-react": "^0.379.0",
     "react-color": "^2.19.3",
+    "react-dropzone": "^14.2.10",
     "react-popper": "^2.3.0",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.0.0",
     "use-font-face-observer": "^1.2.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.4.0",
+    "@plane/eslint-config": "*",
+    "@plane/typescript-config": "*",
     "@storybook/addon-essentials": "^8.1.1",
     "@storybook/addon-interactions": "^8.1.1",
     "@storybook/addon-links": "^8.1.1",
@@ -61,13 +64,11 @@
     "@types/react-dom": "^18.2.18",
     "autoprefixer": "^10.4.19",
     "classnames": "^2.3.2",
-    "@plane/eslint-config": "*",
     "postcss-cli": "^11.0.0",
     "postcss-nested": "^6.0.1",
     "storybook": "^8.1.1",
     "tailwind-config-custom": "*",
     "tailwindcss": "^3.4.3",
-    "@plane/typescript-config": "*",
     "tsup": "^7.2.0",
     "typescript": "5.3.3"
   }

packages/ui/src/emoji/custom-image-picker.tsx

@@ -0,0 +1,88 @@
+import React, { useCallback, useState } from "react";
+import { Button } from "../button";
+import { Input } from "../form-fields";
+import Dropzone from "react-dropzone";
+import { cn } from "../../helpers";
+
+type Props = {
+  onChange: (url: string) => void;
+  uploadFile: (file: File) => Promise<string>;
+};
+
+export const ProjectLogoCustomImagePicker: React.FC<Props> = (props) => {
+  const { onChange, uploadFile } = props;
+  // states
+  const [externalURL, setExternalURL] = useState("");
+
+  const handleFormSubmit = useCallback(() => {
+    if (!externalURL || externalURL.trim() === "") return;
+    onChange(externalURL);
+  }, [externalURL]);
+
+  const handleUpload = useCallback((files: File[]) => {
+    if (files.length > 1) return;
+    const acceptedFile = files[0];
+    if (!acceptedFile) return;
+    uploadFile(acceptedFile).then((url) => {
+      onChange(url);
+    });
+  }, []);
+
+  return (
+    <>
+      <div className="flex items-center gap-1">
+        <Input
+          type="url"
+          className="flex-grow"
+          placeholder="Paste link to an image..."
+          value={externalURL}
+          onChange={(e) => setExternalURL(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") handleFormSubmit();
+          }}
+          required
+          autoFocus
+        />
+        <Button className="flex-shrink-0" size="sm" onClick={handleFormSubmit}>
+          Submit
+        </Button>
+      </div>
+      <Dropzone
+        onDrop={handleUpload}
+        multiple={false}
+        accept={{
+          "image/*": [".png", ".jpg", ".jpeg", ".webp"],
+        }}
+        maxSize={5 * 1024 * 1024}
+      >
+        {({ getRootProps, getInputProps, isDragActive, fileRejections }) => (
+          <div
+            className={cn(
+              "bg-custom-background-90 text-sm text-center text-custom-text-400 hover:text-custom-text-300 rounded grid place-items-center h-32 cursor-pointer transition-colors",
+              {
+                "bg-custom-background-80 text-custom-text-300": isDragActive,
+                "bg-red-500/20 text-red-500 hover:text-red-500": fileRejections.length > 0,
+              }
+            )}
+            {...getRootProps()}
+          >
+            <input {...getInputProps()} />
+            {fileRejections.length > 0 ? (
+              <p>
+                {fileRejections[0].errors[0].code === "file-too-large"
+                  ? "The image size cannot exceed 5 MB."
+                  : "Please upload a valid file."}
+              </p>
+            ) : (
+              <p>
+                Drag 'n' drop some files here,
+                <br />
+                or click to select files
+              </p>
+            )}
+          </div>
+        )}
+      </Dropzone>
+    </>
+  );
+};

packages/ui/src/emoji/emoji-icon-helper.tsx

@@ -4,8 +4,24 @@ import { EmojiClickData, Theme } from "emoji-picker-react";
 export enum EmojiIconPickerTypes {
   EMOJI = "emoji",
   ICON = "icon",
+  IMAGE = "image",
 }
 
+export const PROJECT_LOGO_PICKER_TABS_LIST = [
+  {
+    key: EmojiIconPickerTypes.EMOJI,
+    title: "Emojis",
+  },
+  {
+    key: EmojiIconPickerTypes.ICON,
+    title: "Icons",
+  },
+  {
+    key: EmojiIconPickerTypes.IMAGE,
+    title: "Custom",
+  },
+];
+
 export const TABS_LIST = [
   {
     key: EmojiIconPickerTypes.EMOJI,
@@ -28,6 +44,10 @@ export type TChangeHandlerProps =
         name: string;
         color: string;
       };
+    }
+  | {
+      type: EmojiIconPickerTypes.IMAGE;
+      value: string;
     };
 
 export type TCustomEmojiPicker = {

packages/ui/src/emoji/index.ts

@@ -1,5 +1,5 @@
 export * from "./emoji-icon-picker-new";
-export * from "./emoji-icon-picker";
 export * from "./emoji-icon-helper";
 export * from "./icons";
 export * from "./logo";
+export * from "./project-logo-picker";

packages/ui/src/emoji/emoji-icon-picker.tsx → packages/ui/src/emoji/project-logo-picker.tsx

@@ -9,9 +9,14 @@ import { IconsList } from "./icons-list";
 // helpers
 import { cn } from "../../helpers";
 // hooks
-import { EmojiIconPickerTypes, TABS_LIST, TCustomEmojiPicker } from "./emoji-icon-helper";
+import { EmojiIconPickerTypes, PROJECT_LOGO_PICKER_TABS_LIST, TCustomEmojiPicker } from "./emoji-icon-helper";
+import { ProjectLogoCustomImagePicker } from "./custom-image-picker";
 
-export const CustomEmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
+type Props = TCustomEmojiPicker & {
+  uploadFile: (file: File) => Promise<string>;
+};
+
+export const ProjectLogoPickerDropdown: React.FC<Props> = (props) => {
   const {
     isOpen,
     handleToggle,
@@ -28,6 +33,7 @@ export const CustomEmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
     searchDisabled = false,
     searchPlaceholder = "Search",
     theme,
+    uploadFile,
   } = props;
   // refs
   const containerRef = useRef<HTMLDivElement>(null);
@@ -78,10 +84,10 @@ export const CustomEmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
                 ref={containerRef}
                 as="div"
                 className="h-full w-full flex flex-col overflow-hidden"
-                defaultIndex={TABS_LIST.findIndex((tab) => tab.key === defaultOpen)}
+                defaultIndex={PROJECT_LOGO_PICKER_TABS_LIST.findIndex((tab) => tab.key === defaultOpen)}
               >
-                <Tab.List as="div" className="grid grid-cols-2 gap-1 p-2">
-                  {TABS_LIST.map((tab) => (
+                <Tab.List as="div" className="grid grid-cols-3 gap-1 p-2">
+                  {PROJECT_LOGO_PICKER_TABS_LIST.map((tab) => (
                     <Tab
                       key={tab.key}
                       className={({ selected }) =>
@@ -128,6 +134,18 @@ export const CustomEmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
                       searchDisabled={searchDisabled}
                     />
                   </Tab.Panel>
+                  <Tab.Panel className="px-2 my-2 space-y-2">
+                    <ProjectLogoCustomImagePicker
+                      uploadFile={uploadFile}
+                      onChange={(url) => {
+                        onChange({
+                          type: EmojiIconPickerTypes.IMAGE,
+                          value: url,
+                        });
+                        if (closeOnSelect) handleToggle(false);
+                      }}
+                    />
+                  </Tab.Panel>
                 </Tab.Panels>
               </Tab.Group>
             </div>

web/ce/components/projects/create/root.tsx

@@ -26,7 +26,7 @@ export type TCreateProjectFormProps = {
   onClose: () => void;
   handleNextStep: (projectId: string) => void;
   data?: Partial<TProject>;
-  updateCoverImageStatus: (projectId: string, coverImage: string) => Promise<void>;
+  updateProjectAssetsStatus: (args: { projectId: string; formData: Partial<TProject> }) => Promise<void>;
 };
 
 const defaultValues: Partial<TProject> = {
@@ -45,7 +45,7 @@ const defaultValues: Partial<TProject> = {
 };
 
 export const CreateProjectForm: FC<TCreateProjectFormProps> = observer((props) => {
-  const { setToFavorite, workspaceSlug, onClose, handleNextStep, updateCoverImageStatus } = props;
+  const { setToFavorite, workspaceSlug, onClose, handleNextStep, updateProjectAssetsStatus } = props;
   // store
   const { captureProjectEvent } = useEventTracker();
   const { addProjectToFavorites, createProject } = useProject();
@@ -73,13 +73,13 @@ export const CreateProjectForm: FC<TCreateProjectFormProps> = observer((props) =
   const onSubmit = async (formData: Partial<TProject>) => {
     // Upper case identifier
     formData.identifier = formData.identifier?.toUpperCase();
-    const coverImage = formData.cover_image_url;
 
     return createProject(workspaceSlug.toString(), formData)
       .then(async (res) => {
-        if (coverImage) {
-          await updateCoverImageStatus(res.id, coverImage);
-        }
+        await updateProjectAssetsStatus({
+          projectId: res.id,
+          formData,
+        });
         const newPayload = {
           ...res,
           state: "SUCCESS",