feat: add drag-and-drop logo upload for organizations

apps/dokploy/components/dashboard/organization/handle-organization.tsx

@@ -1,5 +1,6 @@
 import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
-import { PenBoxIcon, Plus } from "lucide-react";
+import DOMPurify from "dompurify";
+import { GlobeIcon, PenBoxIcon, Plus, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -15,6 +16,7 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { Dropzone } from "@/components/ui/dropzone";
 import {
 	Form,
 	FormControl,
@@ -38,10 +40,67 @@ type OrganizationFormValues = z.infer<typeof organizationSchema>;
 interface Props {
 	organizationId?: string;
 	children?: React.ReactNode;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
 }
 
-export function AddOrganization({ organizationId }: Props) {
-	const [open, setOpen] = useState(false);
+const sanitizeSvg = (svgContent: string): string | null => {
+	const clean = DOMPurify.sanitize(svgContent, {
+		USE_PROFILES: { svg: true, svgFilters: true },
+		ADD_TAGS: ["use"],
+	});
+	if (!clean) return null;
+	return `data:image/svg+xml;base64,${btoa(clean)}`;
+};
+
+const resizeImage = (file: File, maxSize: number): Promise<string> => {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = (event) => {
+			const img = new Image();
+			img.onload = () => {
+				let { width, height } = img;
+
+				if (width > maxSize || height > maxSize) {
+					if (width > height) {
+						height = Math.round((height * maxSize) / width);
+						width = maxSize;
+					} else {
+						width = Math.round((width * maxSize) / height);
+						height = maxSize;
+					}
+				}
+
+				const canvas = document.createElement("canvas");
+				canvas.width = width;
+				canvas.height = height;
+				const ctx = canvas.getContext("2d");
+				if (!ctx) {
+					resolve(event.target?.result as string);
+					return;
+				}
+
+				ctx.drawImage(img, 0, 0, width, height);
+				resolve(canvas.toDataURL("image/webp", 0.8));
+			};
+			img.onerror = reject;
+			img.src = event.target?.result as string;
+		};
+		reader.onerror = reject;
+		reader.readAsDataURL(file);
+	});
+};
+
+export function AddOrganization({
+	organizationId,
+	open: controlledOpen,
+	onOpenChange: controlledOnOpenChange,
+}: Props) {
+	const [internalOpen, setInternalOpen] = useState(false);
+	const [uploadedFileName, setUploadedFileName] = useState<string | null>(null);
+	const isControlled = controlledOpen !== undefined;
+	const open = isControlled ? controlledOpen : internalOpen;
+	const setOpen = isControlled ? controlledOnOpenChange! : setInternalOpen;
 	const utils = api.useUtils();
 	const { data: organization } = api.organization.one.useQuery(
 		{
@@ -69,6 +128,7 @@ export function AddOrganization({ organizationId }: Props) {
 				name: organization.name,
 				logo: organization.logo || "",
 			});
+			setUploadedFileName(null);
 		}
 	}, [organization, form]);
 
@@ -80,6 +140,7 @@ export function AddOrganization({ organizationId }: Props) {
 		})
 			.then(() => {
 				form.reset();
+				setUploadedFileName(null);
 				toast.success(
 					`Organization ${organizationId ? "updated" : "created"} successfully`,
 				);
@@ -99,30 +160,86 @@ export function AddOrganization({ organizationId }: Props) {
 			});
 	};
 
+	const handleFileUpload = async (files: FileList | null) => {
+		if (!files || files.length === 0) return;
+		const file = files[0];
+		if (!file) return;
+
+		const allowedTypes = [
+			"image/jpeg",
+			"image/jpg",
+			"image/png",
+			"image/svg+xml",
+			"image/webp",
+		];
+		const fileExtension = file.name.split(".").pop()?.toLowerCase();
+		const allowedExtensions = ["jpg", "jpeg", "png", "svg", "webp"];
+
+		if (
+			!allowedTypes.includes(file.type) &&
+			!allowedExtensions.includes(fileExtension || "")
+		) {
+			toast.error("Only JPG, JPEG, PNG, WEBP, and SVG files are allowed");
+			return;
+		}
+
+		if (file.size > 2 * 1024 * 1024) {
+			toast.error("Image size must be less than 2MB");
+			return;
+		}
+
+		const isSvg = file.type === "image/svg+xml" || fileExtension === "svg";
+
+		if (isSvg) {
+			const text = await file.text();
+			const sanitizedDataUrl = sanitizeSvg(text);
+			if (!sanitizedDataUrl) {
+				toast.error("Invalid SVG file");
+				return;
+			}
+			form.setValue("logo", sanitizedDataUrl);
+			form.trigger("logo");
+			setUploadedFileName(file.name);
+			return;
+		}
+
+		// Resize raster images to max 256x256 and convert to WebP to save space
+		try {
+			const resizedDataUrl = await resizeImage(file, 256);
+			form.setValue("logo", resizedDataUrl);
+			form.trigger("logo");
+			setUploadedFileName(file.name);
+		} catch (error) {
+			toast.error("Error processing image");
+		}
+	};
+
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
-			<DialogTrigger asChild>
-				{organizationId ? (
-					<DropdownMenuItem
-						className="group cursor-pointer hover:bg-blue-500/10"
-						onSelect={(e) => e.preventDefault()}
-					>
-						<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
-					</DropdownMenuItem>
-				) : (
-					<DropdownMenuItem
-						className="gap-2 p-2"
-						onSelect={(e) => e.preventDefault()}
-					>
-						<div className="flex size-6 items-center justify-center rounded-md border bg-background">
-							<Plus className="size-4" />
-						</div>
-						<div className="font-medium text-muted-foreground">
-							Add organization
-						</div>
-					</DropdownMenuItem>
-				)}
-			</DialogTrigger>
+			{!isControlled && (
+				<DialogTrigger asChild>
+					{organizationId ? (
+						<DropdownMenuItem
+							className="group cursor-pointer hover:bg-blue-500/10"
+							onSelect={(e) => e.preventDefault()}
+						>
+							<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
+						</DropdownMenuItem>
+					) : (
+						<DropdownMenuItem
+							className="gap-2 p-2"
+							onSelect={(e) => e.preventDefault()}
+						>
+							<div className="flex size-6 items-center justify-center rounded-md border bg-background">
+								<Plus className="size-4" />
+							</div>
+							<div className="font-medium text-muted-foreground">
+								Add organization
+							</div>
+						</DropdownMenuItem>
+					)}
+				</DialogTrigger>
+			)}
 			<DialogContent className="sm:max-w-[425px]">
 				<DialogHeader>
 					<DialogTitle>
