7 replies

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

TTC

Theo's Typesafe Cult•11mo ago•

7 replies

Hemi

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

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'],
// }

Solution

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

Jump to solution

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

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

Similar Threads

Similar Threads

Similar Threads