Delete cached images on delete template

app/constants/s3Constants.ts

@@ -1,2 +1,4 @@
 export const bucketURL = "https://cgbucket.ams3.digitaloceanspaces.com";
 export const MAX_IMAGE_SIZE = 5_000_000;
+export const CACHED_FOLDER = "ogimages/cached/";
+export const BUCKET_NAME = "cgbucket";

app/libs/s3.ts

@@ -8,6 +8,7 @@ import {
   ListObjectsCommand,
   ListObjectsV2Command,
 } from "@aws-sdk/client-s3";
+import { BUCKET_NAME } from "~/constants/s3Constants";
 
 const s3 = new S3Client({
   forcePathStyle: false, // Configures to use subdomain/virtual calling format.
@@ -27,7 +28,7 @@ const s3 = new S3Client({
  */
 export const uploadToS3 = async (fileContent: Buffer, key: string) => {
   const params: PutObjectCommandInput = {
-    Bucket: "cgbucket",
+    Bucket: BUCKET_NAME,
     Key: key,
     Body: fileContent,
     ACL: "public-read",
@@ -51,7 +52,7 @@ export const uploadToS3 = async (fileContent: Buffer, key: string) => {
  */
 export const deleteFromS3 = async (key: string) => {
   const params = {
-    Bucket: "cgbucket",
+    Bucket: BUCKET_NAME,
     Key: key,
   };
 
@@ -69,7 +70,7 @@ export const deleteFromS3 = async (key: string) => {
  */
 export const multipleDeleteFromS3 = async (keys: string[]) => {
   const params = {
-    Bucket: "cgbucket",
+    Bucket: BUCKET_NAME,
     Delete: {
       Objects: keys.map((key) => ({ Key: key })),
     },
@@ -97,7 +98,7 @@ export const multipleDeleteFromS3 = async (keys: string[]) => {
  */
 export const fileExists = async (filePath: string) => {
   const command = new HeadObjectCommand({
-    Bucket: "cgbucket",
+    Bucket: BUCKET_NAME,
     Key: filePath,
   });
 
@@ -121,7 +122,7 @@ export async function deleteFolder(location: string) {
   async function recursiveDelete(token: string | undefined = undefined) {
     // get the files
     const listCommand = new ListObjectsV2Command({
-      Bucket: "cgbucket",
+      Bucket: BUCKET_NAME,
       Prefix: location,
       ContinuationToken: token,
     });
@@ -130,7 +131,7 @@ export async function deleteFolder(location: string) {
       // if items to delete
       // delete the files
       const deleteCommand = new DeleteObjectsCommand({
-        Bucket: "cgbucket",
+        Bucket: BUCKET_NAME,
         Delete: {
           Objects: list.Contents?.map((item) => ({ Key: item.Key })),
           Quiet: false,

app/routes/api.delete-template.tsx

@@ -2,9 +2,10 @@ import { ActionFunctionArgs, json } from "@remix-run/node";
 import { withZod } from "@remix-validated-form/with-zod";
 import { validationError } from "remix-validated-form";
 import { z } from "zod";
+import { CACHED_FOLDER } from "~/constants/s3Constants";
 import { ensureAuthenticated } from "~/libs/lucia";
 import { prisma } from "~/libs/prisma";
-import { multipleDeleteFromS3 } from "~/libs/s3";
+import { deleteFolder, multipleDeleteFromS3 } from "~/libs/s3";
 
 export const validator = withZod(
   z.object({
@@ -64,6 +65,8 @@ export async function action({ context, request }: ActionFunctionArgs) {
       },
     });
 
+    deleteFolder(CACHED_FOLDER + templateId);
+
     return json({ ok: true });
   } catch (error) {
     console.error(error);

app/routes/api.render.$templateId.tsx

@@ -6,6 +6,7 @@ import CryptoJS from "crypto-js";
 import { getCacheData, setCacheData } from "~/libs/redis.server";
 import { SvgGenerate } from "~/utils/svgGenerate";
 import { fileExists, uploadToS3 } from "~/libs/s3";
+import { CACHED_FOLDER } from "~/constants/s3Constants";
 
 const cacheEnabled = true;
 
@@ -46,7 +47,7 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
 
   const cacheKey = `render-${variablesValuesHashed}`;
 
-  const imageLocation = `ogimages/cached/${templateId}/${cacheKey}.png`;
+  const imageLocation = `${CACHED_FOLDER}${templateId}/${cacheKey}.png`;
 
   const resFileExists = await fileExists(imageLocation);
 

app/routes/api.update-template.tsx

@@ -3,6 +3,7 @@ import { ActionFunctionArgs, json } from "@remix-run/node";
 import { withZod } from "@remix-validated-form/with-zod";
 import { validationError } from "remix-validated-form";
 import { z } from "zod";
+import { CACHED_FOLDER } from "~/constants/s3Constants";
 import { ensureAuthenticated } from "~/libs/lucia";
 import { prisma } from "~/libs/prisma";
 import { deleteFolder } from "~/libs/s3";
@@ -71,7 +72,7 @@ export async function action({ context, request }: ActionFunctionArgs) {
     });
 
     //Template folder cached
-    const folder = `ogimages/cached/${templateId}/`;
+    const folder = `${CACHED_FOLDER}${templateId}/`;
 
     //Delete all the files cached
     deleteFolder(folder);