@@ -159,20 +276,71 @@ export function AddOrganization({ organizationId }: Props) {
 						<FormField
 							control={form.control}
 							name="logo"
-							render={({ field }) => (
-								<FormItem className="gap-4">
-									<FormLabel className="text-right">Logo URL</FormLabel>
-									<FormControl>
-										<Input
-											placeholder="https://example.com/logo.png"
-											{...field}
-											value={field.value || ""}
-											className="col-span-3"
-										/>
-									</FormControl>
-									<FormMessage className="col-span-3 col-start-2" />
-								</FormItem>
-							)}
+							render={({ field }) => {
+								const isDataUrl = field.value?.startsWith("data:");
+								const displayValue = isDataUrl
+									? uploadedFileName || "Uploaded image"
+									: field.value || "";
+
+								return (
+									<FormItem className="gap-4">
+										<FormLabel className="text-right">
+											Logo URL or Upload
+										</FormLabel>
+										<FormControl>
+											<div className="col-span-3 flex flex-col gap-3">
+												<div className="flex items-center gap-3">
+													<div className="flex size-10 shrink-0 items-center justify-center rounded-md border bg-muted/50 p-1">
+														{field.value ? (
+															// biome-ignore lint/performance/noImgElement: user uploaded logo preview
+															<img
+																src={field.value}
+																alt="Logo preview"
+																className="size-full object-contain"
+															/>
+														) : (
+															<GlobeIcon className="size-5 text-muted-foreground" />
+														)}
+													</div>
+													<div className="relative flex-1">
+														<Input
+															placeholder="https://example.com/logo.png"
+															{...field}
+															value={displayValue}
+															readOnly={isDataUrl}
+															onChange={(e) => {
+																field.onChange(e);
+																if (isDataUrl) setUploadedFileName(null);
+															}}
+															className="w-full pr-8"
+														/>
+														{field.value && (
+															<button
+																type="button"
+																onClick={() => {
+																	form.setValue("logo", "");
+																	setUploadedFileName(null);
+																}}
+																className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+															>
+																<X className="size-4" />
+															</button>
+														)}
+													</div>
+												</div>
+												<Dropzone
+													dropMessage="Drag & drop a logo or click to upload"
+													accept=".jpg,.jpeg,.png,.svg,.webp,image/jpeg,image/png,image/svg+xml,image/webp"
+													onChange={handleFileUpload}
+													classNameWrapper="border-2 border-dashed border-border hover:border-primary bg-muted/30 hover:bg-muted/50 transition-all rounded-lg"
+													classNameContent="h-32"
+												/>
+											</div>
+										</FormControl>
+										<FormMessage className="col-span-3 col-start-2" />
+									</FormItem>
+								);
+							}}
 						/>
 						<DialogFooter>
 							<Button type="submit" isLoading={isPending}>

apps/dokploy/components/layouts/side.tsx

@@ -27,7 +27,9 @@ import {
 	type LucideIcon,
 	Package,
 	Palette,
+	PenBoxIcon,
 	PieChart,
+	Plus,
 	Rocket,
 	Server,
 	ShieldCheck,
@@ -574,6 +576,10 @@ function SidebarLogo() {
 	const [_activeTeam, setActiveTeam] = useState<
 		typeof activeOrganization | null
 	>(null);
+	const [editOrganizationId, setEditOrganizationId] = useState<string | null>(
+		null,
+	);
+	const [isAddOrganizationOpen, setIsAddOrganizationOpen] = useState(false);
 
 	useEffect(() => {
 		if (activeOrganization) {
@@ -736,7 +742,15 @@ function SidebarLogo() {
 													</Button>
 													{org.ownerId === session?.user?.id && (
 														<>
-															<AddOrganization organizationId={org.id} />
+															<DropdownMenuItem
+																className="group cursor-pointer hover:bg-blue-500/10"
+																onSelect={(e) => {
+																	e.preventDefault();
+																	setEditOrganizationId(org.id);
+																}}
+															>
+																<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
+															</DropdownMenuItem>
 															<DialogAction
 																title="Delete Organization"
 																description="Are you sure you want to delete this organization?"
@@ -780,7 +794,20 @@ function SidebarLogo() {
 									isCloud) && (
 									<>
 										<DropdownMenuSeparator />
-										<AddOrganization />
+										<DropdownMenuItem
+											className="gap-2 p-2"
+											onSelect={(e) => {
+												e.preventDefault();
+												setIsAddOrganizationOpen(true);
+											}}
+										>
+											<div className="flex size-6 items-center justify-center rounded-md border bg-background">
+												<Plus className="size-4" />
+											</div>
+											<div className="font-medium text-muted-foreground">
+												Add organization
+											</div>
+										</DropdownMenuItem>
 									</>
 								)}
 							</DropdownMenuContent>
@@ -870,6 +897,23 @@ function SidebarLogo() {
 					</SidebarMenuItem>
 				</SidebarMenu>
 			)}
+			{editOrganizationId && (
+				<AddOrganization
+					organizationId={editOrganizationId}
+					open={true}
+					onOpenChange={(open) => {
+						if (!open) setEditOrganizationId(null);
+					}}
+				/>
+			)}
+			{isAddOrganizationOpen && (
+				<AddOrganization
+					open={true}
+					onOpenChange={(open) => {
+						if (!open) setIsAddOrganizationOpen(false);
+					}}
+				/>
+			)}
 		</>
 	);
 }