Merge branch 'canary' of github.com:Dokploy/dokploy into build/pnpm-node-setup

__test__/drop/drop.test.test.ts

@@ -0,0 +1,98 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { APPLICATIONS_PATH } from "@/server/constants";
+import { unzipDrop } from "@/server/utils/builders/drop";
+import AdmZip from "adm-zip";
+import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
+
+if (typeof window === "undefined") {
+	const undici = require("undici");
+	globalThis.File = undici.File as any;
+	globalThis.FileList = undici.FileList as any;
+}
+
+vi.mock("@/server/constants", () => ({
+	APPLICATIONS_PATH: "./__test__/drop/zips/output",
+}));
+
+describe("unzipDrop using real zip files", () => {
+	beforeAll(async () => {
+		await fs.rm(APPLICATIONS_PATH, { recursive: true, force: true });
+	});
+
+	afterAll(async () => {
+		await fs.rm(APPLICATIONS_PATH, { recursive: true, force: true });
+	});
+
+	it("should correctly extract a zip with a single root folder", async () => {
+		const appName = "single-file";
+		const outputPath = path.join(APPLICATIONS_PATH, appName);
+		const zip = new AdmZip("./__test__/drop/zips/single-file.zip");
+
+		const zipBuffer = zip.toBuffer();
+		const file = new File([zipBuffer], "single.zip");
+		await unzipDrop(file, appName);
+
+		const files = await fs.readdir(outputPath, { withFileTypes: true });
+		expect(files.some((f) => f.name === "test.txt")).toBe(true);
+	});
+
+	it("should correctly extract a zip with a single root folder and a subfolder", async () => {
+		const appName = "folderwithfile";
+		const outputPath = path.join(APPLICATIONS_PATH, appName);
+		const zip = new AdmZip("./__test__/drop/zips/folder-with-file.zip");
+
+		const zipBuffer = zip.toBuffer();
+		const file = new File([zipBuffer], "single.zip");
+		await unzipDrop(file, appName);
+
+		const files = await fs.readdir(outputPath, { withFileTypes: true });
+		expect(files.some((f) => f.name === "folder1.txt")).toBe(true);
+	});
+
+	it("should correctly extract a zip with multiple root folders", async () => {
+		const appName = "two-folders";
+		const outputPath = path.join(APPLICATIONS_PATH, appName);
+		const zip = new AdmZip("./__test__/drop/zips/two-folders.zip");
+
+		const zipBuffer = zip.toBuffer();
+		const file = new File([zipBuffer], "single.zip");
+		await unzipDrop(file, appName);
+
+		const files = await fs.readdir(outputPath, { withFileTypes: true });
+
+		expect(files.some((f) => f.name === "folder1")).toBe(true);
+		expect(files.some((f) => f.name === "folder2")).toBe(true);
+	});
+
+	it("should correctly extract a zip with a single root with a file", async () => {
+		const appName = "nested";
+		const outputPath = path.join(APPLICATIONS_PATH, appName);
+		const zip = new AdmZip("./__test__/drop/zips/nested.zip");
+
+		const zipBuffer = zip.toBuffer();
+		const file = new File([zipBuffer], "single.zip");
+		await unzipDrop(file, appName);
+
+		const files = await fs.readdir(outputPath, { withFileTypes: true });
+
+		expect(files.some((f) => f.name === "folder1")).toBe(true);
+		expect(files.some((f) => f.name === "folder2")).toBe(true);
+		expect(files.some((f) => f.name === "folder3")).toBe(true);
+	});
+
+	it("should correctly extract a zip with a single root with a folder", async () => {
+		const appName = "folder-with-sibling-file";
+		const outputPath = path.join(APPLICATIONS_PATH, appName);
+		const zip = new AdmZip("./__test__/drop/zips/folder-with-sibling-file.zip");
+
+		const zipBuffer = zip.toBuffer();
+		const file = new File([zipBuffer], "single.zip");
+		await unzipDrop(file, appName);
+
+		const files = await fs.readdir(outputPath, { withFileTypes: true });
+
+		expect(files.some((f) => f.name === "folder1")).toBe(true);
+		expect(files.some((f) => f.name === "test.txt")).toBe(true);
+	});
+});

__test__/drop/zips/folder1/folder1.txt

@@ -0,0 +1 @@
+Gogogogogogo

__test__/drop/zips/folder2/folder2.txt

@@ -0,0 +1 @@
+gogogogogog

__test__/drop/zips/folder3/file3.txt

@@ -0,0 +1 @@
+gogogogogogogogogo

__test__/drop/zips/test.txt

@@ -0,0 +1 @@
+dsafasdfasdf

components/dashboard/application/deployments/refresh-token.tsx

