MathiasM
Convex Community•2y ago•
1 reply
Mathias

How to upload images using Convex storage? (Solved)

I'm wondering if anyone has played around using Convex storage for their text editors?

I'm using the Novel.sh package, and they are providing an uploadFn like this:

import { createImageUpload } from "novel/plugins"
import { toast } from "sonner"

const onUpload = async (file: File) => {
  console.log("Uploading file", file)

  const generateUploadUrl = useMutation(api.files.generateUploadUrl);
  const { startUpload } = useUploadFiles(generateUploadUrl);

  await startUpload([file]) 
}

export const uploadFn = createImageUpload({
  onUpload,
  validateFn: (file) => {
    if (!file.type.includes("image/")) {
      toast.error("File type not supported.")
      return false
    }
    if (file.size / 1024 / 1024 > 20) {
      toast.error("File size too big (max 20MB).")
      return false
    }
    return true
  },
})


I have stripped it down to get rid of the Vercel blob storage implementation, and though I would use the uploadstuff.dev, but I really struggle to make it work within the onUpload. It does not seem to run the following lines:

  const generateUploadUrl = useMutation(api.files.generateUploadUrl);
  const { startUpload } = useUploadFiles(generateUploadUrl);

  await startUpload([file])


If I run the console.log, I get the following:

 argument #0:

  'Uploading file'
 file:

  File {
    name: 'IMG_1403.CR3',
    lastModified: 1701880784000,
    lastModifiedDate: new Date('2023-12-06T16:39:44.000Z'),
    webkitRelativePath: '',
    size: 18311314,
    type: 'image/x-canon-cr3'
  }


So it would seem that the onUpload is running but not the Convex specific functions. What have I missed?
Novel Docs
Image Upload (New) - Novel Docs
Uploading images in the editor
Image Upload (New) - Novel Docs
Was this page helpful?