got something working thats only a little hacky

app/web/src/helpers/canvasToBlob.ts

@@ -27,7 +27,7 @@ export const canvasToBlob = async (
         resolve(blob)
       },
       'image/jpeg',
-      1
+      0.75
     )
   })
   updateCanvasSize(oldSize)

app/web/src/helpers/cloudinary.ts

@@ -1,57 +0,0 @@
-// TODO: create a tidy util for uploading to Cloudinary and returning the public ID
-import axios from 'axios'
-
-const CLOUDINARY_UPLOAD_PRESET = 'CadHub_project_images'
-const CLOUDINARY_UPLOAD_URL = 'https://api.cloudinary.com/v1_1/irevdev/upload'
-
-export async function uploadToCloudinary(
-  imgBlob: Blob,
-  publicId?: string
-): Promise<{ public_id: string }> {
-  const imageData = new FormData()
-  imageData.append('upload_preset', CLOUDINARY_UPLOAD_PRESET)
-  imageData.append('file', imgBlob)
-  if (publicId) {
-    imageData.append('public_id', publicId)
-  }
-  const upload = axios.post(CLOUDINARY_UPLOAD_URL, imageData)
-
-  try {
-    const { data } = await upload
-    if (data && data.public_id !== '') {
-      return data
-    }
-  } catch (e) {
-    console.error('ERROR', e)
-  }
-}
-
-export async function serverVerifiedImageUpload(
-  imgBlob: string,
-  projectId: string,
-  token: string,
-  publicId?: string
-): Promise<{ publicId: string }> {
-  const imageData = {
-    image64: imgBlob,
-    upload_preset: CLOUDINARY_UPLOAD_PRESET,
-    public_id: publicId,
-    invalidate: true,
-    projectId,
-  }
-  const upload = axios.post('/.netlify/functions/image-upload', imageData, {
-    headers: {
-      'auth-provider': 'goTrue',
-      authorization: `Bearer ${token}`,
-    },
-  })
-
-  try {
-    const { data } = await upload
-    if (data && data.public_id !== '') {
-      return data
-    }
-  } catch (e) {
-    console.error('ERROR', e)
-  }
-}

app/web/src/helpers/hooks/useUpdateProjectImages.ts

@@ -0,0 +1,31 @@
+import { useMutation } from '@redwoodjs/web'
+
+const UPDATE_PROJECT_IMAGES_MUTATION_HOOK = gql`
+  mutation updateProjectImages(
+    $id: String!
+    $mainImage64: String
+    $socialCard64: String
+  ) {
+    updateProjectImages(
+      id: $id
+      mainImage64: $mainImage64
+      socialCard64: $socialCard64
+    ) {
+      id
+      mainImage
+      socialCard {
+        id
+        url
+      }
+    }
+  }
+`
+
+export const useUpdateProjectImages = ({ onCompleted = () => {} }) => {
+  const [updateProjectImages, { loading, error }] = useMutation(
+    UPDATE_PROJECT_IMAGES_MUTATION_HOOK,
+    { onCompleted }
+  )
+
+  return { updateProjectImages, loading, error }
+}

app/web/src/helpers/hooks/useUpdateSocialCard.ts

@@ -1,23 +1,3 @@
-import { useMutation } from '@redwoodjs/web'
-
-const UPDATE_SOCIAL_CARD_MUTATION_HOOK = gql`
-  mutation updateSocialCardByProjectId($projectId: String!, $url: String!) {
-    updateSocialCardByProjectId(projectId: $projectId, url: $url) {
-      id
-      url
-    }
-  }
-`
-
-export const useUpdateSocialCard = ({ onCompleted = () => {} }) => {
-  const [updateSocialCard, { loading, error }] = useMutation(
-    UPDATE_SOCIAL_CARD_MUTATION_HOOK,
-    { onCompleted }
-  )
-
-  return { updateSocialCard, loading, error }
-}
-
 export const makeSocialPublicId = (
   userName: string,
   projectTitle: string