Skip to content

Commit fd64123

Browse files
cp-dharti-rcp-dharti-r
committed
Implement upload and delete fuctionality to s3 for images and videos
1 parent 59c64cc commit fd64123

File tree

24 files changed

+294
-402
lines changed

24 files changed

+294
-402
lines changed

‎admin/components/Sidebar/index.tsx

Lines changed: 45 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -128,53 +128,53 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
128128
</Link>
129129
</div>
130130

131-
<div>
132-
<Link
133-
href="/categories"
134-
onClick={() => setSidebarOpen(false)}
135-
className={`group relative flex items-center gap-5 rounded-sm px-4 py-2 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
136-
pathname?.includes("categories") &&
137-
"bg-graydark dark:bg-meta-4"
138-
}`}
139-
>
140-
<svg
141-
className="fill-white"
142-
width="25"
143-
height="30"
144-
viewBox="0 0 18 18"
145-
fill="none"
146-
xmlns="http://www.w3.org/2000/svg"
131+
{role == "super-admin" ? (
132+
<div>
133+
<Link
134+
href="/categories"
135+
onClick={() => setSidebarOpen(false)}
136+
className={`group relative flex items-center gap-5 rounded-sm px-4 py-2 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
137+
pathname?.includes("categories") &&
138+
"bg-graydark dark:bg-meta-4"
139+
}`}
147140
>
148-
<g clipPath="url(#clip0_130_9807)">
149-
<path
150-
d="M15.7501 0.55835H2.2501C1.29385 0.55835 0.506348 1.34585 0.506348 2.3021V7.53335C0.506348 8.4896 1.29385 9.2771 2.2501 9.2771H15.7501C16.7063 9.2771 17.4938 8.4896 17.4938 7.53335V2.3021C17.4938 1.34585 16.7063 0.55835 15.7501 0.55835ZM16.2563 7.53335C16.2563 7.8146 16.0313 8.0396 15.7501 8.0396H2.2501C1.96885 8.0396 1.74385 7.8146 1.74385 7.53335V2.3021C1.74385 2.02085 1.96885 1.79585 2.2501 1.79585H15.7501C16.0313 1.79585 16.2563 2.02085 16.2563 2.3021V7.53335Z"
151-
fill=""
152-
/>
153-
<path
154-
d="M6.13135 10.9646H2.2501C1.29385 10.9646 0.506348 11.7521 0.506348 12.7083V15.8021C0.506348 16.7583 1.29385 17.5458 2.2501 17.5458H6.13135C7.0876 17.5458 7.8751 16.7583 7.8751 15.8021V12.7083C7.90322 11.7521 7.11572 10.9646 6.13135 10.9646ZM6.6376 15.8021C6.6376 16.0833 6.4126 16.3083 6.13135 16.3083H2.2501C1.96885 16.3083 1.74385 16.0833 1.74385 15.8021V12.7083C1.74385 12.4271 1.96885 12.2021 2.2501 12.2021H6.13135C6.4126 12.2021 6.6376 12.4271 6.6376 12.7083V15.8021Z"
155-
fill=""
156-
/>
157-
<path
158-
d="M15.75 10.9646H11.8688C10.9125 10.9646 10.125 11.7521 10.125 12.7083V15.8021C10.125 16.7583 10.9125 17.5458 11.8688 17.5458H15.75C16.7063 17.5458 17.4938 16.7583 17.4938 15.8021V12.7083C17.4938 11.7521 16.7063 10.9646 15.75 10.9646ZM16.2562 15.8021C16.2562 16.0833 16.0312 16.3083 15.75 16.3083H11.8688C11.5875 16.3083 11.3625 16.0833 11.3625 15.8021V12.7083C11.3625 12.4271 11.5875 12.2021 11.8688 12.2021H15.75C16.0312 12.2021 16.2562 12.4271 16.2562 12.7083V15.8021Z"
159-
fill=""
160-
/>
161-
</g>
162-
<defs>
163-
<clipPath id="clip0_130_9807">
164-
<rect
165-
width="18"
166-
height="18"
167-
fill="white"
168-
transform="translate(0 0.052124)"
141+
<svg
142+
className="fill-white"
143+
width="25"
144+
height="30"
145+
viewBox="0 0 18 18"
146+
fill="none"
147+
xmlns="http://www.w3.org/2000/svg"
148+
>
149+
<g clipPath="url(#clip0_130_9807)">
150+
<path
151+
d="M15.7501 0.55835H2.2501C1.29385 0.55835 0.506348 1.34585 0.506348 2.3021V7.53335C0.506348 8.4896 1.29385 9.2771 2.2501 9.2771H15.7501C16.7063 9.2771 17.4938 8.4896 17.4938 7.53335V2.3021C17.4938 1.34585 16.7063 0.55835 15.7501 0.55835ZM16.2563 7.53335C16.2563 7.8146 16.0313 8.0396 15.7501 8.0396H2.2501C1.96885 8.0396 1.74385 7.8146 1.74385 7.53335V2.3021C1.74385 2.02085 1.96885 1.79585 2.2501 1.79585H15.7501C16.0313 1.79585 16.2563 2.02085 16.2563 2.3021V7.53335Z"
152+
fill=""
169153
/>
170-
</clipPath>
171-
</defs>
172-
</svg>
173-
Categories
174-
</Link>
175-
</div>
176-
177-
{role != "super-admin" ? (
154+
<path
155+
d="M6.13135 10.9646H2.2501C1.29385 10.9646 0.506348 11.7521 0.506348 12.7083V15.8021C0.506348 16.7583 1.29385 17.5458 2.2501 17.5458H6.13135C7.0876 17.5458 7.8751 16.7583 7.8751 15.8021V12.7083C7.90322 11.7521 7.11572 10.9646 6.13135 10.9646ZM6.6376 15.8021C6.6376 16.0833 6.4126 16.3083 6.13135 16.3083H2.2501C1.96885 16.3083 1.74385 16.0833 1.74385 15.8021V12.7083C1.74385 12.4271 1.96885 12.2021 2.2501 12.2021H6.13135C6.4126 12.2021 6.6376 12.4271 6.6376 12.7083V15.8021Z"
156+
fill=""
157+
/>
158+
<path
159+
d="M15.75 10.9646H11.8688C10.9125 10.9646 10.125 11.7521 10.125 12.7083V15.8021C10.125 16.7583 10.9125 17.5458 11.8688 17.5458H15.75C16.7063 17.5458 17.4938 16.7583 17.4938 15.8021V12.7083C17.4938 11.7521 16.7063 10.9646 15.75 10.9646ZM16.2562 15.8021C16.2562 16.0833 16.0312 16.3083 15.75 16.3083H11.8688C11.5875 16.3083 11.3625 16.0833 11.3625 15.8021V12.7083C11.3625 12.4271 11.5875 12.2021 11.8688 12.2021H15.75C16.0312 12.2021 16.2562 12.4271 16.2562 12.7083V15.8021Z"
160+
fill=""
161+
/>
162+
</g>
163+
<defs>
164+
<clipPath id="clip0_130_9807">
165+
<rect
166+
width="18"
167+
height="18"
168+
fill="white"
169+
transform="translate(0 0.052124)"
170+
/>
171+
</clipPath>
172+
</defs>
173+
</svg>
174+
Categories
175+
</Link>
176+
</div>
177+
) : (
178178
<div>
179179
<Link
180180
href="/pending-invitations"
@@ -196,8 +196,6 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
196196
Your Invitations
197197
</Link>
198198
</div>
199-
) : (
200-
""
201199
)}
202200

203201
{role === "admin" ? (

‎admin/next.config.mjs

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
/** @type {import('next').NextConfig} */
22
const nextConfig = {
3-
reactStrictMode: true,
3+
// reactStrictMode: true,
44
images: {
55
unoptimized: true,
6-
domains: ["mbbmnygwewvjsxsjtzbo.supabase.co"],
76
},
87
};
98

‎admin/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@aws-sdk/client-s3": "^3.606.0",
13+
"@aws-sdk/s3-request-presigner": "^3.609.0",
1214
"@react-email/render": "^0.0.14",
1315
"@supabase/ssr": "^0.3.0",
1416
"@supabase/supabase-js": "^2.43.4",

‎admin/pages/categories/add/index.tsx

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { getCookiesValue } from "@/utils/jwt-auth";
1010
import {
1111
changeFileExtensionToWebpExtension,
1212
convertToWebP,
13+
uploadFileTos3,
1314
} from "@/utils/image";
1415

1516
const AddCategoryPage = () => {
@@ -51,21 +52,14 @@ const AddCategoryPage = () => {
5152
const webpBlob = await convertToWebP(image);
5253

5354
const currentDate = new Date();
54-
const { data: imgData, error: imgErr } = await supabase.storage
55-
.from("categories")
56-
.upload(
57-
currentDate.getTime() +
58-
"-" +
59-
changeFileExtensionToWebpExtension(image.name),
60-
webpBlob
61-
);
62-
63-
if (imgErr) throw imgErr;
64-
65-
image_url =
66-
process.env.NEXT_PUBLIC_SUPABASE_STORAGE_URL +
67-
"/categories/" +
68-
imgData.path;
55+
56+
image_url = await uploadFileTos3(
57+
"categories",
58+
webpBlob,
59+
currentDate.getTime() +
60+
"-" +
61+
changeFileExtensionToWebpExtension(image.name)
62+
);
6963
}
7064

7165
const response = mySchema.safeParse({

‎admin/pages/categories/edit/[id].tsx

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import SingleImgPreview from "@/components/ImagePreview/SingleImage";
99
import {
1010
changeFileExtensionToWebpExtension,
1111
convertToWebP,
12-
getFilenameFromURL,
12+
deleteFileFroms3,
13+
uploadFileTos3,
1314
} from "@/utils/image";
1415

1516
const EditCategoryPage = () => {
@@ -75,27 +76,16 @@ const EditCategoryPage = () => {
7576
const webpBlob = await convertToWebP(imageData);
7677

7778
const currentDate = new Date();
78-
const { data: imgData, error: imgErr } = await supabase.storage
79-
.from("categories")
80-
.upload(
81-
currentDate.getTime() +
82-
"-" +
83-
changeFileExtensionToWebpExtension(imageData.name),
84-
webpBlob
85-
);
8679

87-
if (imgErr) throw imgErr;
80+
image_url = await uploadFileTos3(
81+
"categories",
82+
webpBlob,
83+
currentDate.getTime() +
84+
"-" +
85+
changeFileExtensionToWebpExtension(imageData.name)
86+
);
8887

89-
const { error } = await supabase.storage
90-
.from("categories")
91-
.remove([getFilenameFromURL(image)]);
92-
93-
if (error) throw error;
94-
95-
image_url =
96-
process.env.NEXT_PUBLIC_SUPABASE_STORAGE_URL +
97-
"/categories/" +
98-
imgData.path;
88+
await deleteFileFroms3(image);
9989
}
10090

10191
const response = mySchema.safeParse({

‎admin/pages/categories/index.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Link from "next/link";
55
import Image from "next/image";
66
import supabase from "@/utils/supabase";
77
import PaginationPage from "@/components/pagination/PaginatedPage";
8-
import { getFilenameFromURL } from "@/utils/image";
8+
import { deleteFileFroms3 } from "@/utils/image";
99
import { getCookiesValue } from "@/utils/jwt-auth";
1010

1111
const CategoriesPage = () => {
@@ -75,11 +75,7 @@ const CategoriesPage = () => {
7575

7676
const deleteRecord = async (id: number, key: number) => {
7777
try {
78-
const { data, error } = await supabase.storage
79-
.from("categories")
80-
.remove([getFilenameFromURL(categoriesData[key].image)]);
81-
82-
if (error) throw error;
78+
await deleteFileFroms3(categoriesData[key].image);
8379

8480
await supabase.from("categories").delete().eq("id", id).throwOnError();
8581
setCategoriesData((prevCategories) =>

‎admin/pages/dishes/add/index.tsx

Lines changed: 25 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { getCookiesValue } from "@/utils/jwt-auth";
1212
import {
1313
changeFileExtensionToWebpExtension,
1414
convertToWebP,
15+
uploadFileTos3,
1516
} from "@/utils/image";
1617

1718
const AddDishPage = () => {
@@ -93,56 +94,40 @@ const AddDishPage = () => {
9394
: z.null(),
9495
});
9596

96-
const currentDate = new Date();
97-
9897
if (isImagesChecked && imagesData) {
9998
for (var i = 0; i < imagesData.length; i++) {
100-
const webpBlob = await convertToWebP(imagesData[i]);
101-
102-
const { data: imgData, error: imgErr } = await supabase.storage
103-
.from("dishes")
104-
.upload(
105-
currentDate.getTime() +
106-
"-" +
107-
changeFileExtensionToWebpExtension(imagesData[i].name),
108-
webpBlob
109-
);
99+
const currentDate = new Date();
110100

111-
if (imgErr) throw imgErr;
101+
const webpBlob = await convertToWebP(imagesData[i]);
112102

113-
const image_url =
114-
process.env.NEXT_PUBLIC_SUPABASE_STORAGE_URL +
115-
"/dishes/" +
116-
imgData.path;
103+
const image_url = await uploadFileTos3(
104+
"dishes",
105+
webpBlob,
106+
currentDate.getTime() +
107+
"-" +
108+
changeFileExtensionToWebpExtension(imagesData[i].name)
109+
);
117110

118111
images.push(image_url);
119112
}
120113
} else if (videoData) {
121114
const currentDate = new Date();
122-
const { data: imgData, error: imgErr } = await supabase.storage
123-
.from("dishes")
124-
.upload(
125-
currentDate.getTime() + "-" + thumbnailData.name,
126-
thumbnailData
127-
);
128-
129-
if (imgErr) throw imgErr;
130-
131-
thumbnail =
132-
process.env.NEXT_PUBLIC_SUPABASE_STORAGE_URL +
133-
"/dishes/" +
134-
imgData.path;
135-
136-
const { data: videoStore, error: videoErr } = await supabase.storage
137-
.from("dishes")
138-
.upload(currentDate.getTime() + "-" + videoData.name, videoData);
139-
140-
if (videoErr) throw videoErr;
141115

142-
video =
143-
process.env.NEXT_PUBLIC_SUPABASE_STORAGE_URL +
144-
"/dishes/" +
145-
videoStore.path;
116+
const webpBlob = await convertToWebP(thumbnailData);
117+
118+
thumbnail = await uploadFileTos3(
119+
"dishes",
120+
webpBlob,
121+
currentDate.getTime() +
122+
"-" +
123+
changeFileExtensionToWebpExtension(thumbnailData.name)
124+
);
125+
126+
video = await uploadFileTos3(
127+
"dishes",
128+
videoData,
129+
currentDate.getTime() + "-" + videoData.name
130+
);
146131
}
147132

148133
const response = mySchema.safeParse({

0 commit comments

Comments
 (0)