Update FormData and route handlers examples

examples/nextjs-route-handlers-upload/.env.example

@@ -0,0 +1,4 @@
+CLOUDINARY_CLOUD_NAME=""
+CLOUDINARY_API_KEY=""
+CLOUDINARY_UPLOADS_FOLDER=""
+CLOUDINARY_API_SECRET=""

examples/nextjs-route-handlers-upload/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true
+}

examples/nextjs-route-handlers-upload/README.md

@@ -1,3 +1,99 @@
-# Uploading Files to Cloudinary with Next.js Route Handlers
+# Uploading Files to Cloudinary with Next.js API Routes/Route Handlers
 
-Coming soon
+This example shows how to upload files to Cloudinary using Next.js API Routes (Pages Router) and Route Handlers (App Router).
+
+## Getting Started
+
+### Using the pages router
+
+Create an API Route as shown in [upload.ts](src/pages/api/upload.ts) using the `formidable` library to accept files in request body.
+
+```ts
+const uploadsFolder = process.env.CLOUDINARY_UPLOADS_FOLDER;
+const form = new IncomingForm();
+form.parse(req, async (err, fields, files) => {
+  const result = await new Promise<UploadApiResponse>((resolve, reject) => {
+    cloudinary.uploader.upload(
+      file.filepath,
+      { resource_type: 'auto', folder: uploadsFolder },
+      (error, result) => {
+        if (error || !result) reject(error);
+        else resolve(result);
+      },
+    );
+});
+```
+
+From the client side, you can use the `fetch` API to send a POST request to the API Route with the file in the request body as shown in [index.tsx](src/pages/index.tsx).
+
+```tsx
+// handleSubmit
+const formData = new FormData();
+formData.append('file', file);
+const response = await fetch('/api/upload', {
+  method: 'POST',
+  body: formData,
+});
+const result = await response.json();
+
+// jsx
+return (
+  <form onSubmit={handleSubmit}>
+    <input type='file' name='file' onChange={handleFileChange} />
+    <button type='submit'>Upload</button>
+  </form>
+)
+```
+
+### Using the app router
+
+Create a Route Handler as shown in [route.ts](src/app/app/api/upload/route.ts). Route Handlers don't require the `formidable` library to accept files in request body.
+
+```ts
+const uploadsFolder = process.env.CLOUDINARY_UPLOADS_FOLDER;
+const formData = await request.formData();
+const file = formData.get('file') as File;
+const fileBuffer = await file.arrayBuffer();
+
+const result = await new Promise<UploadApiResponse>((resolve, reject) => {
+  cloudinary.uploader
+    .upload_stream(
+      { resource_type: 'auto', folder: uploadsFolder },
+      (error, result) => {
+        if (error || !result) reject(error);
+        else resolve(result);
+      },
+    )
+    .end(Buffer.from(fileBuffer));
+});
+```
+
+On the client side, you can use the `fetch` API to send a POST request to the Route Handler with the file in the request body. It should be a client component like shown in [Uploader.tsx](src/components/Uploader.tsx). Same as the pages router.
+
+## Running this example
+
+- Install the project dependencies with:
+```sh
+yarn install
+# or
+npm install
+```
+
+- Add environment variables to a `.env.local` file:
+```sh
+CLOUDINARY_CLOUD_NAME=""
+CLOUDINARY_API_KEY=""
+CLOUDINARY_UPLOADS_FOLDER=""
+CLOUDINARY_API_SECRET=""
+```
+
+> Note: the upload preset must be updated to one available in your account
+
+- Start the development server with:
+```sh
+yarn dev
+# or
+npm run dev
+```
+
+- Visit the project at <http://localhost:3000>!

examples/nextjs-route-handlers-upload/package.json

