uploadthing

templates/plate-playground-template/.env.example

@@ -0,0 +1,2 @@
+OPENAI_API_KEY=
+UPLOADTHING_TOKEN=

templates/plate-playground-template/README.md

@@ -41,6 +41,7 @@ cp .env.example .env.local
 Configure `.env.local`:
 
 - `OPENAI_API_KEY` – OpenAI API key ([get one here](https://platform.openai.com/account/api-keys))
+- `UPLOADTHING_TOKEN` – UploadThing API key ([get one here](https://uploadthing.com/dashboard)) You can also using your own backend
 
 Start the development server:
 

templates/plate-playground-template/package.json

@@ -73,6 +73,8 @@
     "@udecode/plate-table": "^40.0.0",
     "@udecode/plate-toggle": "^40.0.0",
     "@udecode/plate-trailing-block": "^40.0.0",
+    "@uploadthing/react": "7.1.0",
+    "uploadthing": "7.2.0",
     "zod": "^3.23.8",
     "react-player": "^2.16.0",
     "sonner": "^1.5.0",

templates/plate-playground-template/src/app/api/uploadthing/core.ts

@@ -0,0 +1,26 @@
+import type { FileRouter } from 'uploadthing/next';
+
+import { createUploadthing } from 'uploadthing/next';
+
+const f = createUploadthing();
+
+// FileRouter for your app, can contain multiple FileRoutes
+export const ourFileRouter = {
+  // Define as many FileRoutes as you like, each with a unique routeSlug
+  imageUploader: f(['image', 'text', 'blob', 'pdf', 'video', 'audio'])
+    // Set permissions and file types for this FileRoute
+    .middleware(async ({ req }) => {
+      // This code runs on your server before upload
+
+      // Whatever is returned here is accessible in onUploadComplete as `metadata`
+      return {};
+    })
+    .onUploadComplete(({ file, metadata }) => {
+      // This code RUNS ON YOUR SERVER after upload
+
+      // !!! Whatever is returned here is sent to the clientside `onClientUploadComplete` callback
+      return { file };
+    }),
+} satisfies FileRouter;
+
+export type OurFileRouter = typeof ourFileRouter;

templates/plate-playground-template/src/app/api/uploadthing/route.ts

@@ -0,0 +1,11 @@
+import { createRouteHandler } from 'uploadthing/next';
+
+import { ourFileRouter } from './core';
+
+// Export routes for Next App Router
+export const { GET, POST } = createRouteHandler({
+  router: ourFileRouter,
+
+  // Apply an (optional) custom config:
+  // config: { ... },
+});

templates/plate-playground-template/src/components/plate-ui/image-element.tsx

@@ -3,7 +3,8 @@
 import React from 'react';
 
 import { cn, withRef } from '@udecode/cn';
-import { withHOC } from '@udecode/plate-common/react';
+import { useEditorRef, withHOC } from '@udecode/plate-common/react';
+import { useDraggable, useDraggableState } from '@udecode/plate-dnd';
 import { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react';
 import { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';
 
@@ -20,10 +21,19 @@ export const ImageElement = withHOC(
   ResizableProvider,
   withRef<typeof PlateElement>(
     ({ children, className, nodeProps, ...props }, ref) => {
+      const editor = useEditorRef();
+
       const { align = 'center', focused, readOnly, selected } = useMediaState();
 
       const width = useResizableStore().get.width();
 
+      const state = editor.plugins.dnd
+        ? useDraggableState({ element: props.element })
+        : ({} as any);
+
+      const { isDragging } = state;
+      const { handleRef } = useDraggable(state);
+
       return (
         <MediaPopover plugin={ImagePlugin}>
           <PlateElement
@@ -44,10 +54,12 @@ export const ImageElement = withHOC(
                   options={{ direction: 'left' }}
                 />
                 <Image
+                  ref={handleRef}
                   className={cn(
                     'block w-full max-w-full cursor-pointer object-cover px-0',
                     'rounded-sm',
-                    focused && selected && 'ring-2 ring-ring ring-offset-2'
+                    focused && selected && 'ring-ring ring-2 ring-offset-2',
+                    isDragging && 'opacity-50'
                   )}
                   alt=""
                   {...nodeProps}

templates/plate-playground-template/src/components/plate-ui/media-placeholder-element.tsx

@@ -73,7 +73,7 @@ export const MediaPlaceholderElement = withHOC(
       const { api } = useEditorPlugin(PlaceholderPlugin);
 
       const { isUploading, progress, uploadFile, uploadedFile, uploadingFile } =
-        useUploadFile();
+        useUploadFile('imageUploader');
 
       const loading = isUploading && uploadingFile;
 

templates/plate-playground-template/src/lib/uploadthing/index.ts

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

templates/plate-playground-template/src/lib/uploadthing/uploadthing.ts

@@ -0,0 +1,6 @@
+import type { OurFileRouter } from '@/app/api/uploadthing/core';
+
+import { generateReactHelpers } from '@uploadthing/react';
+
+export const { uploadFiles, useUploadThing } =
+  generateReactHelpers<OurFileRouter>();