Wip

examples/next-upload-example/package.json

@@ -11,15 +11,18 @@
   },
   "dependencies": {
     "@keyv/postgres": "^1.4.9",
-    "@types/node": "20.10.0",
-    "@types/react": "18.2.39",
+    "@neondatabase/serverless": "^0.6.0",
+    "@types/node": "20.10.2",
+    "@types/react": "18.2.40",
     "@types/react-dom": "18.2.17",
     "bytes": "^3.1.2",
-    "eslint": "8.54.0",
+    "drizzle-orm": "^0.29.1",
+    "eslint": "8.55.0",
     "eslint-config-next": "14.0.3",
     "keyv": "^4.5.4",
     "next": "14.0.3",
     "next-upload": "^0.0.28",
+    "postgres": "^3.4.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
@@ -28,7 +31,10 @@
   },
   "devDependencies": {
     "@types/bytes": "^3.1.4",
+    "@types/pg": "^8.10.9",
     "dotenv": "^16.3.1",
+    "drizzle-kit": "^0.20.6",
+    "pg": "^8.11.3",
     "yalc": "^1.0.0-pre.53"
   }
 }

examples/next-upload-example/src/app/cron/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { nup } from '../upload/nup';
+import { nup } from '../upload/basic/nup';
 
 export const GET = async (request: NextRequest) => {
   const { searchParams } = new URL(request.url);

examples/next-upload-example/src/app/globals.css

@@ -1,5 +1,5 @@
 :root {
-  --max-width: 1100px;
+  --max-width: 600px;
   --border-radius: 12px;
   --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
     'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',

examples/next-upload-example/src/app/upload/config.ts → examples/next-upload-example/src/app/nextUploadConfig.ts

@@ -1,22 +1,13 @@
 import { type NextUploadConfig } from 'next-upload/client';
 
-export enum NextUploadType {
-  image = `image`,
-}
-
-export const config: NextUploadConfig = {
+export const nextUploadConfig: NextUploadConfig = {
   maxSize: process.env.NEXT_PUBLIC_MAX_SIZE || '1mb',
-  // verifyAssets: true,
   client: {
     region: process.env.S3_REGION,
     endpoint: process.env.S3_ENDPOINT,
     credentials: {
       secretAccessKey: process.env.S3_SECRET_KEY,
       accessKeyId: process.env.S3_ACCESS_KEY,
     },
-    forcePathStyle: true,
-  },
-  uploadTypes: {
-    [NextUploadType.image]: {},
   },
 };

examples/next-upload-example/src/app/page.module.css

@@ -21,7 +21,7 @@
 }
 
 .builtBy {
-  font-size: 0.7rem;
+  font-size: 0.8rem;
   font-weight: bold;
   text-align: left;
   display: flex;
@@ -39,6 +39,8 @@
 
 .example {
   margin: 1rem 0rem;
+  max-width: var(--max-width);
+  width: 100%;
 }
 
 .divider {

examples/next-upload-example/src/app/page.tsx

@@ -11,7 +11,7 @@ export default async function Home() {
         <ExampleInstallCommand textToCopy={textToCopy} />
         <div className={styles.builtBy}>
           <div className={styles.row}>
-            Leave a star on
+            Read the docs on
             <a
               href="https://github.com/TimMikeladze/next-upload"
               target="_blank"
@@ -30,9 +30,22 @@ export default async function Home() {
 
       <div className={styles.divider} />
       <div className={styles.example}>
-        <FileUpload />
+        <FileUpload api="/upload/basic" title="Basic upload (no store)" />
+        <FileUpload api="/upload/keyv" title="Upload with Keyv store" />
+        <FileUpload
+          api="/upload/drizzle-postgres-js"
+          title="Upload with Drizzle Postgres.js store"
+        />
+        <FileUpload
+          api="/upload/drizzle-node-postgres"
+          title="Upload with Drizzle Node-Postgres store"
+        />
+        <FileUpload api="/upload/edge" title="Edge upload (no store) " />
+        <FileUpload
+          api="/upload/edge-with-drizzle-neon"
+          title="Edge upload with Drizzle Neon Serverless Postgres store "
+        />
       </div>
-      <div className={styles.divider} />
     </main>
   );
 }

examples/next-upload-example/src/app/upload/basic/nup.ts

@@ -0,0 +1,10 @@
+import { nextUploadConfig } from '@/app/nextUploadConfig';
+import { NextUpload } from 'next-upload';
+
+export const nup = new NextUpload({
+  ...nextUploadConfig,
+  api: '/upload/basic',
+  uploadTypes: {
+    ['basic']: {},
+  },
+});

examples/next-upload-example/src/app/upload/basic/route.ts

@@ -0,0 +1,6 @@
+import { NextRequest } from 'next/server';
+import { nup } from './nup';
+
+export const POST = (request: NextRequest) => nup.handler(request);
+
+export const dynamic = 'force-dynamic';

examples/next-upload-example/src/app/upload/drizzle-node-postgres/nup.ts

@@ -0,0 +1,19 @@
+import { nextUploadConfig } from '@/app/nextUploadConfig';
+import { getDbNodePostgres } from '@/db/getDbNodePostgres';
+import { NextUpload } from 'next-upload';
+import { DrizzlePostgresStore } from 'next-upload/store/drizzle/postgres-js';
+
+export const nup = new NextUpload(
+  {
+    ...nextUploadConfig,
+    api: '/upload/drizzle-node-postgres',
+    uploadTypes: {
+      ['drizzle-node-postgres']: {},
+    },
+  },
+  async () =>
+    new DrizzlePostgresStore(
+      // @ts-ignore
+      await getDbNodePostgres()
+    )
+);

examples/next-upload-example/src/app/upload/drizzle-node-postgres/route.ts

@@ -0,0 +1,6 @@
+import { NextRequest } from 'next/server';
+import { nup } from './nup';
+
+export const POST = (request: NextRequest) => nup.handler(request);
+
+export const dynamic = 'force-dynamic';

examples/next-upload-example/src/app/upload/drizzle-postgres-js/nup.ts

@@ -0,0 +1,15 @@
+import { nextUploadConfig } from '@/app/nextUploadConfig';
+import { getDbPostgresJs } from '@/db/getDbPostgresJs';
+import { NextUpload } from 'next-upload';
+import { DrizzlePostgresStore } from 'next-upload/store/drizzle/postgres-js';
+
+export const nup = new NextUpload(
+  {
+    ...nextUploadConfig,
+    api: '/upload/drizzle-postgres-js',
+    uploadTypes: {
+      ['drizzle-postgres-js']: {},
+    },
+  },
+  new DrizzlePostgresStore(getDbPostgresJs())
+);

examples/next-upload-example/src/app/upload/drizzle-postgres-js/route.ts

@@ -0,0 +1,6 @@
+import { NextRequest } from 'next/server';
+import { nup } from './nup';
+
+export const POST = (request: NextRequest) => nup.handler(request);
+
+export const dynamic = 'force-dynamic';

examples/next-upload-example/src/app/upload/edge-with-drizzle-neon/nup.ts

@@ -0,0 +1,19 @@
+import { nextUploadConfig } from '@/app/nextUploadConfig';
+import { getDbServerless } from '@/db/getDbServerless';
+import { NextUpload } from 'next-upload';
+import { DrizzlePostgresStore } from 'next-upload/store/drizzle/postgres-js';
+
+export const nup = new NextUpload(
+  {
+    ...nextUploadConfig,
+    api: '/edge-with-drizzle-neon',
+    uploadTypes: {
+      ['edge-with-drizzle-neon']: {},
+    },
+  },
+
+  new DrizzlePostgresStore(
+    // @ts-ignore
+    getDbServerless()
+  )
+);

examples/next-upload-example/src/app/upload/edge/nup.ts

@@ -0,0 +1,10 @@
+import { nextUploadConfig } from '@/app/nextUploadConfig';
+import { NextUpload } from 'next-upload';
+
+export const nup = new NextUpload({
+  ...nextUploadConfig,
+  api: '/upload/edge',
+  uploadTypes: {
+    ['edge']: {},
+  },
+});

examples/next-upload-example/src/app/upload/edge/route.ts

@@ -0,0 +1,8 @@
+import { NextRequest } from 'next/server';
+import { nup } from './nup';
+
+export const POST = (request: NextRequest) => nup.handler(request);
+
+export const dynamic = 'force-dynamic';
+
+export const runtime = 'edge';

examples/next-upload-example/src/app/upload/keyv/nup.ts

@@ -0,0 +1,23 @@
+import { nextUploadConfig } from '@/app/nextUploadConfig';
+import KeyvPostgres from '@keyv/postgres';
+import Keyv from 'keyv';
+import { NextUpload } from 'next-upload';
+import { KeyvStore } from 'next-upload/store/keyv';
+
+export const nup = new NextUpload(
+  {
+    ...nextUploadConfig,
+    api: '/upload/keyv',
+    uploadTypes: {
+      ['keyv']: {},
+    },
+  },
+  new KeyvStore(
+    new Keyv({
+      namespace: NextUpload.namespaceFromEnv(),
+      store: new KeyvPostgres({
+        uri: `${process.env.PG_CONNECTION_STRING}/${process.env.PG_DB}`,
+      }),
+    })
+  )
+);

examples/next-upload-example/src/app/upload/keyv/route.ts

@@ -0,0 +1,6 @@
+import { NextRequest } from 'next/server';
+import { nup } from './nup';
+
+export const POST = (request: NextRequest) => nup.handler(request);
+
+export const dynamic = 'force-dynamic';

examples/next-upload-example/src/components/FileUpload.tsx

@@ -4,16 +4,22 @@ import { useDropzone } from 'react-dropzone';
 import { useNextUpload } from 'next-upload/react';
 import toast from 'react-hot-toast';
 import bytes from 'bytes';
-import { NextUploadType } from '@/app/upload/config';
 
 const maxSize = process.env.NEXT_PUBLIC_MAX_SIZE || '1mb';
 
-const FileUpload = () => {
-  const nup = useNextUpload();
+export interface FileUploadProps {
+  api: string;
+  title: string;
+}
+
+const FileUpload = (props: FileUploadProps) => {
+  const nup = useNextUpload({
+    api: props.api,
+  });
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept: {
-      'image/*': ['.jpeg', '.png'],
+      'image/*': [],
     },
     maxSize: bytes.parse(maxSize),
     onDropRejected: () => toast.error(`Maximum file upload size is ${maxSize}`),
@@ -22,7 +28,7 @@ const FileUpload = () => {
         nup.upload(
           acceptedFiles.map((file) => ({
             file,
-            uploadType: NextUploadType.image,
+            uploadType: props.api.split('/').pop(),
           }))
         ),
         {
@@ -35,7 +41,22 @@ const FileUpload = () => {
   });
 
   return (
-    <div {...getRootProps()}>
+    <div
+      {...getRootProps()}
+      style={{
+        padding: '1rem',
+        border: '1px solid #ccc',
+        borderRadius: '5px',
+        marginBottom: '2rem',
+      }}
+    >
+      <div
+        style={{
+          marginBottom: '1rem',
+        }}
+      >
+        <h4>{props.title}</h4>
+      </div>
       <div
         style={{
           textAlign: 'center',
@@ -45,7 +66,7 @@ const FileUpload = () => {
         {isDragActive ? (
           <p>Drop the files here ...</p>
         ) : (
-          <p>Drag 'n' drop some files here, or click to select files</p>
+          <p>Drag 'n' drop some files here, or click here to select files</p>
         )}
       </div>
       {nup.files.length > 0 && (

examples/next-upload-example/src/db/getDbNodePostgres.ts

@@ -0,0 +1,18 @@
+import { Pool } from 'pg';
+import { drizzle } from 'drizzle-orm/node-postgres';
+
+let db: ReturnType<typeof drizzle>;
+
+export const getDbNodePostgres = async () => {
+  if (!db) {
+    const client = new Pool({
+      connectionString:
+        process.env.PG_CONNECTION_STRING + `/` + process.env.PG_DB,
+    });
+
+    await client.connect();
+    db = drizzle(client);
+  }
+
+  return db;
+};

examples/next-upload-example/src/db/getDbPostgresJs.ts

@@ -0,0 +1,16 @@
+import { drizzle } from 'drizzle-orm/postgres-js';
+import postgres from 'postgres';
+
+let db: ReturnType<typeof drizzle>;
+
+export const getDbPostgresJs = () => {
+  if (!db) {
+    const client = postgres(
+      `${process.env.PG_CONNECTION_STRING}/${process.env.PG_DB}`
+    );
+
+    db = drizzle(client);
+  }
+
+  return db;
+};

examples/next-upload-example/src/db/getDbServerless.ts

@@ -0,0 +1,10 @@
+import { neon, neonConfig } from '@neondatabase/serverless';
+import { drizzle } from 'drizzle-orm/neon-http';
+
+neonConfig.fetchConnectionCache = true;
+
+const sql = neon(process.env.PG_CONNECTION_STRING + `/` + process.env.PG_DB);
+
+const db = drizzle(sql);
+
+export const getDbServerless = () => db;

examples/next-upload-example/src/db/migrations/0000_careful_scorpion.sql

@@ -0,0 +1,7 @@
+CREATE TABLE IF NOT EXISTS "next_upload_assets" (
+	"createdAt" timestamp with time zone DEFAULT now() NOT NULL,
+	"updatedAt" timestamp with time zone DEFAULT now() NOT NULL,
+	"id" varchar PRIMARY KEY NOT NULL,
+	"data" jsonb NOT NULL,
+	"expires" integer
+);

examples/next-upload-example/src/db/migrations/0001_sticky_thunderbolt_ross.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "next_upload_assets" ADD COLUMN "presignedUrl" varchar;--> statement-breakpoint
+ALTER TABLE "next_upload_assets" ADD COLUMN "presignedUrlExpires" integer;

examples/next-upload-example/src/db/migrations/0002_brave_argent.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "next_upload_assets" ALTER COLUMN "expires" SET DATA TYPE bigint;--> statement-breakpoint
+ALTER TABLE "next_upload_assets" ALTER COLUMN "presignedUrlExpires" SET DATA TYPE bigint;