Example integration tus-server with React Router

Tus
1

Hi there,

Is there any example on how to integrate @tus/server with @react-router, with or without middleware?

It seems request and response object can not be passed directly to tusServer and I would love to get example on that.

Here is the stripped out code that does not work, please help me fill in the dots

const tusServer = new Server({
path:“/tus”,
datastore: new FileStore({ directory: ‘./files’ })
});

export async function action({request, params, context}: Route.ActionArgs) {
return tusServer.handle(… ???)
}

Thank you,
Lya

2

Instead of handle() use handleWeb():

3

Thank you Merlijn, I can confirm that this works.

Here is an example on how to integrate tus-server 2.0.0 with react-router v7

app/routes.ts
import { type RouteConfig, index, route } from “@react-router/dev/routes”;

export default [
index(“routes/home.tsx”),
route(“upload/*”, “api/upload.ts”),
] satisfies RouteConfig;

api/upload.ts
import type { Route } from “../+types”;
import { Server } from ‘@tus/server’;
import { FileStore } from ‘@tus/file-store’;
import { Upload } from ‘@tus/server’;
// Configure the tus server
const tusServer = new Server({
path: “upload”,
datastore: new FileStore({ directory: ‘./files’ }),
onUploadCreate: (req: Request, upload: Upload) => {
return Promise.resolve({ metadata: { uploadId: upload.id } });
},
onUploadFinish: (req: Request, upload: Upload) => {
return Promise.resolve({ status_code: 200 });
},
onResponseError: (req: Request, err: Error | { status_code: number; body: string }) => {
return Promise.resolve({ status_code: 200, body: “Upload Error” });
},
});

export async function action(props: Route.ActionArgs) {
return tusServer.handleWeb(props.request)
}

4

You can make a pull request to add it to the readme examples if you want :slight_smile:

5

Will do, I will test and update the readme :slight_smile: