From 8b41a25c63315d82c3423754fcd15b37755cd9b6 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Mon, 18 Nov 2024 14:40:07 +0100
Subject: [PATCH] chore: add server uploads to pg (#1055)

---
 playground-v6/components/fieldset.tsx | 35 +++++++++++
 playground-v6/components/uploader.tsx | 88 +++++++++++++++++++++------
 playground-v6/lib/actions.ts          | 37 +++++++++++
 playground/components/fieldset.tsx    | 35 +++++++++++
 playground/components/uploader.tsx    | 88 +++++++++++++++++++++------
 playground/lib/actions.ts             | 37 +++++++++++
 6 files changed, 284 insertions(+), 36 deletions(-)
 create mode 100644 playground-v6/components/fieldset.tsx
 create mode 100644 playground/components/fieldset.tsx

diff --git a/playground-v6/components/fieldset.tsx b/playground-v6/components/fieldset.tsx
new file mode 100644
index 0000000000..c7f04dbac7
--- /dev/null
+++ b/playground-v6/components/fieldset.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import cx from "clsx";
+
+export function Input({
+  className,
+  type,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      className={cx(
+        className,
+        "border-input focus-visible:border-ring focus-visible:ring-ring/30 flex w-full rounded-lg border px-3 py-2 text-sm shadow-sm shadow-black/5 transition-shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        type === "search" &&
+          "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none",
+        type === "file" &&
+          "file:border-input p-0 pr-3 italic file:me-3 file:h-full file:border-0 file:border-r file:border-solid file:bg-transparent file:px-3 file:text-sm file:font-medium file:not-italic",
+      )}
+      {...props}
+    />
+  );
+}
+
+export function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      className={cx(
+        "text-sm font-medium leading-4 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/playground-v6/components/uploader.tsx b/playground-v6/components/uploader.tsx
index 256b928305..7c37ef8aff 100644
--- a/playground-v6/components/uploader.tsx
+++ b/playground-v6/components/uploader.tsx
@@ -1,35 +1,87 @@
 "use client";
 
+import { useActionState, useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
 
 import { generateReactHelpers, generateUploadButton } from "@uploadthing/react";
 
 import { UploadRouter } from "../app/api/uploadthing/route";
+import { uploadFiles } from "../lib/actions";
+import { Input, Label } from "./fieldset";
 
 export const UTButton = generateUploadButton<UploadRouter>();
 export const { useUploadThing } = generateReactHelpers<UploadRouter>();
 
+function ServerUploader(props: { type: "file" | "url" }) {
+  const formRef = useRef<HTMLFormElement>(null);
+  const [state, dispatch, isUploading] = useActionState(uploadFiles, {
+    success: false,
+    error: "",
+  });
+
+  useEffect(() => {
+    if (state.success === false && state.error) {
+      window.alert(state.error);
+    }
+  }, [state.success]);
+
+  return (
+    <form ref={formRef} action={dispatch}>
+      <div className="space-y-1">
+        <Label>Upload (server {props.type})</Label>
+        <Input
+          name="files"
+          multiple
+          disabled={isUploading}
+          className="h-10 p-0 file:me-3 file:border-0 file:border-e"
+          type={props.type === "file" ? "file" : "text"}
+          onChange={() => {
+            if (props.type === "file") {
+              formRef.current?.requestSubmit();
+              return;
+            }
+          }}
+        />
+      </div>
+
+      <noscript>
+        <button type="submit" disabled={isUploading}>
+          {isUploading ? "⏳" : `Upload (server ${props.type})`}
+        </button>
+      </noscript>
+    </form>
+  );
+}
+
 export function Uploader() {
   const router = useRouter();
 
   return (
-    <UTButton
-      endpoint="anything"
-      input={{}}
-      onUploadError={(error) => {
-        window.alert(error.message);
-      }}
-      onClientUploadComplete={() => {
-        router.refresh();
-      }}
-      content={{
-        allowedContent: <></>,
-        button: ({ isUploading }) => (isUploading ? null : "Upload"),
-      }}
-      appearance={{
-        button: "!text-sm/6",
-        allowedContent: "!h-0",
-      }}
-    />
+    <div className="flex gap-4">
+      <div className="space-y-1">
+        <Label>Upload (client)</Label>
+        <UTButton
+          endpoint="anything"
+          input={{}}
+          onUploadError={(error) => {
+            window.alert(error.message);
+          }}
+          onClientUploadComplete={() => {
+            router.refresh();
+          }}
+          content={{
+            allowedContent: <></>,
+            button: ({ isUploading }) =>
+              isUploading ? null : "Upload (Client)",
+          }}
+          appearance={{
+            button: "!text-sm/6",
+            allowedContent: "!h-0",
+          }}
+        />
+      </div>
+      <ServerUploader type="file" />
+      <ServerUploader type="url" />
+    </div>
   );
 }
diff --git a/playground-v6/lib/actions.ts b/playground-v6/lib/actions.ts
index 7ca1e361a0..90e183be2a 100644
--- a/playground-v6/lib/actions.ts
+++ b/playground-v6/lib/actions.ts
@@ -5,6 +5,7 @@ import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 
 import { UTApi } from "uploadthing/server";
+import { UploadFileResult } from "uploadthing/types";
 
 import { CACHE_TAGS, SESSION_COOKIE_NAME } from "./const";
 import { getSession, Session } from "./data";
@@ -35,6 +36,42 @@ export async function signOut() {
   redirect("/");
 }
 
+export async function uploadFiles(previousState: unknown, form: FormData) {
+  const session = await getSession();
+  if (!session) {
+    return {
+      success: false as const,
+      error: "Unauthorized",
+    };
+  }
+
+  const files = form.getAll("files") as File[] | string[];
+  let uploadResults: UploadFileResult[];
+  if (files.some((file) => typeof file === "string")) {
+    uploadResults = await utapi.uploadFilesFromUrl(files as string[]);
+  } else {
+    uploadResults = await utapi.uploadFiles(files as File[]);
+  }
+
+  if (uploadResults.every((result) => result.error !== null)) {
+    return {
+      success: false as const,
+      error: "Failed to upload some files",
+    };
+  }
+
+  revalidateTag(CACHE_TAGS.LIST_FILES);
+
+  const uploadedCount = uploadResults.filter(
+    (result) => result.data != null,
+  ).length;
+
+  return {
+    success: uploadedCount === uploadResults.length,
+    uploadedCount,
+  };
+}
+
 export async function getFileUrl(key: string) {
   const session = await getSession();
   if (!session) {
diff --git a/playground/components/fieldset.tsx b/playground/components/fieldset.tsx
new file mode 100644
index 0000000000..c7f04dbac7
--- /dev/null
+++ b/playground/components/fieldset.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+import cx from "clsx";
+
+export function Input({
+  className,
+  type,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      className={cx(
+        className,
+        "border-input focus-visible:border-ring focus-visible:ring-ring/30 flex w-full rounded-lg border px-3 py-2 text-sm shadow-sm shadow-black/5 transition-shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        type === "search" &&
+          "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none",
+        type === "file" &&
+          "file:border-input p-0 pr-3 italic file:me-3 file:h-full file:border-0 file:border-r file:border-solid file:bg-transparent file:px-3 file:text-sm file:font-medium file:not-italic",
+      )}
+      {...props}
+    />
+  );
+}
+
+export function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      className={cx(
+        "text-sm font-medium leading-4 peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/playground/components/uploader.tsx b/playground/components/uploader.tsx
index 6d698710f6..83056e1cd4 100644
--- a/playground/components/uploader.tsx
+++ b/playground/components/uploader.tsx
@@ -1,35 +1,87 @@
 "use client";
 
+import { useActionState, useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
 
 import { generateReactHelpers, generateUploadButton } from "@uploadthing/react";
 
 import { UploadRouter } from "../app/api/uploadthing/route";
+import { uploadFiles } from "../lib/actions";
+import { Input, Label } from "./fieldset";
 
 export const UTButton = generateUploadButton<UploadRouter>();
 export const { useUploadThing } = generateReactHelpers<UploadRouter>();
 
+function ServerUploader(props: { type: "file" | "url" }) {
+  const formRef = useRef<HTMLFormElement>(null);
+  const [state, dispatch, isUploading] = useActionState(uploadFiles, {
+    success: false,
+    error: "",
+  });
+
+  useEffect(() => {
+    if (state.success === false && state.error) {
+      window.alert(state.error);
+    }
+  }, [state.success]);
+
+  return (
+    <form ref={formRef} action={dispatch}>
+      <div className="space-y-1">
+        <Label>Upload (server {props.type})</Label>
+        <Input
+          name="files"
+          multiple
+          disabled={isUploading}
+          className="h-10 p-0 file:me-3 file:border-0 file:border-e"
+          type={props.type === "file" ? "file" : "text"}
+          onChange={() => {
+            if (props.type === "file") {
+              formRef.current?.requestSubmit();
+              return;
+            }
+          }}
+        />
+      </div>
+
+      <noscript>
+        <button type="submit" disabled={isUploading}>
+          {isUploading ? "⏳" : `Upload (server ${props.type})`}
+        </button>
+      </noscript>
+    </form>
+  );
+}
+
 export function Uploader() {
   const router = useRouter();
 
   return (
-    <UTButton
-      endpoint={(rr) => rr.anything}
-      input={{}}
-      onUploadError={(error) => {
-        window.alert(error.message);
-      }}
-      onClientUploadComplete={() => {
-        router.refresh();
-      }}
-      content={{
-        allowedContent: <></>,
-        button: ({ isUploading }) => (isUploading ? null : "Upload"),
-      }}
-      appearance={{
-        button: "!text-sm/6",
-        allowedContent: "!h-0",
-      }}
-    />
+    <div className="flex gap-4">
+      <div className="space-y-1">
+        <Label>Upload (client)</Label>
+        <UTButton
+          endpoint={(rr) => rr.anything}
+          input={{}}
+          onUploadError={(error) => {
+            window.alert(error.message);
+          }}
+          onClientUploadComplete={() => {
+            router.refresh();
+          }}
+          content={{
+            allowedContent: <></>,
+            button: ({ isUploading }) =>
+              isUploading ? null : "Upload (Client)",
+          }}
+          appearance={{
+            button: "!text-sm/6",
+            allowedContent: "!h-0",
+          }}
+        />
+      </div>
+      <ServerUploader type="file" />
+      <ServerUploader type="url" />
+    </div>
   );
 }
diff --git a/playground/lib/actions.ts b/playground/lib/actions.ts
index 7ca1e361a0..90e183be2a 100644
--- a/playground/lib/actions.ts
+++ b/playground/lib/actions.ts
@@ -5,6 +5,7 @@ import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 
 import { UTApi } from "uploadthing/server";
+import { UploadFileResult } from "uploadthing/types";
 
 import { CACHE_TAGS, SESSION_COOKIE_NAME } from "./const";
 import { getSession, Session } from "./data";
@@ -35,6 +36,42 @@ export async function signOut() {
   redirect("/");
 }
 
+export async function uploadFiles(previousState: unknown, form: FormData) {
+  const session = await getSession();
+  if (!session) {
+    return {
+      success: false as const,
+      error: "Unauthorized",
+    };
+  }
+
+  const files = form.getAll("files") as File[] | string[];
+  let uploadResults: UploadFileResult[];
+  if (files.some((file) => typeof file === "string")) {
+    uploadResults = await utapi.uploadFilesFromUrl(files as string[]);
+  } else {
+    uploadResults = await utapi.uploadFiles(files as File[]);
+  }
+
+  if (uploadResults.every((result) => result.error !== null)) {
+    return {
+      success: false as const,
+      error: "Failed to upload some files",
+    };
+  }
+
+  revalidateTag(CACHE_TAGS.LIST_FILES);
+
+  const uploadedCount = uploadResults.filter(
+    (result) => result.data != null,
+  ).length;
+
+  return {
+    success: uploadedCount === uploadResults.length,
+    uploadedCount,
+  };
+}
+
 export async function getFileUrl(key: string) {
   const session = await getSession();
   if (!session) {