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

- Integrated Dropzone component into handle-organization.tsx.
- Resolved dialog auto-close bug by decoupling Dialog from DropdownMenu trigger.
- Added DOMPurify to sanitize uploaded SVG logos preventing XSS.
- Implemented client-side compression via canvas to resize raster images to 256x256 WebP.
- Enhanced UX with instant logo preview, masked base64 input strings, and a quick-clear button.
- Updated Dropzone to accept classNameContent for local height overrides.

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,63 @@ 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 +124,7 @@ export function AddOrganization({ organizationId }: Props) {
 				name: organization.name,
 				logo: organization.logo || "",
 			});
+			setUploadedFileName(null);
 		}
 	}, [organization, form]);
 
@@ -80,6 +136,7 @@ export function AddOrganization({ organizationId }: Props) {
 		})
 			.then(() => {
 				form.reset();
+				setUploadedFileName(null);
 				toast.success(
 					`Organization ${organizationId ? "updated" : "created"} successfully`,
 				);
@@ -99,30 +156,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 +272,71 @@ export function AddOrganization({ organizationId }: Props) {
 						<FormField
 							control={form.control}
 							name="logo"
-							render={({ field }) => (
+							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</FormLabel>
+									<FormLabel className="text-right">
+										Logo URL or Upload
+									</FormLabel>
 									<FormControl>
-										<Input
-											placeholder="https://example.com/logo.png"
-											{...field}
-											value={field.value || ""}
-											className="col-span-3"
-										/>
+										<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,8 @@ 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 +740,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 +792,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 +895,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);
+					}}
+				/>
+			)}
 		</>
 	);
 }

apps/dokploy/components/ui/dropzone.tsx

@@ -10,13 +10,14 @@ interface DropzoneProps
 		"value" | "onChange"
 	> {
 	classNameWrapper?: string;
+	classNameContent?: string;
 	className?: string;
 	dropMessage: string;
 	onChange: (acceptedFiles: FileList | null) => void;
 }
 
 export const Dropzone = React.forwardRef<HTMLDivElement, DropzoneProps>(
-	({ className, classNameWrapper, dropMessage, onChange, ...props }, ref) => {
+	({ className, classNameWrapper, classNameContent, dropMessage, onChange, ...props }, ref) => {
 		const inputRef = useRef<HTMLInputElement | null>(null);
 		// Function to handle drag over event
 		const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
@@ -51,7 +52,10 @@ export const Dropzone = React.forwardRef<HTMLDivElement, DropzoneProps>(
 				)}
 			>
 				<CardContent
-					className="flex flex-col items-center justify-center space-y-2 px-2 py-4 text-xs h-96"
+					className={cn(
+						"flex flex-col items-center justify-center space-y-2 px-2 py-4 text-xs h-96",
+						classNameContent
+					)}
 					onDragOver={handleDragOver}
 					onDrop={handleDrop}
 					onClick={handleButtonClick}