-
-
-
- Registration {index + 1}
-
-
-
-
-
-
-
- updateRegistration(index, "contact", e.target.value)
- }
- />
-
-
-
-
-
-
-
-
-
- updateRegistration(index, "coupon", e.target.value)
- }
- />
-
-
-
-
-
-
- removeRegistration(index)}
- title="Delete"
- description=""
- />
-
+
+
+
+
+ updateRegistration("contact", e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ updateRegistration("coupon", e.target.value)}
+ />
+
+
+
- ))}
-
-
);
From 6efd172ba8fa5549546a5c076af0843b3799b3fa Mon Sep 17 00:00:00 2001
From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com>
Date: Wed, 25 Sep 2024 09:05:30 +0530
Subject: [PATCH 12/38] Feat: Added upload thing to upload images
---
package-lock.json | 202 +++++++++++++++++++++++++++
package.json | 2 +
src/app/api/uploadthing/core.ts | 34 +++++
src/app/api/uploadthing/route.ts | 11 ++
src/app/register/page.tsx | 1 +
src/components/registration-form.tsx | 13 ++
src/utils/uploadthing.ts | 10 ++
7 files changed, 273 insertions(+)
create mode 100644 src/app/api/uploadthing/core.ts
create mode 100644 src/app/api/uploadthing/route.ts
create mode 100644 src/utils/uploadthing.ts
diff --git a/package-lock.json b/package-lock.json
index 1e853fe..61dc995 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
"@tanstack/react-query": "^5.56.2",
"@types/ioredis": "^4.28.10",
"@types/lodash.debounce": "^4.0.9",
+ "@uploadthing/react": "^7.0.2",
"axios": "^1.7.7",
"bullmq": "^5.13.0",
"class-variance-authority": "^0.7.0",
@@ -47,6 +48,7 @@
"sonner": "^1.5.0",
"tailwind-merge": "^2.5.2",
"tailwindcss-animate": "^1.0.7",
+ "uploadthing": "^7.0.2",
"zod": "^3.23.8"
},
"devDependencies": {
@@ -704,6 +706,32 @@
"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
"license": "MIT"
},
+ "node_modules/@effect/platform": {
+ "version": "0.63.2",
+ "resolved": "https://registry.npmjs.org/@effect/platform/-/platform-0.63.2.tgz",
+ "integrity": "sha512-b39pVFw0NGo/tXjGShW7Yg0M+kG7bRrFR6+dQ3aIu99ePTkTp6bGb/kDB7n+dXsFFdIqHsQGYESeYcOQngxdFQ==",
+ "license": "MIT",
+ "dependencies": {
+ "find-my-way-ts": "^0.1.5",
+ "multipasta": "^0.2.5"
+ },
+ "peerDependencies": {
+ "@effect/schema": "^0.72.2",
+ "effect": "^3.7.2"
+ }
+ },
+ "node_modules/@effect/schema": {
+ "version": "0.72.2",
+ "resolved": "https://registry.npmjs.org/@effect/schema/-/schema-0.72.2.tgz",
+ "integrity": "sha512-/x1BIA2pqcUidNrOMmwYe6Z58KtSgHSc5iJu7bNwIxi2LHMVuUao1BvpI5x6i7T/zkoi4dd1S6qasZzJIYDjdw==",
+ "license": "MIT",
+ "dependencies": {
+ "fast-check": "^3.21.0"
+ },
+ "peerDependencies": {
+ "effect": "^3.7.2"
+ }
+ },
"node_modules/@esbuild/aix-ppc64": {
"version": "0.19.11",
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz",
@@ -3756,6 +3784,72 @@
"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
"dev": true
},
+ "node_modules/@uploadthing/dropzone": {
+ "version": "0.4.1",
+ "resolved": "https://registry.npmjs.org/@uploadthing/dropzone/-/dropzone-0.4.1.tgz",
+ "integrity": "sha512-RHSpo/2kg/mrRSYQA4EKlyvkOCYWOeE2+QQYW9YiUvWCuawnTfD7DQvk8RN/nYXi1Sw7/v0NegmQpiVELVGtnA==",
+ "license": "MIT",
+ "dependencies": {
+ "file-selector": "^0.6.0"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "solid-js": "^1.7.11",
+ "svelte": "^4.2.12",
+ "vue": "^3.4.0"
+ },
+ "peerDependenciesMeta": {
+ "react": {
+ "optional": true
+ },
+ "solid-js": {
+ "optional": true
+ },
+ "svelte": {
+ "optional": true
+ },
+ "vue": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@uploadthing/mime-types": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/@uploadthing/mime-types/-/mime-types-0.3.0.tgz",
+ "integrity": "sha512-jN/XFvpKTzcd3MXT/9D9oxx05scnYiSYxAXF/e6hyg377zFducRxivU/kHyYTkpUZPTmOL5q9EQbOkUsXMlSMg==",
+ "license": "MIT"
+ },
+ "node_modules/@uploadthing/react": {
+ "version": "7.0.2",
+ "resolved": "https://registry.npmjs.org/@uploadthing/react/-/react-7.0.2.tgz",
+ "integrity": "sha512-343zTofWBo1yR+31/oP75WCTCC1lUuyAhfoqgJ0MEY64i15KoQAaTe3ICSNnXyeRaHCmJSQeK3hbEl44QGq/iQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@uploadthing/dropzone": "0.4.1",
+ "@uploadthing/shared": "7.0.2"
+ },
+ "peerDependencies": {
+ "next": "*",
+ "react": "^17.0.2 || ^18.0.0",
+ "uploadthing": "7.0.2"
+ },
+ "peerDependenciesMeta": {
+ "next": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@uploadthing/shared": {
+ "version": "7.0.2",
+ "resolved": "https://registry.npmjs.org/@uploadthing/shared/-/shared-7.0.2.tgz",
+ "integrity": "sha512-yhE7lA42m6g7Qw245Ey/8uK5J4d8FJhOg90VVt0PG1iJYvBZHbboSq1ndsGZ1X8jFaskBVORzWc66gEw43FEsQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@uploadthing/mime-types": "0.3.0",
+ "effect": "3.7.2",
+ "sqids": "^0.3.0"
+ }
+ },
"node_modules/abbrev": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
@@ -5262,6 +5356,21 @@
"url": "https://github.com/sponsors/isaacs"
}
},
+ "node_modules/effect": {
+ "version": "3.7.2",
+ "resolved": "https://registry.npmjs.org/effect/-/effect-3.7.2.tgz",
+ "integrity": "sha512-pV7l1+LSZFvVObj4zuy4nYiBaC7qZOfrKV6s/Ef4p3KueiQwZFgamazklwyZ+x7Nyj2etRDFvHE/xkThTfQD1w==",
+ "license": "MIT"
+ },
+ "node_modules/effect-log": {
+ "version": "0.32.0",
+ "resolved": "https://registry.npmjs.org/effect-log/-/effect-log-0.32.0.tgz",
+ "integrity": "sha512-zlh4S+zBkHeDhiV5IAAXwecqxASVJk9tYNJUb12EuJqgtRGGyhrXYNn8zz5Gk/w7PmnNLTl9Vb6bQo2BFn+J/Q==",
+ "license": "MIT",
+ "peerDependencies": {
+ "effect": "^3.7.0"
+ }
+ },
"node_modules/electron-to-chromium": {
"version": "1.5.19",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.19.tgz",
@@ -6094,6 +6203,28 @@
"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
}
},
+ "node_modules/fast-check": {
+ "version": "3.22.0",
+ "resolved": "https://registry.npmjs.org/fast-check/-/fast-check-3.22.0.tgz",
+ "integrity": "sha512-8HKz3qXqnHYp/VCNn2qfjHdAdcI8zcSqOyX64GOMukp7SL2bfzfeDKjSd+UyECtejccaZv3LcvZTm9YDD22iCQ==",
+ "funding": [
+ {
+ "type": "individual",
+ "url": "https://github.com/sponsors/dubzzz"
+ },
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/fast-check"
+ }
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "pure-rand": "^6.1.0"
+ },
+ "engines": {
+ "node": ">=8.0.0"
+ }
+ },
"node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -6189,6 +6320,18 @@
"node": "^10.12.0 || >=12.0.0"
}
},
+ "node_modules/file-selector": {
+ "version": "0.6.0",
+ "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+ "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+ "license": "MIT",
+ "dependencies": {
+ "tslib": "^2.4.0"
+ },
+ "engines": {
+ "node": ">= 12"
+ }
+ },
"node_modules/fill-range": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -6200,6 +6343,12 @@
"node": ">=8"
}
},
+ "node_modules/find-my-way-ts": {
+ "version": "0.1.5",
+ "resolved": "https://registry.npmjs.org/find-my-way-ts/-/find-my-way-ts-0.1.5.tgz",
+ "integrity": "sha512-4GOTMrpGQVzsCH2ruUn2vmwzV/02zF4q+ybhCIrw/Rkt3L8KWcycdC6aJMctJzwN4fXD4SD5F/4B9Sksh5rE0A==",
+ "license": "MIT"
+ },
"node_modules/find-up": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -8777,6 +8926,12 @@
"@msgpackr-extract/msgpackr-extract-win32-x64": "3.0.3"
}
},
+ "node_modules/multipasta": {
+ "version": "0.2.5",
+ "resolved": "https://registry.npmjs.org/multipasta/-/multipasta-0.2.5.tgz",
+ "integrity": "sha512-c8eMDb1WwZcE02WVjHoOmUVk7fnKU/RmUcosHACglrWAuPQsEJv+E8430sXj6jNc1jHw0zrS16aCjQh4BcEb4A==",
+ "license": "MIT"
+ },
"node_modules/mz": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -10882,6 +11037,12 @@
"integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
"license": "BSD-3-Clause"
},
+ "node_modules/sqids": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/sqids/-/sqids-0.3.0.tgz",
+ "integrity": "sha512-lOQK1ucVg+W6n3FhRwwSeUijxe93b51Bfz5PMRMihVf1iVkl82ePQG7V5vwrhzB11v0NtsR25PSZRGiSomJaJw==",
+ "license": "MIT"
+ },
"node_modules/stack-utils": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
@@ -11574,6 +11735,47 @@
"browserslist": ">= 4.21.0"
}
},
+ "node_modules/uploadthing": {
+ "version": "7.0.2",
+ "resolved": "https://registry.npmjs.org/uploadthing/-/uploadthing-7.0.2.tgz",
+ "integrity": "sha512-B5/r0nmOfWjo+cGvZLyDQ8jypJYWoW/VsmoL+VqkiGMg5yIkKzMGJ5InrDOJS+3WQBbW8KdhVrRyA+mGSZEGUw==",
+ "license": "MIT",
+ "dependencies": {
+ "@effect/platform": "0.63.2",
+ "@effect/schema": "0.72.2",
+ "@uploadthing/mime-types": "0.3.0",
+ "@uploadthing/shared": "7.0.2",
+ "effect": "3.7.2",
+ "effect-log": "0.32.0"
+ },
+ "engines": {
+ "node": ">=18.13.0"
+ },
+ "peerDependencies": {
+ "express": "*",
+ "fastify": "*",
+ "h3": "*",
+ "next": "*",
+ "tailwindcss": "*"
+ },
+ "peerDependenciesMeta": {
+ "express": {
+ "optional": true
+ },
+ "fastify": {
+ "optional": true
+ },
+ "h3": {
+ "optional": true
+ },
+ "next": {
+ "optional": true
+ },
+ "tailwindcss": {
+ "optional": true
+ }
+ }
+ },
"node_modules/uri-js": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
diff --git a/package.json b/package.json
index 37bbb64..4b64375 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
"@tanstack/react-query": "^5.56.2",
"@types/ioredis": "^4.28.10",
"@types/lodash.debounce": "^4.0.9",
+ "@uploadthing/react": "^7.0.2",
"axios": "^1.7.7",
"bullmq": "^5.13.0",
"class-variance-authority": "^0.7.0",
@@ -50,6 +51,7 @@
"sonner": "^1.5.0",
"tailwind-merge": "^2.5.2",
"tailwindcss-animate": "^1.0.7",
+ "uploadthing": "^7.0.2",
"zod": "^3.23.8"
},
"devDependencies": {
diff --git a/src/app/api/uploadthing/core.ts b/src/app/api/uploadthing/core.ts
new file mode 100644
index 0000000..6b36404
--- /dev/null
+++ b/src/app/api/uploadthing/core.ts
@@ -0,0 +1,34 @@
+import { createUploadthing, type FileRouter } from "uploadthing/next";
+import { UploadThingError } from "uploadthing/server";
+
+const f = createUploadthing();
+
+const auth = (req: Request) => ({ id: "fakeId" }); // Fake auth function
+
+// 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: { maxFileSize: "4MB" } })
+ // Set permissions and file types for this FileRoute
+ .middleware(async ({ req }) => {
+ // This code runs on your server before upload
+ const user = await auth(req);
+
+ // If you throw, the user will not be able to upload
+ if (!user) throw new UploadThingError("Unauthorized");
+
+ // Whatever is returned here is accessible in onUploadComplete as `metadata`
+ return { userId: user.id };
+ })
+ .onUploadComplete(async ({ metadata, file }) => {
+ // This code RUNS ON YOUR SERVER after upload
+ console.log("Upload complete for userId:", metadata.userId);
+
+ console.log("file url", file.url);
+
+ // !!! Whatever is returned here is sent to the clientside `onClientUploadComplete` callback
+ return { uploadedBy: metadata.userId };
+ }),
+} satisfies FileRouter;
+
+export type OurFileRouter = typeof ourFileRouter;
diff --git a/src/app/api/uploadthing/route.ts b/src/app/api/uploadthing/route.ts
new file mode 100644
index 0000000..81af864
--- /dev/null
+++ b/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: { ... },
+});
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
index 1b22465..caba8d0 100644
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
@@ -5,6 +5,7 @@ export default function page() {
return (
+
)
}
diff --git a/src/components/registration-form.tsx b/src/components/registration-form.tsx
index 83ae225..c10f168 100644
--- a/src/components/registration-form.tsx
+++ b/src/components/registration-form.tsx
@@ -11,6 +11,7 @@ import {
} from "@/components/ui/select";
import { useState } from "react";
import { toast } from "sonner";
+import { UploadButton } from "@/utils/uploadthing";
export default function RegistrationForm() {
const initialRegistration = {
@@ -149,6 +150,18 @@ export default function RegistrationForm() {
+
{
+ // Do something with the response
+ console.log("Files: ", res);
+ alert("Upload Completed");
+ }}
+ onUploadError={(error: Error) => {
+ // Do something with the error.
+ alert(`ERROR! ${error.message}`);
+ }}
+ />