feat(drag-n-drop): add support for drag n drop projects via zip #131

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>;