@@ -9,19 +9,23 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@types/node": "20.6.2",
-    "@types/react": "18.2.22",
-    "@types/react-dom": "18.2.7",
-    "autoprefixer": "10.4.15",
-    "cloudinary": "^1.41.0",
-    "eslint": "8.49.0",
-    "eslint-config-next": "13.4.19",
-    "next": "13.4.19",
-    "next-cloudinary": "^4.23.1",
-    "postcss": "8.4.29",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "tailwindcss": "3.3.3",
-    "typescript": "5.2.2"
+    "autoprefixer": "10.4.20",
+    "cloudinary": "^2.4.0",
+    "formidable": "^3.5.1",
+    "next": "14.2.11",
+    "next-cloudinary": "^6.13.0",
+    "postcss": "8.4.47",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "tailwindcss": "3.4.11",
+    "typescript": "5.6.2"
+  },
+  "devDependencies": {
+    "@types/formidable": "^3.4.5",
+    "@types/node": "22.5.5",
+    "@types/react": "18.3.5",
+    "@types/react-dom": "18.3.0",
+    "eslint": "9.10.0",
+    "eslint-config-next": "14.2.11"
   }
 }

examples/nextjs-route-handlers-upload/src/app/app/api/upload/route.ts

@@ -0,0 +1,32 @@
+import cloudinary from '@/lib/cloudinary';
+import type { UploadApiResponse } from 'cloudinary';
+
+export async function POST(request: Request) {
+  try {
+    const uploadsFolder = process.env.CLOUDINARY_UPLOADS_FOLDER;
+    const formData = await request.formData();
+    const file = formData.get('file') as File;
+
+    if (!file) {
+      return Response.json({ error: 'No file uploaded' }, { status: 400 });
+    }
+
+    const fileBuffer = await file.arrayBuffer();
+    const result = await new Promise<UploadApiResponse>((resolve, reject) => {
+      cloudinary.uploader
+        .upload_stream(
+          { resource_type: 'auto', folder: uploadsFolder },
+          (error, result) => {
+            if (error || !result) reject(error);
+            else resolve(result);
+          },
+        )
+        .end(Buffer.from(fileBuffer));
+    });
+
+    return Response.json({ secure_url: result.secure_url });
+  } catch (error) {
+    console.error('Error uploading file:', error);
+    return Response.json({ error: 'Error uploading file' }, { status: 500 });
+  }
+}

examples/nextjs-route-handlers-upload/src/app/app/page.tsx

@@ -0,0 +1,20 @@
+import Footer from '@/components/Footer';
+import Uploader from '@/components/Uploader';
+import type { Metadata } from 'next';
+
+const TITLE = 'Cloudinary & Next.js Route Handlers';
+export const metadata: Metadata = {
+  title: TITLE,
+  description:
+    'Learn how to upload files from a form to Cloudinary using Next.js Route Handlers',
+};
+
+export default function AppRouterPage() {
+  return (
+    <main className='container mx-auto mb-5 text-center max-w-screen-lg space-y-5 px-4 py-0'>
+      <h1 className='text-3xl font-semibold py-5'>{TITLE}</h1>
+      <Uploader />
+      <Footer />
+    </main>
+  );
+}

examples/nextjs-route-handlers-upload/src/app/layout.tsx

@@ -1,29 +1,20 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import { Inter } from 'next/font/google';
+import Header from '@/components/Header';
+import '@/styles/globals.css';
 
-import Nav from '@/components/Nav';
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  weight: ['400', '700'],
+});
 
-const inter = Inter({ subsets: ['latin'] })
-
-export const metadata: Metadata = {
-  title: 'Cloudinary & Next.js Route Handlers',
-  description: 'Learn how to upload files from a form to Cloudinary using Next.js Route Handlers',
-}
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+export default function RootLayout({ children }: React.PropsWithChildren) {
   return (
-    <html lang="en">
+    <html lang='en'>
       <body className={inter.className}>
-        <div className="grid grid-rows-[auto_1fr] h-screen">
-          <Nav />
-          <main>{ children }</main>
-        </div>
+        <Header />
+        {children}
       </body>
     </html>
-  )
+  );
 }