How to send metadata from client to server via useUploadThing (Nuxt3)
I've been using uploadthing in nuxt3 for a week. Most things work, but I can't pass metadata from client-to-server via useUploadThing.
What I'm trying to do: create a customId on the client, pass it to my server, and use it to form the presigned URL. Starting on the client with:
const {startUpload} = useUploadThing("images");
async function handleFileUpload(event) {
...
const metadata = {customId: "XYZ"};
await startUpload(files, metadata);
}
My server is:
import {createUploadthing} from "uploadthing/h3";
import type {FileRouter} from "uploadthing/h3";
import {UTFiles} from "uploadthing/h3";
import {sluggify} from "my-sluggify";
const f = createUploadthing();
export const uploadRouter = {
images: f(["image"])
.middleware(async ({files}) => {
const fileOverrides = files.map((file) => {
const newName = sluggify(file.name);
const customIdFromMetadata = "some-custom-id";
return {...file, name: newName, customId: customIdFromMetadata};
});
return {[UTFiles]: fileOverrides}; // foo:bar => metadata for file
})
.onUploadComplete(({file, metadata}) => {
metadata;
console.log("upload completed", file);
return {foo: "bar" as const};
}),
} satisfies FileRouter;
export type UploadRouter = typeof uploadRouter;
This correctly sets a customId, but I need to use a value created on the client. I can see that the request comes in as:
{
"input":{"customId":"XYZ"},
"files": {...}
}
Whatever property name is used in startUpload (e.g., 'metadata') is always changed to 'input' in the request. But I can't work out how we can access this property within the middleware. I've tested many variations and searched the docs, but come up blank.
Before I build some crazy workarounds, I thought I'd ask: does anyone here know how we can pass client metadata ('input') to the uploadRouter middleware?
What I'm trying to do: create a customId on the client, pass it to my server, and use it to form the presigned URL. Starting on the client with:
const {startUpload} = useUploadThing("images");
async function handleFileUpload(event) {
...
const metadata = {customId: "XYZ"};
await startUpload(files, metadata);
}
My server is:
import {createUploadthing} from "uploadthing/h3";
import type {FileRouter} from "uploadthing/h3";
import {UTFiles} from "uploadthing/h3";
import {sluggify} from "my-sluggify";
const f = createUploadthing();
export const uploadRouter = {
images: f(["image"])
.middleware(async ({files}) => {
const fileOverrides = files.map((file) => {
const newName = sluggify(file.name);
const customIdFromMetadata = "some-custom-id";
return {...file, name: newName, customId: customIdFromMetadata};
});
return {[UTFiles]: fileOverrides}; // foo:bar => metadata for file
})
.onUploadComplete(({file, metadata}) => {
metadata;
console.log("upload completed", file);
return {foo: "bar" as const};
}),
} satisfies FileRouter;
export type UploadRouter = typeof uploadRouter;
This correctly sets a customId, but I need to use a value created on the client. I can see that the request comes in as:
{
"input":{"customId":"XYZ"},
"files": {...}
}
Whatever property name is used in startUpload (e.g., 'metadata') is always changed to 'input' in the request. But I can't work out how we can access this property within the middleware. I've tested many variations and searched the docs, but come up blank.
Before I build some crazy workarounds, I thought I'd ask: does anyone here know how we can pass client metadata ('input') to the uploadRouter middleware?
Was this page helpful?
