Merge pull request #3782 from udecode/docs/upload

Docs/upload

src/app/layout.tsx

@@ -1,21 +1,24 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
-import "./globals.css";
+import type { Metadata } from 'next';
+
+import localFont from 'next/font/local';
+import { Toaster } from 'sonner';
+
+import './globals.css';
 
 const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
+  src: './fonts/GeistVF.woff',
+  variable: '--font-geist-sans',
+  weight: '100 900',
 });
 const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
+  src: './fonts/GeistMonoVF.woff',
+  variable: '--font-geist-mono',
+  weight: '100 900',
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  description: 'Generated by create next app',
+  title: 'Create Next App',
 };
 
 export default function RootLayout({
@@ -29,6 +32,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         {children}
+        <Toaster />
       </body>
     </html>
   );

src/components/editor/use-chat.tsx

@@ -217,7 +217,7 @@ export function SettingsDialog() {
           <DialogDescription>
             Enter your{' '}
             <Link
-              className="inline-flex items-center font-medium text-primary hover:underline"
+              className="text-primary inline-flex items-center font-medium hover:underline"
               href="https://platform.openai.com/api-keys"
               rel="noreferrer"
               target="_blank"
@@ -306,7 +306,7 @@ export function SettingsDialog() {
             Save
           </Button>
         </form>
-        <p className="mt-4 text-sm text-muted-foreground">
+        <p className="text-muted-foreground mt-4 text-sm">
           Not stored anywhere. Used only for current session requests.
         </p>
       </DialogContent>

src/components/plate-ui/media-placeholder-element.tsx

@@ -230,6 +230,7 @@ export function ImageProgress({
 
   return (
     <div className={cn('relative', className)} contentEditable={false}>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
         ref={imageRef}
         className="h-auto w-full rounded-sm object-cover"

src/components/plate-ui/media-popover.tsx

@@ -64,7 +64,7 @@ export function MediaPopover({ children, plugin }: MediaPopoverProps) {
         {isEditing ? (
           <div className="flex w-[330px] flex-col">
             <div className="flex items-center">
-              <div className="flex items-center pl-2 pr-1 text-muted-foreground">
+              <div className="text-muted-foreground flex items-center pl-2 pr-1">
                 <Link className="size-4" />
               </div>
 

src/lib/uploadthing/index.ts

@@ -1,5 +1 @@
-export * from './handle-error';
-
 export * from './uploadthing';
-
-export * from './use-upload-file';

src/lib/uploadthing/uploadthing.ts

@@ -1,6 +1,102 @@
+import * as React from 'react';
+
 import type { OurFileRouter } from '@/app/api/uploadthing/core';
+import type {
+  ClientUploadedFileData,
+  UploadFilesOptions,
+} from 'uploadthing/types';
 
 import { generateReactHelpers } from '@uploadthing/react';
+import { isRedirectError } from 'next/dist/client/components/redirect';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+export interface UploadedFile<T = unknown> extends ClientUploadedFileData<T> {}
+
+interface UseUploadFileProps
+  extends Pick<
+    UploadFilesOptions<OurFileRouter, keyof OurFileRouter>,
+    'headers' | 'onUploadBegin' | 'onUploadProgress' | 'skipPolling'
+  > {
+  onUploadComplete?: (file: UploadedFile) => void;
+  onUploadError?: (error: unknown) => void;
+}
+
+export function useUploadFile(
+  endpoint: keyof OurFileRouter,
+  { onUploadComplete, onUploadError, ...props }: UseUploadFileProps = {}
+) {
+  const [uploadedFile, setUploadedFile] = React.useState<UploadedFile>();
+  const [uploadingFile, setUploadingFile] = React.useState<File>();
+  const [progress, setProgress] = React.useState<number>(0);
+  const [isUploading, setIsUploading] = React.useState(false);
+
+  async function uploadThing(file: File) {
+    setIsUploading(true);
+    setUploadingFile(file);
+
+    try {
+      const res = await uploadFiles(endpoint, {
+        ...props,
+        files: [file],
+        onUploadProgress: ({ progress }) => {
+          setProgress(Math.min(progress, 100));
+        },
+      });
+
+      setUploadedFile(res[0]);
+
+      onUploadComplete?.(res[0]);
 
+      return uploadedFile;
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+
+      const message =
+        errorMessage.length > 0
+          ? errorMessage
+          : 'Something went wrong, please try again later.';
+
+      toast.error(message);
+      onUploadError?.(error);
+    } finally {
+      setProgress(0);
+      setIsUploading(false);
+      setUploadingFile(undefined);
+    }
+  }
+
+  return {
+    isUploading,
+    progress,
+    uploadFile: uploadThing,
+    uploadedFile,
+    uploadingFile,
+  };
+}
 export const { uploadFiles, useUploadThing } =
   generateReactHelpers<OurFileRouter>();
+
+export function getErrorMessage(err: unknown) {
+  const unknownError = 'Something went wrong, please try again later.';
+
+  if (err instanceof z.ZodError) {
+    const errors = err.issues.map((issue) => {
+      return issue.message;
+    });
+
+    return errors.join('\n');
+  } else if (err instanceof Error) {
+    return err.message;
+  } else if (isRedirectError(err)) {
+    throw err;
+  } else {
+    return unknownError;
+  }
+}
+
+export function showErrorToast(err: unknown) {
+  const errorMessage = getErrorMessage(err);
+
+  return toast.error(errorMessage);
+}