#File Storage and Fonts

8 messages · Page 1 of 1 (latest)

unique glade
#

I'm having trouble retrieving font files after uploading them to File Storage. I'm writing a seed function and the goal is to fetch fonts from Fontshare's cdn, parse them using Opentype.js, then seed using the meta data from opentype.js and store the .ttf file in File Storage so that I won't be reliant on someone else's cdn. The code looks something like this:

jaunty cloakBOT
#

Thanks for posting in #1088161997662724167.
Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets.

    - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.)
    - Use [search.convex.dev](https://search.convex.dev) to search Docs, Stack, and Discord all at once.
    - Additionally, you can post your questions in the Convex Community's #1228095053885476985 channel to receive a response from AI.
    - Avoid tagging staff unless specifically instructed.

    Thank you!
unique glade
# 
async function uploadFontData(
  uploadUrl: string,
  data: {
    bufferData: ArrayBuffer
    fullName: string
  },
): Promise<Id<'_storage'>> {
  const { bufferData, fullName } = data

  const blob = new Blob([bufferData], {
    type: 'font/ttf',
  })

  const file = new File([blob], `${fullName}.ttf`, {
    type: 'font/ttf',
  })

  // // Create FormData and append the file
  // const formData = new FormData()
  // formData.append('file', file)

  // Upload the font file
  const result = await fetch(uploadUrl, {
    method: 'POST',
    body: file,
    headers: {
      'Content-Type': 'font/ttf',
    },
  })

  if (!result.ok) {
    throw new Error(`Failed to upload font ${fullName}`)
  }

  const { storageId } = await result.json()

  return storageId
}

export const seedFonts = internalAction({
  handler: async (ctx, args) => {
    const { fontData, bufferData }: {
        fontData: FontFamily[];
        bufferData: Record<string, ArrayBuffer>;
    } = await getFontshareData()
    const updatedFontData = []

    for (const font of fontData) {
      const fontVariants = []

      for (const variant of font.variants) {
        if (bufferData[variant.fullName]) {
          const uploadUrl = await ctx.storage.generateUploadUrl()

          const storageId = await uploadFontData(uploadUrl, {
            bufferData: bufferData[variant.fullName],
            fullName: variant.fullName,
          })

          const fileUrl = await ctx.storage.getUrl(storageId)

          fontVariants.push({
            ...variant,
            fileUrl,
            storageId,
          })
        } else {
          fontVariants.push(variant)
        }
      }

      updatedFontData.push({
        ...font,
        variants: fontVariants,
      })
    }

    // Save the updated font data to the database

    return updatedFontData
  },
})
#

The files get uploaded, but when i go to download them they are not in a recognized (.ttf) format. When manually uploading a working .ttf or .woff2 font file then downloading it the same thing happens.

Am I doing something wrong?

image.png
split oracle
#

The upload code seems fine. Can you share more details about the file that gets downloaded? Does it work it you change the filename to have a .ttf extension?

unique glade
#

it does

#

awesome. I appreciate the speedy reply!

unique glade