Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support more input parsers #1061

Merged
merged 22 commits into from
Nov 24, 2024
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 17 additions & 4 deletions docs/src/app/(docs)/file-routes/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -171,10 +171,23 @@ f(["image"])

## `input` {{ since: '5.0' }}

You can pass a [Zod](https://github.com/colinhacks/zod) schema to validate user
input from the client. This data comes from the client when the upload starts.
If validation here fails, an error will be thrown and none of your `middleware`
n'or `onUploadComplete` functions will be executed.
You can pass a schema validator to validate user input from the client. This
data comes from the client when the upload starts. If validation here fails, an
error will be thrown and none of your `middleware` n'or `onUploadComplete`
functions will be executed.

The schema must only contain JSON serializable types as UploadThing does no
special data transforming to handle non-JSON types.

Historically only [Zod](https://github.com/colinhacks/zod) was supported, but
juliusmarminge marked this conversation as resolved.
Show resolved Hide resolved
since `7.4` the following validators are supported:

- [Zod](https://github.com/colinhacks/zod)
- [Effect/Schema](https://effect.website/docs/datatypes/schema)
- Any validator that implements the
[Standard Schema specification](https://github.com/standard-schema/standard-schema),
for example [Valibot >=1](https://github.com/fabian-hiller/valibot) and
[ArkType](https://github.com/arktypeio/arktype)
juliusmarminge marked this conversation as resolved.
Show resolved Hide resolved
juliusmarminge marked this conversation as resolved.
Show resolved Hide resolved

The input is validated on **your** server and only leaves your server if you
pass it along from the `.middleware` to the `.onUploadComplete`. If you only use
Expand Down
2 changes: 2 additions & 0 deletions packages/uploadthing/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@
},
"dependencies": {
"@effect/platform": "0.69.24",
"@standard-schema/spec": "1.0.0-beta.3",
"@uploadthing/mime-types": "workspace:*",
"@uploadthing/shared": "workspace:*",
"effect": "3.10.15"
Expand All @@ -176,6 +177,7 @@
"type-fest": "^4.10.3",
"typescript": "^5.5.2",
"undici": "^6.6.2",
"valibot": "1.0.0-beta.7",
"vue": "^3.4.21",
"wait-on": "^7.2.0",
"zod": "^3.23.8"
juliusmarminge marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
2 changes: 1 addition & 1 deletion packages/uploadthing/src/internal/handler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -460,7 +460,7 @@ const handleUploadAction = (opts: {
// validate the input
yield* Effect.logDebug("Parsing user input");
const parsedInput = yield* Effect.tryPromise({
try: async () => getParseFn(uploadable.inputParser)(json.input),
try: () => getParseFn(uploadable.inputParser)(json.input),
catch: (error) =>
new UploadThingError({
code: "BAD_REQUEST",
Expand Down
58 changes: 48 additions & 10 deletions packages/uploadthing/src/internal/parser.ts
Original file line number Diff line number Diff line change
@@ -1,25 +1,63 @@
import type { Json, MaybePromise } from "@uploadthing/shared";
import type { v1 } from "@standard-schema/spec";
import * as Schema from "effect/Schema";

import type { Json } from "@uploadthing/shared";

/**
* TODO: Do we wanna support effect/schema parsers now??
*/

// Don't want to use Zod cause it's an optional dependency
export type ParseFn<TType> = (input: unknown) => MaybePromise<TType>;
export type ParseFn<TType> = (input: unknown) => Promise<TType>;

juliusmarminge marked this conversation as resolved.
Show resolved Hide resolved
export type ParserZodEsque<TInput, TParsedInput extends Json> = {
_input: TInput;
_output: TParsedInput; // if using .transform etc
parse: ParseFn<TParsedInput>;
parseAsync: ParseFn<TParsedInput>;
};

export type ParserStandardSchemaEsque<TInput, TParsedInput> = v1.StandardSchema<
TInput,
TParsedInput
>;

// In case we add support for more parsers later
export type JsonParser = ParserZodEsque<Json, Json>;
export type JsonParser<In extends Json = Json, Out extends Json = Json> =
| ParserZodEsque<In, Out>
| ParserStandardSchemaEsque<In, Out>
| Schema.Schema<In, Out>;

export function getParseFn<
TOut extends Json,
juliusmarminge marked this conversation as resolved.
Show resolved Hide resolved
TParser extends JsonParser<any, TOut>,
>(parser: TParser): ParseFn<TOut> {
if ("~standard" in parser) {
/**
* Standard Schema
*/
return async (value) => {
const result = await parser["~standard"].validate(value);
if (result.issues) {
throw new Error(
"Input validation failed. See validation issues in the error cause.",
{ cause: result.issues },
);
}
return result.value;
};
}

if ("parseAsync" in parser && typeof parser.parseAsync === "function") {
/**
* Zod
juliusmarminge marked this conversation as resolved.
Show resolved Hide resolved
*/
return parser.parseAsync;
}

export function getParseFn<TParser extends JsonParser>(
parser: TParser,
): ParseFn<TParser["_output"]> {
if (typeof parser.parse === "function") {
return parser.parse;
if (Schema.isSchema(parser)) {
/**
* Effect Schema
*/
return Schema.decodeUnknownPromise(parser as Schema.Schema<any, TOut>);
}

throw new Error("Invalid parser");
Expand Down
6 changes: 3 additions & 3 deletions packages/uploadthing/src/internal/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -97,13 +97,13 @@ type UploadErrorFn<TArgs extends AdapterFnArgs<any, any, any>> = (
) => MaybePromise<void>;

export interface UploadBuilder<TParams extends AnyParams> {
input: <TParser extends JsonParser>(
input: <TIn extends Json, TOut extends Json>(
parser: TParams["_input"]["in"] extends UnsetMarker
? TParser
? JsonParser<TIn, TOut>
: ErrorMessage<"input is already set">,
) => UploadBuilder<{
_routeOptions: TParams["_routeOptions"];
_input: { in: TParser["_input"]; out: TParser["_output"] };
_input: { in: TIn; out: TOut };
_metadata: TParams["_metadata"];
_adapterFnArgs: TParams["_adapterFnArgs"];
_errorShape: TParams["_errorShape"];
Expand Down
5 changes: 3 additions & 2 deletions packages/uploadthing/src/internal/upload-builder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import type {
} from "@uploadthing/shared";

import { defaultErrorFormatter } from "./error-formatter";
import type { JsonParser } from "./parser";
import type {
AdapterFnArgs,
AnyBuiltUploaderTypes,
Expand Down Expand Up @@ -42,7 +43,7 @@ function internalCreateBuilder<
},

inputParser: {
parse: () => undefined,
parseAsync: () => Promise.resolve(undefined),
_input: undefined,
_output: undefined,
},
Expand All @@ -63,7 +64,7 @@ function internalCreateBuilder<
input(userParser) {
return internalCreateBuilder({
..._def,
inputParser: userParser,
inputParser: userParser as JsonParser,
}) as UploadBuilder<any>;
},
middleware(userMiddleware) {
Expand Down
134 changes: 132 additions & 2 deletions packages/uploadthing/test/upload-builder.test.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
/* eslint-disable @typescript-eslint/no-empty-function */

import * as Schema from "effect/Schema";
import * as v from "valibot";
import { expect, expectTypeOf, it } from "vitest";
import { z } from "zod";

import { getParseFn } from "../src/internal/parser";
import { UTFiles } from "../src/internal/types";
import { createBuilder } from "../src/internal/upload-builder";

Expand Down Expand Up @@ -56,6 +59,20 @@ it("typeerrors for invalid input", () => {
return {};
});

f(["image"])
// @ts-expect-error - set is not allowed
.input(v.object({ foo: v.set() }))
.middleware(() => {
return {};
});

f(["image"])
// @ts-expect-error - set is not allowed
.input(Schema.Struct({ foo: Schema.Set(Schema.String) }))
.middleware(() => {
return {};
});

f(["image"])
.input(z.object({ foo: z.string() }))
.middleware((opts) => {
Expand Down Expand Up @@ -115,6 +132,20 @@ it("with input", () => {
expectTypeOf<{ foo: string }>(opts.input);
return {};
});

f(["image"])
.input(v.object({ foo: v.string() }))
.middleware((opts) => {
expectTypeOf<{ foo: string }>(opts.input);
return {};
});

f(["image"])
.input(Schema.Struct({ foo: Schema.String }))
.middleware((opts) => {
expectTypeOf<{ readonly foo: string }>(opts.input);
return {};
});
});

it("with optional input", () => {
Expand All @@ -125,6 +156,21 @@ it("with optional input", () => {
expectTypeOf<{ foo: string } | undefined>(opts.input);
return {};
});

f(["image"])
.input(v.optional(v.object({ foo: v.string() })))
.middleware((opts) => {
expectTypeOf<{ foo: string } | undefined>(opts.input);
return {};
});

// FIXME
// f(["image"])
// .input(Schema.Struct({ foo: Schema.String }).pipe(Schema.optional))
// .middleware((opts) => {
// expectTypeOf<{ readonly foo: string } | undefined>(opts.input);
// return {};
// });
juliusmarminge marked this conversation as resolved.
Show resolved Hide resolved
});

it("can append a customId", () => {
Expand All @@ -140,7 +186,7 @@ it("can append a customId", () => {
});
});

it("smoke", async () => {
it("smoke (zod)", async () => {
const f = createBuilder<{ req: Request; res: undefined; event: undefined }>();

const uploadable = f(["image", "video"])
Expand All @@ -167,11 +213,95 @@ it("smoke", async () => {

expect(uploadable.routerConfig).toEqual(["image", "video"]);

const parsedInput = await getParseFn(uploadable.inputParser)({ foo: "bar" });

const metadata = await uploadable.middleware({
req: new Request("http://localhost", {
headers: { header1: "woohoo" },
}),
input: parsedInput,
res: undefined,
event: undefined,
files: [{ name: "test.txt", size: 123456, type: "text/plain" }],
});
expect(metadata).toEqual({ header1: "woohoo", userId: "123" });
});

it("smoke (valibot)", async () => {
const f = createBuilder<{ req: Request; res: undefined; event: undefined }>();

const uploadable = f(["image", "video"])
.input(v.object({ foo: v.string() }))
.middleware((opts) => {
expect(opts.input).toEqual({ foo: "bar" });
expectTypeOf<{ foo: string }>(opts.input);
expectTypeOf<readonly { name: string; size: number }[]>(opts.files);

const header1 = opts.req.headers.get("header1");

return { header1, userId: "123" as const };
})
.onUploadComplete(({ file, metadata }) => {
// expect(file).toEqual({ name: "file", url: "http://localhost" })
expectTypeOf<{ name: string; url: string }>(file);

expect(metadata).toEqual({ header1: "woohoo", userId: "123" });
expectTypeOf<{
header1: string | null;
userId: "123";
}>(metadata);
});

expect(uploadable.routerConfig).toEqual(["image", "video"]);

const parsedInput = await getParseFn(uploadable.inputParser)({ foo: "bar" });

const metadata = await uploadable.middleware({
req: new Request("http://localhost", {
headers: { header1: "woohoo" },
}),
input: parsedInput,
res: undefined,
event: undefined,
files: [{ name: "test.txt", size: 123456, type: "text/plain" }],
});
expect(metadata).toEqual({ header1: "woohoo", userId: "123" });
});

it("smoke (effect/Schema)", async () => {
const f = createBuilder<{ req: Request; res: undefined; event: undefined }>();

const uploadable = f(["image", "video"])
.input(Schema.Struct({ foo: Schema.String }))
.middleware((opts) => {
expect(opts.input).toEqual({ foo: "bar" });
expectTypeOf<{ readonly foo: string }>(opts.input);
expectTypeOf<readonly { name: string; size: number }[]>(opts.files);

const header1 = opts.req.headers.get("header1");

return { header1, userId: "123" as const };
})
.onUploadComplete(({ file, metadata }) => {
// expect(file).toEqual({ name: "file", url: "http://localhost" })
expectTypeOf<{ name: string; url: string }>(file);

expect(metadata).toEqual({ header1: "woohoo", userId: "123" });
expectTypeOf<{
header1: string | null;
userId: "123";
}>(metadata);
});

expect(uploadable.routerConfig).toEqual(["image", "video"]);

const parsedInput = await getParseFn(uploadable.inputParser)({ foo: "bar" });

const metadata = await uploadable.middleware({
req: new Request("http://localhost", {
headers: { header1: "woohoo" },
}),
input: { foo: "bar" },
input: parsedInput,
res: undefined,
event: undefined,
files: [{ name: "test.txt", size: 123456, type: "text/plain" }],
Expand Down
Loading
Loading