Theo's Typesafe Cult•2y ago

upload image using supabase

does anyone had a method to upload multiple image and save it to db using trpc endpoint? (im using supabase) thanks in advance

7 Replies

arete•2y ago

and how to handle images but from front end side

stanisław•2y ago

Currently there is no option to upload multiple files at once so you'll have to make a loop

// file.data is a Buffer

      const promises = images.map(async file => {
        const { data, error } = await supabase.storage.from('offers').upload(randomUUID(), file.data, {
          contentType: file.mimetype
        })

        if (error) {
          throw reply.internalServerError(error.message)
        }

        const { data: url } = supabase.storage.from('offers').getPublicUrl(data.path)

        return { img: url.publicUrl }
      })

      const urls = await Promise.all(promises)

// file.data is a Buffer

      const promises = images.map(async file => {
        const { data, error } = await supabase.storage.from('offers').upload(randomUUID(), file.data, {
          contentType: file.mimetype
        })

        if (error) {
          throw reply.internalServerError(error.message)
        }

        const { data: url } = supabase.storage.from('offers').getPublicUrl(data.path)

        return { img: url.publicUrl }
      })

      const urls = await Promise.all(promises)

I wrote something like this a while ago @Devastated

arete•2y ago

so the urls variable is array?, if so how i save it to db do i need to loop it again do i put your code above at my trpc router or in tsx file? sorry for the late reply, its night in my timezone😂 and how you upload it from frontend if you handle multiple images

stanisław•2y ago

Idk because I am not using trpc, the code above runs on my fastify backend and the urls is an array of objects { img: 'http... }


In the above example I had a separate table in db so I just used

prisma.offerImage.createMany and put the urls as a data`

arete•2y ago

So createmany accept array of object?

stanisław•2y ago

Why don't you check prisma docs @Devastated ? 🙂

arete•2y ago

ahh ok thankss

Gaming

Programming

upload image using supabase