Theo's Typesafe Cult•2mo ago

How to pass data (input) along with multi-file uploads?

I have my uploader configure to allow multiple image uploads; I really need to send an id along with each file to update the db onUploadComplete. Since startUpload takes an array of files, I figured I should also send an array of ids Here's the simplified setup:

startUpload(files, ids) // passed to useUploadThing

export const uploadthingRouter = {
  tileUploader: f({
    //
  })
    .input(uploaderInputSchema) // Zod array
    .middleware(async ({ req, input }) => {
      const user = await getCurrentUser()
      if (!user) throw new UploadThingError('Unauthorized')

      const ids = uploaderInputSchema.parse(input)
      return {
        userId: user.id,
        ids: ids,
      }
    })
    .onUploadComplete(async ({ metadata, file }) => {
      console.log('metadata', metadata)
    }),
}

// Console output:
// metadata {
//   userId: '123',
//   ids: ['123', '456'],
// }

startUpload(files, ids) // passed to useUploadThing

export const uploadthingRouter = {
  tileUploader: f({
    //
  })
    .input(uploaderInputSchema) // Zod array
    .middleware(async ({ req, input }) => {
      const user = await getCurrentUser()
      if (!user) throw new UploadThingError('Unauthorized')

      const ids = uploaderInputSchema.parse(input)
      return {
        userId: user.id,
        ids: ids,
      }
    })
    .onUploadComplete(async ({ metadata, file }) => {
      console.log('metadata', metadata)
    }),
}

// Console output:
// metadata {
//   userId: '123',
//   ids: ['123', '456'],
// }

As you can see once it gets to onUploadComplete metadata, I do have the array of Ids coming through --I'm just not sure how to get the id that corresponds to each file. I'm guessing there must be something I'm meant to do in the .input or .middleware?? Can anyone help please?

Solution:

This is something we actually do not handle super well right now. You can change files customId in middleware though

Jump to solution

4 Replies