@@ -29,8 +29,8 @@ export const RefreshToken = ({ applicationId }: Props) => {
 				<AlertDialogHeader>
 					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
 					<AlertDialogDescription>
-						This action cannot be undone. This will permanently delete the
-						domain
+						This action cannot be undone. This will change the refresh token and
+						other tokens will be invalidated.
 					</AlertDialogDescription>
 				</AlertDialogHeader>
 				<AlertDialogFooter>

components/dashboard/application/general/generic/save-drag-n-drop.tsx

@@ -0,0 +1,141 @@
+import { Button } from "@/components/ui/button";
+import { Dropzone } from "@/components/ui/dropzone";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { type UploadFile, uploadFileSchema } from "@/utils/schema";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { TrashIcon } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+
+export const SaveDragNDrop = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery({ applicationId });
+
+	const { mutateAsync, isLoading } =
+		api.application.dropDeployment.useMutation();
+
+	const form = useForm<UploadFile>({
+		defaultValues: {},
+		resolver: zodResolver(uploadFileSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				dropBuildPath: data.dropBuildPath || "",
+			});
+		}
+	}, [data, form, form.reset, form.formState.isSubmitSuccessful]);
+	const zip = form.watch("zip");
+
+	const onSubmit = async (values: UploadFile) => {
+		const formData = new FormData();
+
+		formData.append("zip", values.zip);
+		formData.append("applicationId", applicationId);
+		if (values.dropBuildPath) {
+			formData.append("dropBuildPath", values.dropBuildPath);
+		}
+
+		await mutateAsync(formData)
+			.then(async () => {
+				toast.success("Deployment saved");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to save the deployment");
+			});
+	};
+
+	return (
+		<Form {...form}>
+			<form
+				onSubmit={form.handleSubmit(onSubmit)}
+				className="flex flex-col gap-4"
+			>
+				<div className="grid md:grid-cols-2 gap-4 ">
+					<div className="md:col-span-2 space-y-4">
+						<FormField
+							control={form.control}
+							name="dropBuildPath"
+							render={({ field }) => (
+								<FormItem className="w-full ">
+									<FormLabel>Build Path</FormLabel>
+									<FormControl>
+										<Input {...field} placeholder="Build Path" />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="zip"
+							render={({ field }) => (
+								<FormItem className="w-full ">
+									<FormLabel>Zip file</FormLabel>
+									<FormControl>
+										<Dropzone
+											{...field}
+											dropMessage="Drop files or click here"
+											accept=".zip"
+											onChange={(e) => {
+												if (e instanceof FileList) {
+													field.onChange(e[0]);
+												} else {
+													field.onChange(e);
+												}
+											}}
+										/>
+									</FormControl>
+									<FormMessage />
+									{zip instanceof File && (
+										<div className="flex flex-row gap-4 items-center">
+											<span className="text-sm text-muted-foreground">
+												{zip.name} ({zip.size} bytes)
+											</span>
+											<Button
+												type="button"
+												className="w-fit"
+												variant="ghost"
+												onClick={() => {
+													field.onChange(null);
+												}}
+											>
+												<TrashIcon className="w-4 h-4 text-muted-foreground" />
+											</Button>
+										</div>
+									)}
+								</FormItem>
+							)}
+						/>
+					</div>
+				</div>
+
+				<div className="flex flex-row justify-end">
+					<Button
+						type="submit"
+						className="w-fit"
+						isLoading={isLoading}
+						disabled={!zip}
+					>
+						Deploy{" "}
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+};

components/dashboard/application/general/generic/show.tsx

@@ -7,8 +7,9 @@ import { api } from "@/utils/api";
 import { GitBranch, LockIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
+import { SaveDragNDrop } from "./save-drag-n-drop";
 
-type TabState = "github" | "docker" | "git";
+type TabState = "github" | "docker" | "git" | "drop";
 
 interface Props {
 	applicationId: string;
@@ -62,6 +63,12 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 						>
 							Git
 						</TabsTrigger>
+						<TabsTrigger
+							value="drop"
+							className="rounded-none border-b-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
+						>
+							Drop
+						</TabsTrigger>
 					</TabsList>
 					<TabsContent value="github" className="w-full p-2">
 						{haveGithubConfigured ? (
@@ -89,6 +96,9 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 					<TabsContent value="git" className="w-full p-2">
 						<SaveGitProvider applicationId={applicationId} />
 					</TabsContent>
+					<TabsContent value="drop" className="w-full p-2">
+						<SaveDragNDrop applicationId={applicationId} />
+					</TabsContent>
 				</Tabs>
 			</CardContent>
 		</Card>

components/dashboard/compose/general/actions.tsx

@@ -10,7 +10,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
-import { ExternalLink, Globe, Terminal } from "lucide-react";
+import { CheckCircle2, ExternalLink, Globe, Terminal } from "lucide-react";
 import Link from "next/link";
 import { toast } from "sonner";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
@@ -50,7 +50,6 @@ export const ComposeActions = ({ composeId }: Props) => {
 	return (
 		<div className="flex flex-row gap-4 w-full flex-wrap ">
 			<DeployCompose composeId={composeId} />
-
 			<Toggle
 				aria-label="Toggle italic"
 				pressed={data?.autoDeploy || false}
@@ -67,8 +66,9 @@ export const ComposeActions = ({ composeId }: Props) => {
 							toast.error("Error to update Auto Deploy");
 						});
 				}}
+				className="flex flex-row gap-2 items-center"
 			>
-				Autodeploy
+				Autodeploy {data?.autoDeploy && <CheckCircle2 className="size-4" />}
 			</Toggle>
 			<RedbuildCompose composeId={composeId} />
 			{data?.composeType === "docker-compose" && (

components/dashboard/mariadb/environment/show-mariadb-environment.tsx

@@ -14,9 +14,11 @@ import {
 	FormItem,
 	FormMessage,
 } from "@/components/ui/form";
+import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect } from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -32,6 +34,7 @@ interface Props {
 }
 
 export const ShowMariadbEnvironment = ({ mariadbId }: Props) => {
+	const [isEnvVisible, setIsEnvVisible] = useState(true);
 	const { mutateAsync, isLoading } = api.mariadb.saveEnvironment.useMutation();
 
 	const { data, refetch } = api.mariadb.one.useQuery(
@@ -74,11 +77,26 @@ export const ShowMariadbEnvironment = ({ mariadbId }: Props) => {
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
-				<CardHeader>
-					<CardTitle className="text-xl">Environment Settings</CardTitle>
-					<CardDescription>
-						You can add environment variables to your database.
-					</CardDescription>
+				{" "}
+				<CardHeader className="flex flex-row w-full items-center justify-between">
+					<div>
+						<CardTitle className="text-xl">Environment Settings</CardTitle>
+						<CardDescription>
+							You can add environment variables to your resource.
+						</CardDescription>
+					</div>
+
+					<Toggle
+						aria-label="Toggle bold"
+						pressed={isEnvVisible}
+						onPressedChange={setIsEnvVisible}
+					>
+						{isEnvVisible ? (
+							<EyeOffIcon className="h-4 w-4 text-muted-foreground" />
+						) : (
+							<EyeIcon className="h-4 w-4 text-muted-foreground" />
+						)}
+					</Toggle>
 				</CardHeader>
 				<CardContent>
 					<Form {...form}>
@@ -95,6 +113,7 @@ export const ShowMariadbEnvironment = ({ mariadbId }: Props) => {
 										<FormControl>
 											<CodeEditor
 												language="properties"
+												disabled={isEnvVisible}
 												placeholder={`NODE_ENV=production
 PORT=3000
 `}

components/dashboard/mongo/environment/show-mongo-environment.tsx

@@ -14,9 +14,11 @@ import {
 	FormItem,
 	FormMessage,
 } from "@/components/ui/form";
+import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect } from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -32,6 +34,7 @@ interface Props {
 }
 
 export const ShowMongoEnvironment = ({ mongoId }: Props) => {
+	const [isEnvVisible, setIsEnvVisible] = useState(true);
 	const { mutateAsync, isLoading } = api.mongo.saveEnvironment.useMutation();
 
 	const { data, refetch } = api.mongo.one.useQuery(
@@ -74,11 +77,25 @@ export const ShowMongoEnvironment = ({ mongoId }: Props) => {
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
-				<CardHeader>
-					<CardTitle className="text-xl">Environment Settings</CardTitle>
-					<CardDescription>
-						You can add environment variables to your database.
-					</CardDescription>
+				<CardHeader className="flex flex-row w-full items-center justify-between">
+					<div>
+						<CardTitle className="text-xl">Environment Settings</CardTitle>
+						<CardDescription>
+							You can add environment variables to your resource.
+						</CardDescription>
+					</div>
+
+					<Toggle
+						aria-label="Toggle bold"
+						pressed={isEnvVisible}
+						onPressedChange={setIsEnvVisible}
+					>
+						{isEnvVisible ? (
+							<EyeOffIcon className="h-4 w-4 text-muted-foreground" />
+						) : (
+							<EyeIcon className="h-4 w-4 text-muted-foreground" />
+						)}
+					</Toggle>
 				</CardHeader>
 				<CardContent>
 					<Form {...form}>
@@ -95,6 +112,7 @@ export const ShowMongoEnvironment = ({ mongoId }: Props) => {
 										<FormControl>
 											<CodeEditor
 												language="properties"
+												disabled={isEnvVisible}
 												placeholder={`NODE_ENV=production
 PORT=3000
 `}

components/dashboard/mysql/environment/show-mysql-environment.tsx

@@ -14,9 +14,11 @@ import {
 	FormItem,
 	FormMessage,
 } from "@/components/ui/form";
+import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect } from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -32,6 +34,7 @@ interface Props {
 }
 
 export const ShowMysqlEnvironment = ({ mysqlId }: Props) => {
+	const [isEnvVisible, setIsEnvVisible] = useState(true);
 	const { mutateAsync, isLoading } = api.mysql.saveEnvironment.useMutation();
 
 	const { data, refetch } = api.mysql.one.useQuery(
@@ -74,11 +77,25 @@ export const ShowMysqlEnvironment = ({ mysqlId }: Props) => {
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
-				<CardHeader>
-					<CardTitle className="text-xl">Environment Settings</CardTitle>
-					<CardDescription>
-						You can add environment variables to your database.
-					</CardDescription>
+				<CardHeader className="flex flex-row w-full items-center justify-between">
+					<div>
+						<CardTitle className="text-xl">Environment Settings</CardTitle>
+						<CardDescription>
+							You can add environment variables to your resource.
+						</CardDescription>
+					</div>
+
+					<Toggle
+						aria-label="Toggle bold"
+						pressed={isEnvVisible}
+						onPressedChange={setIsEnvVisible}
+					>
+						{isEnvVisible ? (
+							<EyeOffIcon className="h-4 w-4 text-muted-foreground" />
+						) : (
+							<EyeIcon className="h-4 w-4 text-muted-foreground" />
+						)}
+					</Toggle>
 				</CardHeader>
 				<CardContent>
 					<Form {...form}>
@@ -95,6 +112,7 @@ export const ShowMysqlEnvironment = ({ mysqlId }: Props) => {
 										<FormControl>
 											<CodeEditor
 												language="properties"
+												disabled={isEnvVisible}
 												placeholder={`NODE_ENV=production
 PORT=3000
 `}

components/dashboard/postgres/environment/show-postgres-environment.tsx

@@ -14,9 +14,11 @@ import {
 	FormItem,
 	FormMessage,
 } from "@/components/ui/form";
+import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect } from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -32,6 +34,7 @@ interface Props {
 }
 
 export const ShowPostgresEnvironment = ({ postgresId }: Props) => {
+	const [isEnvVisible, setIsEnvVisible] = useState(true);
 	const { mutateAsync, isLoading } = api.postgres.saveEnvironment.useMutation();
 
 	const { data, refetch } = api.postgres.one.useQuery(
@@ -74,11 +77,25 @@ export const ShowPostgresEnvironment = ({ postgresId }: Props) => {
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
-				<CardHeader>
-					<CardTitle className="text-xl">Environment Settings</CardTitle>
-					<CardDescription>
-						You can add environment variables to your database.
-					</CardDescription>
+				<CardHeader className="flex flex-row w-full items-center justify-between">
+					<div>
+						<CardTitle className="text-xl">Environment Settings</CardTitle>
+						<CardDescription>
+							You can add environment variables to your resource.
+						</CardDescription>
+					</div>
+
+					<Toggle
+						aria-label="Toggle bold"
+						pressed={isEnvVisible}
+						onPressedChange={setIsEnvVisible}
+					>
+						{isEnvVisible ? (
+							<EyeOffIcon className="h-4 w-4 text-muted-foreground" />
+						) : (
+							<EyeIcon className="h-4 w-4 text-muted-foreground" />
+						)}
+					</Toggle>
 				</CardHeader>
 				<CardContent>
 					<Form {...form}>
@@ -95,6 +112,7 @@ export const ShowPostgresEnvironment = ({ postgresId }: Props) => {
 										<FormControl>
 											<CodeEditor
 												language="properties"
+												disabled={isEnvVisible}
 												placeholder={`NODE_ENV=production
 PORT=3000
 `}

components/dashboard/redis/environment/show-redis-environment.tsx

@@ -14,9 +14,11 @@ import {
 	FormItem,
 	FormMessage,
 } from "@/components/ui/form";
+import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect } from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -32,6 +34,7 @@ interface Props {
 }
 
 export const ShowRedisEnvironment = ({ redisId }: Props) => {
+	const [isEnvVisible, setIsEnvVisible] = useState(true);
 	const { mutateAsync, isLoading } = api.redis.saveEnvironment.useMutation();
 
 	const { data, refetch } = api.redis.one.useQuery(
@@ -74,11 +77,25 @@ export const ShowRedisEnvironment = ({ redisId }: Props) => {
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
-				<CardHeader>
-					<CardTitle className="text-xl">Environment Settings</CardTitle>
-					<CardDescription>
-						You can add environment variables to your database.
-					</CardDescription>
+				<CardHeader className="flex flex-row w-full items-center justify-between">
+					<div>
+						<CardTitle className="text-xl">Environment Settings</CardTitle>
+						<CardDescription>
+							You can add environment variables to your resource.
+						</CardDescription>
+					</div>
+
+					<Toggle
+						aria-label="Toggle bold"
+						pressed={isEnvVisible}
+						onPressedChange={setIsEnvVisible}
+					>
+						{isEnvVisible ? (
+							<EyeOffIcon className="h-4 w-4 text-muted-foreground" />
+						) : (
+							<EyeIcon className="h-4 w-4 text-muted-foreground" />
+						)}
+					</Toggle>
 				</CardHeader>
 				<CardContent>
 					<Form {...form}>
@@ -95,6 +112,7 @@ export const ShowRedisEnvironment = ({ redisId }: Props) => {
 										<FormControl>
 											<CodeEditor
 												language="properties"
+												disabled={isEnvVisible}
 												placeholder={`NODE_ENV=production
 PORT=3000
 `}

components/ui/dropzone.tsx

@@ -0,0 +1,79 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { FolderIcon } from "lucide-react";
+import React, { type ChangeEvent, useRef } from "react";
+
+interface DropzoneProps
+	extends Omit<
+		React.InputHTMLAttributes<HTMLInputElement>,
+		"value" | "onChange"
+	> {
+	classNameWrapper?: string;
+	className?: string;
+	dropMessage: string;
+	onChange: (acceptedFiles: FileList | null) => void;
+}
+
+export const Dropzone = React.forwardRef<HTMLDivElement, DropzoneProps>(
+	({ className, classNameWrapper, dropMessage, onChange, ...props }, ref) => {
+		const inputRef = useRef<HTMLInputElement | null>(null);
+		// Function to handle drag over event
+		const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+			e.preventDefault();
+			e.stopPropagation();
+			onChange(null);
+		};
+
+		// Function to handle drop event
+		const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+			e.preventDefault();
+			e.stopPropagation();
+			const { files } = e.dataTransfer;
+			if (inputRef.current) {
+				inputRef.current.files = files;
+				onChange(files);
+			}
+		};
+
+		// Function to simulate a click on the file input element
+		const handleButtonClick = () => {
+			if (inputRef.current) {
+				inputRef.current.click();
+			}
+		};
+		return (
+			<Card
+				ref={ref}
+				className={cn(
+					"border-2 border-dashed bg-muted/20 hover:cursor-pointer hover:border-muted-foreground/50 ",
+					classNameWrapper,
+				)}
+			>
+				<CardContent
+					className="flex flex-col items-center justify-center space-y-2 px-2 py-4 text-xs h-96"
+					onDragOver={handleDragOver}
+					onDrop={handleDrop}
+					onClick={handleButtonClick}
+				>
+					<div className="flex items-center justify-center text-muted-foreground">
+						<span className="font-medium text-xl flex items-center gap-2">
+							<FolderIcon className="size-6 text-muted-foreground" />
+							{dropMessage}
+						</span>
+						<Input
+							{...props}
+							value={undefined}
+							ref={inputRef}
+							type="file"
+							className={cn("hidden", className)}
+							onChange={(e: ChangeEvent<HTMLInputElement>) =>
+								onChange(e.target.files)
+							}
+						/>
+					</div>
+				</CardContent>
+			</Card>
+		);
+	},
+);

drizzle/0022_warm_colonel_america.sql

@@ -0,0 +1 @@
+ALTER TYPE "sourceType" ADD VALUE 'drop';

drizzle/0023_icy_maverick.sql

@@ -0,0 +1 @@
+ALTER TABLE "application" ADD COLUMN "dropBuildPath" text;

drizzle/meta/_journal.json

@@ -155,6 +155,20 @@
       "when": 1721370423752,
       "tag": "0021_premium_sebastian_shaw",
       "breakpoints": true
+    },
+    {
+      "idx": 22,
+      "version": "6",
+      "when": 1721531163852,
+      "tag": "0022_warm_colonel_america",
+      "breakpoints": true
+    },
+    {
+      "idx": 23,
+      "version": "6",
+      "when": 1721542782659,
+      "tag": "0023_icy_maverick",
+      "breakpoints": true
     }
   ]
 }

package.json

@@ -64,6 +64,7 @@
 		"@radix-ui/react-tabs": "^1.0.4",
 		"@radix-ui/react-toggle": "^1.0.3",
 		"@radix-ui/react-tooltip": "^1.0.7",
+		"@react-email/components": "^0.0.21",
 		"@tanstack/react-query": "^4.36.1",
 		"@tanstack/react-table": "^8.16.0",
 		"@trpc/client": "^10.43.6",
@@ -74,6 +75,7 @@
 		"@uiw/react-codemirror": "^4.22.1",
 		"@xterm/addon-attach": "0.10.0",
 		"@xterm/xterm": "^5.4.0",
+		"adm-zip": "^0.5.14",
 		"bcrypt": "5.1.1",
 		"bl": "6.0.11",
 		"boxen": "^7.1.1",
@@ -99,7 +101,6 @@
 		"lucide-react": "^0.312.0",
 		"nanoid": "3",
 		"next": "^14.1.3",
-		"@react-email/components": "^0.0.21",
 		"next-themes": "^0.2.1",
 		"node-os-utils": "1.3.7",
 		"node-pty": "1.0.0",
@@ -121,16 +122,18 @@
 		"tailwind-merge": "^2.2.0",
 		"tailwindcss-animate": "^1.0.7",
 		"tar-fs": "3.0.5",
+		"undici": "^6.19.2",
 		"use-resize-observer": "9.1.0",
 		"ws": "8.16.0",
 		"xterm-addon-fit": "^0.8.0",
-		"zod": "^3.23.4"
+		"zod": "^3.23.4",
+		"zod-form-data": "^2.0.2"
 	},
 	"devDependencies": {
-		"@types/nodemailer": "^6.4.15",
 		"@biomejs/biome": "1.8.3",
 		"@commitlint/cli": "^19.3.0",
 		"@commitlint/config-conventional": "^19.2.2",
+		"@types/adm-zip": "^0.5.5",
 		"@types/bcrypt": "5.0.2",
 		"@types/dockerode": "3.3.23",
 		"@types/js-yaml": "4.0.9",
@@ -138,6 +141,7 @@
 		"@types/node": "^18.17.0",
 		"@types/node-os-utils": "1.3.4",
 		"@types/node-schedule": "2.1.6",
+		"@types/nodemailer": "^6.4.15",
 		"@types/qrcode": "^1.5.5",
 		"@types/react": "^18.2.37",
 		"@types/react-dom": "^18.2.15",

pages/api/[...trpc].ts

@@ -18,7 +18,6 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
 		res.status(401).json({ message: "Unauthorized" });
 		return;
 	}
-
 	// @ts-ignore
 	return createOpenApiNextHandler({
 		router: appRouter,

pages/api/deploy/[refreshToken].ts

@@ -27,7 +27,9 @@ export default async function handler(
 			return;
 		}
 		if (!application?.autoDeploy) {
-			res.status(400).json({ message: "Application Not Deployable" });
+			res.status(400).json({
+				message: "Automatic deployments are disabled for this application",
+			});
 			return;
 		}
 

pages/api/deploy/compose/[refreshToken].ts

@@ -32,7 +32,9 @@ export default async function handler(
 			return;
 		}
 		if (!composeResult?.autoDeploy) {
-			res.status(400).json({ message: "Compose Not Deployable" });
+			res.status(400).json({
+				message: "Automatic deployments are disabled for this compose",
+			});
 			return;
 		}
 

pages/api/trpc/[trpc].ts

@@ -1,7 +1,8 @@
-import { createNextApiHandler } from "@trpc/server/adapters/next";
-
 import { appRouter } from "@/server/api/root";
 import { createTRPCContext } from "@/server/api/trpc";
+import { createNextApiHandler } from "@trpc/server/adapters/next";
+import { nodeHTTPFormDataContentTypeHandler } from "@trpc/server/adapters/node-http/content-type/form-data";
+import { nodeHTTPJSONContentTypeHandler } from "@trpc/server/adapters/node-http/content-type/json";
 
 // export API handler
 export default createNextApiHandler({
@@ -15,4 +16,15 @@ export default createNextApiHandler({
 					);
 				}
 			: undefined,
+	experimental_contentTypeHandlers: [
+		nodeHTTPFormDataContentTypeHandler(),
+		nodeHTTPJSONContentTypeHandler(),
+	],
 });
+
+export const config = {
+	api: {
+		bodyParser: false,
+		sizeLimit: "1gb",
+	},
+};

pnpm-lock.yaml

@@ -128,6 +128,9 @@ importers:
       '@xterm/xterm':
         specifier: ^5.4.0
         version: 5.4.0
+      adm-zip:
+        specifier: ^0.5.14
+        version: 0.5.14
       bcrypt:
         specifier: 5.1.1
         version: 5.1.1
@@ -266,6 +269,9 @@ importers:
       tar-fs:
         specifier: 3.0.5
         version: 3.0.5
+      undici:
+        specifier: ^6.19.2
+        version: 6.19.2
       use-resize-observer:
         specifier: 9.1.0
         version: 9.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -278,6 +284,9 @@ importers:
       zod:
         specifier: ^3.23.4
         version: 3.23.4
+      zod-form-data:
+        specifier: ^2.0.2
+        version: 2.0.2(zod@3.23.4)
     devDependencies:
       '@biomejs/biome':
         specifier: 1.8.3
@@ -288,6 +297,9 @@ importers:
       '@commitlint/config-conventional':
         specifier: ^19.2.2
         version: 19.2.2
+      '@types/adm-zip':
+        specifier: ^0.5.5
+        version: 0.5.5
       '@types/bcrypt':
         specifier: 5.0.2
         version: 5.0.2
@@ -2809,6 +2821,9 @@ packages:
   '@tybys/wasm-util@0.8.1':
     resolution: {integrity: sha512-GSsTwyBl4pIzsxAY5wroZdyQKyhXk0d8PCRZtrSZ2WEB1cBdrp2EgGBwHOGCZtIIPun/DL3+AykCv+J6fyRH4Q==}
 
+  '@types/adm-zip@0.5.5':
+    resolution: {integrity: sha512-YCGstVMjc4LTY5uK9/obvxBya93axZOVOyf2GSUulADzmLhYE45u2nAssCs/fWBs1Ifq5Vat75JTPwd5XZoPJw==}
+
   '@types/aws-lambda@8.10.136':
     resolution: {integrity: sha512-cmmgqxdVGhxYK9lZMYYXYRJk6twBo53ivtXjIUEFZxfxe4TkZTZBK3RRWrY2HjJcUIix0mdifn15yjOAat5lTA==}
 
@@ -3107,6 +3122,10 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  adm-zip@0.5.14:
+    resolution: {integrity: sha512-DnyqqifT4Jrcvb8USYjp6FHtBpEIz1mnXu6pTRHZ0RL69LbQYiO+0lDFg5+OKA7U29oWSs3a/i8fhn8ZcceIWg==}
+    engines: {node: '>=12.0'}
+
   agent-base@6.0.2:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
@@ -6058,6 +6077,10 @@ packages:
   undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
+  undici@6.19.2:
+    resolution: {integrity: sha512-JfjKqIauur3Q6biAtHJ564e3bWa8VvT+7cSiOJHFbX4Erv6CLGDpg8z+Fmg/1OI/47RA+GI2QZaF48SSaLvyBA==}
+    engines: {node: '>=18.17'}
+
   unenv@1.9.0:
     resolution: {integrity: sha512-QKnFNznRxmbOF1hDgzpqrlIf6NC5sbZ2OJ+5Wl3OX8uM+LUJXbj4TXvLJCtwbPTmbMHCLIz6JLKNinNsMShK9g==}
 
@@ -6356,6 +6379,11 @@ packages:
   zenscroll@4.0.2:
     resolution: {integrity: sha512-jEA1znR7b4C/NnaycInCU6h/d15ZzCd1jmsruqOKnZP6WXQSMH3W2GL+OXbkruslU4h+Tzuos0HdswzRUk/Vgg==}
 
+  zod-form-data@2.0.2:
+    resolution: {integrity: sha512-sKTi+k0fvkxdakD0V5rq+9WVJA3cuTQUfEmNqvHrTzPLvjfLmkkBLfR0ed3qOi9MScJXTHIDH/jUNnEJ3CBX4g==}
+    peerDependencies:
+      zod: '>= 3.11.0'
+
   zod-to-json-schema@3.23.1:
     resolution: {integrity: sha512-oT9INvydob1XV0v1d2IadrR74rLtDInLvDFfAa1CG0Pmg/vxATk7I2gSelfj271mbzeM4Da0uuDQE/Nkj3DWNw==}
     peerDependencies:
@@ -9396,6 +9424,10 @@ snapshots:
       tslib: 2.6.2
     optional: true
 
+  '@types/adm-zip@0.5.5':
+    dependencies:
+      '@types/node': 18.19.24
+
   '@types/aws-lambda@8.10.136': {}
 
   '@types/bcrypt@5.0.2':
@@ -9764,6 +9796,8 @@ snapshots:
 
   acorn@8.11.3: {}
 
+  adm-zip@0.5.14: {}
+
   agent-base@6.0.2:
     dependencies:
       debug: 4.3.4
@@ -12737,6 +12771,8 @@ snapshots:
 
   undici-types@5.26.5: {}
 
+  undici@6.19.2: {}
+
   unenv@1.9.0:
     dependencies:
       consola: 3.2.3
@@ -13057,6 +13093,10 @@ snapshots:
 
   zenscroll@4.0.2: {}
 
+  zod-form-data@2.0.2(zod@3.23.4):
+    dependencies:
+      zod: 3.23.4
+
   zod-to-json-schema@3.23.1(zod@3.23.4):
     dependencies:
       zod: 3.23.4

server/api/routers/application.ts

@@ -1,4 +1,8 @@
-import { createTRPCRouter, protectedProcedure } from "@/server/api/trpc";
+import {
+	createTRPCRouter,
+	protectedProcedure,
+	uploadProcedure,
+} from "@/server/api/trpc";
 import { db } from "@/server/db";
 import {
 	apiCreateApplication,
@@ -52,6 +56,9 @@ import {
 import { removeDeployments } from "../services/deployment";
 import { addNewService, checkServiceAccess } from "../services/user";
 
+import { unzipDrop } from "@/server/utils/builders/drop";
+import { uploadFileSchema } from "@/utils/schema";
+
 export const applicationRouter = createTRPCRouter({
 	create: protectedProcedure
 		.input(apiCreateApplication)
@@ -324,6 +331,45 @@ export const applicationRouter = createTRPCRouter({
 			return traefikConfig;
 		}),
 
+	dropDeployment: protectedProcedure
+		.meta({
+			openapi: {
+				path: "/drop-deployment",
+				method: "POST",
+				override: true,
+				enabled: false,
+			},
+		})
+		.use(uploadProcedure)
+		.input(uploadFileSchema)
+		.mutation(async ({ input }) => {
+			const zipFile = input.zip;
+
+			updateApplication(input.applicationId as string, {
+				sourceType: "drop",
+				dropBuildPath: input.dropBuildPath,
+			});
+
+			const app = await findApplicationById(input.applicationId as string);
+			await unzipDrop(zipFile, app.appName);
+
+			const jobData: DeploymentJob = {
+				applicationId: app.applicationId,
+				titleLog: "Manual deployment",
+				descriptionLog: "",
+				type: "deploy",
+				applicationType: "application",
+			};
+			await myQueue.add(
+				"deployments",
+				{ ...jobData },
+				{
+					removeOnComplete: true,
+					removeOnFail: true,
+				},
+			);
+			return true;
+		}),
 	updateTraefikConfig: protectedProcedure
 		.input(z.object({ applicationId: z.string(), traefikConfig: z.string() }))
 		.mutation(async ({ input }) => {

server/api/services/application.ts

@@ -157,6 +157,8 @@ export const deployApplication = async ({
 		} else if (application.sourceType === "git") {
 			await cloneGitRepository(application, deployment.logPath);
 			await buildApplication(application, deployment.logPath);
+		} else if (application.sourceType === "drop") {
+			await buildApplication(application, deployment.logPath);
 		}
 		await updateDeploymentStatus(deployment.deploymentId, "done");
 		await updateApplicationStatus(applicationId, "done");
@@ -216,6 +218,8 @@ export const rebuildApplication = async ({
 			await buildDocker(application, deployment.logPath);
 		} else if (application.sourceType === "git") {
 			await buildApplication(application, deployment.logPath);
+		} else if (application.sourceType === "drop") {
+			await buildApplication(application, deployment.logPath);
 		}
 		await updateDeploymentStatus(deployment.deploymentId, "done");
 		await updateApplicationStatus(applicationId, "done");

server/api/services/deployment.ts

@@ -15,10 +15,6 @@ import { type Application, findApplicationById } from "./application";
 import { type Compose, findComposeById } from "./compose";
 
 export type Deployment = typeof deployments.$inferSelect;
-type CreateDeploymentInput = Omit<
-	Deployment,
-	"deploymentId" | "createdAt" | "status" | "logPath"
->;
 
 export const findDeploymentById = async (applicationId: string) => {
 	const application = await db.query.deployments.findFirst({

server/api/trpc.ts

@@ -12,6 +12,11 @@ import { db } from "@/server/db";
 import type { OpenApiMeta } from "@dokploy/trpc-openapi";
 import { TRPCError, initTRPC } from "@trpc/server";
 import type { CreateNextContextOptions } from "@trpc/server/adapters/next";
+import {
+	experimental_createMemoryUploadHandler,
+	experimental_isMultipartFormDataRequest,
+	experimental_parseMultipartFormData,
+} from "@trpc/server/adapters/node-http/content-type/form-data";
 import type { Session, User } from "lucia";
 import superjson from "superjson";
 import { ZodError } from "zod";
@@ -158,6 +163,24 @@ export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
 	});
 });
 
+export const uploadProcedure = async (opts: any) => {
+	if (!experimental_isMultipartFormDataRequest(opts.ctx.req)) {
+		return opts.next();
+	}
+
+	const formData = await experimental_parseMultipartFormData(
+		opts.ctx.req,
+		experimental_createMemoryUploadHandler({
+			// 2GB
+			maxPartSize: 1024 * 1024 * 1024 * 2,
+		}),
+	);
+
+	return opts.next({
+		rawInput: formData,
+	});
+};
+
 export const cliProcedure = t.procedure.use(({ ctx, next }) => {
 	if (!ctx.session || !ctx.user || ctx.user.rol !== "admin") {
 		throw new TRPCError({ code: "UNAUTHORIZED" });

server/db/schema/application.ts

@@ -22,7 +22,12 @@ import { security } from "./security";
 import { applicationStatus } from "./shared";
 import { generateAppName } from "./utils";
 
-export const sourceType = pgEnum("sourceType", ["docker", "git", "github"]);
+export const sourceType = pgEnum("sourceType", [
+	"docker",
+	"git",
+	"github",
+	"drop",
+]);
 
 export const buildType = pgEnum("buildType", [
 	"dockerfile",
@@ -117,7 +122,7 @@ export const applications = pgTable("application", {
 	owner: text("owner"),
 	branch: text("branch"),
 	buildPath: text("buildPath").default("/"),
-	autoDeploy: boolean("autoDeploy"),
+	autoDeploy: boolean("autoDeploy").$defaultFn(() => true),
 	// Docker
 	username: text("username"),
 	password: text("password"),
@@ -128,6 +133,8 @@ export const applications = pgTable("application", {
 	customGitBuildPath: text("customGitBuildPath"),
 	customGitSSHKey: text("customGitSSHKey"),
 	dockerfile: text("dockerfile"),
+	// Drop
+	dropBuildPath: text("dropBuildPath"),
 	// Docker swarm json
 	healthCheckSwarm: json("healthCheckSwarm").$type<HealthCheckSwarm>(),
 	restartPolicySwarm: json("restartPolicySwarm").$type<RestartPolicySwarm>(),

server/db/schema/compose.ts

@@ -37,7 +37,7 @@ export const compose = pgTable("compose", {
 	repository: text("repository"),
 	owner: text("owner"),
 	branch: text("branch"),
-	autoDeploy: boolean("autoDeploy"),
+	autoDeploy: boolean("autoDeploy").$defaultFn(() => true),
 	// Git
 	customGitUrl: text("customGitUrl"),
 	customGitBranch: text("customGitBranch"),

server/utils/builders/drop.ts

@@ -0,0 +1,57 @@
+import fs from "node:fs/promises";
+import path, { join } from "node:path";
+import { APPLICATIONS_PATH } from "@/server/constants";
+import AdmZip from "adm-zip";
+import { recreateDirectory } from "../filesystem/directory";
+
+export const unzipDrop = async (zipFile: File, appName: string) => {
+	try {
+		const basePath = APPLICATIONS_PATH;
+		const outputPath = join(basePath, appName);
+		await recreateDirectory(outputPath);
+		const arrayBuffer = await zipFile.arrayBuffer();
+		const buffer = Buffer.from(arrayBuffer);
+
+		const zip = new AdmZip(buffer);
+		const zipEntries = zip.getEntries();
+
+		const rootEntries = zipEntries.filter(
+			(entry) =>
+				entry.entryName.split("/").length === 1 ||
+				(entry.entryName.split("/").length === 2 &&
+					entry.entryName.endsWith("/")),
+		);
+
+		const hasSingleRootFolder = !!(
+			rootEntries.length === 1 && rootEntries[0]?.isDirectory
+		);
+		const rootFolderName = hasSingleRootFolder
+			? rootEntries[0]?.entryName.split("/")[0]
+			: "";
+
+		for (const entry of zipEntries) {
+			let filePath = entry.entryName;
+
+			if (
+				hasSingleRootFolder &&
+				rootFolderName &&
+				filePath.startsWith(`${rootFolderName}/`)
+			) {
+				filePath = filePath.slice(rootFolderName?.length + 1);
+			}
+
+			if (!filePath) continue;
+
+			const fullPath = path.join(outputPath, filePath);
+			if (entry.isDirectory) {
+				await fs.mkdir(fullPath, { recursive: true });
+			} else {
+				await fs.mkdir(path.dirname(fullPath), { recursive: true });
+				await fs.writeFile(fullPath, entry.getData());
+			}
+		}
+	} catch (error) {
+		console.error("Error processing ZIP file:", error);
+		throw error;
+	}
+};

server/utils/filesystem/directory.ts

@@ -59,8 +59,15 @@ export const removeMonitoringDirectory = async (appName: string) => {
 export const getBuildAppDirectory = (application: Application) => {
 	const { appName, buildType, sourceType, customGitBuildPath, dockerfile } =
 		application;
-	const buildPath =
-		sourceType === "github" ? application?.buildPath : customGitBuildPath;
+	let buildPath = "";
+
+	if (sourceType === "github") {
+		buildPath = application?.buildPath || "";
+	} else if (sourceType === "drop") {
+		buildPath = application?.dropBuildPath || "";
+	} else if (sourceType === "git") {
+		buildPath = customGitBuildPath || "";
+	}
 	if (buildType === "dockerfile") {
 		return path.join(
 			APPLICATIONS_PATH,

utils/api.ts

@@ -5,7 +5,11 @@
  * We also create a few inference helpers for input and output types.
  */
 import type { AppRouter } from "@/server/api/root";
-import { httpBatchLink } from "@trpc/client";
+import {
+	experimental_formDataLink,
+	httpBatchLink,
+	splitLink,
+} from "@trpc/client";
 import { createTRPCNext } from "@trpc/next";
 import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
 import superjson from "superjson";
@@ -18,6 +22,7 @@ const getBaseUrl = () => {
 /** A set of type-safe react-query hooks for your tRPC API. */
 export const api = createTRPCNext<AppRouter>({
 	config() {
+		const url = `${getBaseUrl()}/api/trpc`;
 		return {
 			/**
 			 * Transformer used for data de-serialization from the server.
@@ -32,8 +37,14 @@ export const api = createTRPCNext<AppRouter>({
 			 * @see https://trpc.io/docs/links
 			 */
 			links: [
-				httpBatchLink({
-					url: `${getBaseUrl()}/api/trpc`,
+				splitLink({
+					condition: (op) => op.input instanceof FormData,
+					true: experimental_formDataLink({
+						url,
+					}),
+					false: httpBatchLink({
+						url,
+					}),
 				}),
 			],
 		};

utils/schema.ts

@@ -0,0 +1,16 @@
+import { z } from "zod";
+import { zfd } from "zod-form-data";
+
+if (typeof window === "undefined") {
+	const undici = require("undici");
+	globalThis.File = undici.File as any;
+	globalThis.FileList = undici.FileList as any;
+}
+
+export const uploadFileSchema = zfd.formData({
+	applicationId: z.string().optional(),
+	zip: zfd.file(),
+	dropBuildPath: z.string().optional(),
+});
+
+export type UploadFile = z.infer<typeof uploadFileSchema>;