Get image upload to cloudinary with the same public id

This means we can put a consistent url in the head for the card image

app/web/src/helpers/canvasToBlob.ts

@@ -33,3 +33,16 @@ export const canvasToBlob = async (
   updateCanvasSize(oldSize)
   return imgBlobPromise
 }
+
+export const blobTo64 = async (blob: Blob): Promise<string> => {
+  return new Promise(async (resolve, reject) => {
+    const reader = new FileReader()
+    reader.onloadend = () => {
+      if (typeof reader.result === 'string') {
+        resolve(reader.result)
+      }
+    }
+    reader.onerror = reject
+    reader.readAsDataURL(blob)
+  })
+}

app/web/src/helpers/cloudinary.js

@@ -1,21 +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) {
-  const imageData = new FormData()
-  imageData.append('upload_preset', CLOUDINARY_UPLOAD_PRESET)
-  imageData.append('file', imgBlob)
-  let 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)
-  }
-}

app/web/src/helpers/cloudinary.ts

@@ -0,0 +1,57 @@
+// 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/useUpdateSocialCard.ts

@@ -0,0 +1,24 @@
+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
+): string => `u-${userName}-slash-p-${projectTitle}`